Skip to main content
The Components panel is a visual browser for the shadcn/ui components and your project’s custom components. Open it from the sidebar or via Cmd+Shift+C.

​
What’s in it

shadcn/ui library

All ~50 shadcn/ui components — buttons, cards, forms, tables, dialogs, etc. — searchable and previewable.

Your custom components

Components you’ve created in this project. Drag-and-drop reuse across pages.

Templates

Pre-built page templates (settings, dashboard, signup) you can drop in and customize.

​
Drag-and-drop

In Visual edit mode, drag a component from the panel onto the canvas. vly:
  1. Adds the import to the target file.
  2. Inserts the component at the drop location.
  3. Wires up any required props with sensible defaults.
You can then prompt or hand-edit to customize.

​
Searching

Type a component name or a description. Search matches:
  • Component name (Button, Card, Dialog)
  • Common synonyms (Modal finds Dialog)
  • Tags (form, input, feedback, layout)

​
Customizing a component

shadcn/ui components are owned by your project, not imported from a library. Open any component file (e.g., components/ui/button.tsx) and edit it freely. Your customization is permanent for that project. To add new variants (“primary”, “danger”, “ghost”), edit the component’s variants config. To restyle entirely, replace the JSX. vly’s auto-generated code respects whatever’s in there. See shadcn/ui components for the full list.

​
Tips

Most prompts don’t need the panel. “Add a confirmation dialog before deleting” — the agent picks Dialog automatically. Use the panel for visual exploration or when you want a specific component you can name.
Custom components are first-class. When you build a re-usable <TaskRow />, it shows up in the panel for the rest of the project. Drag-and-drop into other pages.

shadcn/ui components

Full reference for the library.

Design systems

Theming the library.

Visual edits

Click-to-edit on the canvas.
Last modified on April 18, 2026