Click any card in the library to open its detail view. This is where you inspect a component or pattern before copying it.
How it looks #
The detail view adapts to your current layout mode.
In sidebar mode, the wireframe or live preview appears at the top, followed by the component metadata (name, description, category, version, tags). The action buttons stay fixed at the bottom so you can always reach them without scrolling.
In full-width mode, the layout splits into two panes. The preview takes the left side and the info panel sits fixed on the right. This gives you more room to inspect the preview, especially for larger components like hero sections or pricing tables.
Live preview and viewport presets #
Some items include a live preview URL. When one is available, the detail view loads it in an iframe instead of showing a static wireframe.
In full-width mode, a drag handle appears on the right edge of the preview. Drag it to resize the preview width manually.
Three preset buttons appear at the bottom of the preview area:
- Mobile snaps the preview to 375px wide
- Tablet snaps it to 768px
- Full expands the preview to the full available width
These presets only show up when the item has a live preview. If you drag the resize handle, the active preset deactivates and the width follows your cursor instead.
Items without a live preview URL show the wireframe image at all times. No presets, no resize handle.
Actions #
The action bar at the bottom of the detail view has three buttons.
Copy JSON copies the block data to your clipboard. After clicking, go to the Etch canvas, right-click where you want the block, and paste. The component drops in ready to customize.
Docs opens the component’s documentation page in a new browser tab. Not every item has a docs link. When it does not, the button is hidden.
Back arrow takes you back to the library list. Your filters, search, and scroll position are preserved.
Config and usage info #
Some components include extra information in their detail view.
If the component has configurable options, a config table shows each property name and its default value. This tells you what you can change after pasting.
If the component includes a usage block, it appears as a monospaced code snippet showing how to use or trigger the component. This is common for interactive components like modals, toasts, or tooltips where a trigger element or data attribute is needed.
