> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Components panel

> Browse, search, and drag-and-drop the shadcn/ui component library. The visual interface to vly's design system.

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

<CardGroup cols={3}>
  <Card title="shadcn/ui library" icon="boxes">
    All \~50 shadcn/ui components — buttons, cards, forms, tables, dialogs, etc. — searchable and previewable.
  </Card>

  <Card title="Your custom components" icon="component">
    Components you've created in this project. Drag-and-drop reuse across pages.
  </Card>

  <Card title="Templates" icon="file-stack">
    Pre-built page templates (settings, dashboard, signup) you can drop in and customize.
  </Card>
</CardGroup>

## 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](/features/design/shadcn-components) for the full list.

## Tips

<Tip>
  **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.
</Tip>

<Tip>
  **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.
</Tip>

## Related

<CardGroup cols={3}>
  <Card title="shadcn/ui components" icon="boxes" href="/features/design/shadcn-components">
    Full reference for the library.
  </Card>

  <Card title="Design systems" icon="layout-grid" href="/features/design/design-systems">
    Theming the library.
  </Card>

  <Card title="Visual edits" icon="mouse-pointer-2" href="/building/visual-edits">
    Click-to-edit on the canvas.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.