> ## 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.

# shadcn/ui components

> The component library every vly app ships with. Accessible, themeable, and owned by your project.

[shadcn/ui](https://ui.shadcn.com) is the base component library for every vly project. It's not a typical npm library — instead, the components are **copied into your project** (`components/ui/`), so you own and edit them freely.

## What's included

50+ components covering most UI needs:

| Group | Components |
| - | - |
| Forms | Button, Input, Textarea, Select, Checkbox, Radio, Switch, Label, Form |
| Layout | Card, Separator, Tabs, Accordion, Collapsible, Resizable |
| Overlay | Dialog, Sheet, Popover, Tooltip, HoverCard, ContextMenu, DropdownMenu, Command (cmdk) |
| Navigation | NavigationMenu, Menubar, Breadcrumb, Pagination |
| Feedback | Toast (Sonner), Alert, Skeleton, Progress, Spinner |
| Data | Table, DataTable (with TanStack Table), Calendar, DatePicker, Avatar, Badge |
| Other | Slider, ScrollArea, Toggle, ToggleGroup, AspectRatio |

## Where they live

```
components/
└── ui/
    ├── button.tsx       # Button with variants
    ├── card.tsx         # Card, CardHeader, CardContent, etc.
    ├── dialog.tsx       # Dialog (modal)
    ├── input.tsx
    ├── ...
```

Every component is a real file you can read, edit, or replace.

## Customizing a component

Open the file. Edit the JSX, the variants, or the styles. Changes apply immediately across every consumer.

```typescript components/ui/button.tsx theme={null}
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive ...",
        outline: "border border-input bg-background ...",
        ghost: "hover:bg-accent ...",
        // Add a new variant here
        brand: "bg-gradient-to-r from-violet-500 to-cyan-500 text-white hover:opacity-90",
      },
      // ...
    },
  },
);
```

Use the new variant: `<Button variant="brand">Click me</Button>`.

## Adding new components

Two paths:

<Tabs>
  <Tab title="By prompt">
    "Add the Combobox component from shadcn/ui." vly fetches it and adds it to `components/ui/`.
  </Tab>

  <Tab title="By CLI">
    `npx shadcn-ui@latest add combobox` from a local clone, then commit the file.
  </Tab>
</Tabs>

## Tips

<Tip>
  **shadcn components are editable, not frozen.** When updating from upstream, the CLI shows you a diff — accept what you want, keep your customizations.
</Tip>

<Tip>
  **Wrap, don't replace.** If you need a "branded" button, add a variant rather than building a new `<BrandedButton />` component. Easier to evolve.
</Tip>

## Related

<CardGroup cols={3}>
  <Card title="Components panel" icon="puzzle" href="/building/components-panel">
    Visual browser for the library.
  </Card>

  <Card title="Themes" icon="palette" href="/features/design/themes">
    Token-level theming.
  </Card>

  <Card title="Design systems" icon="layout-grid" href="/features/design/design-systems">
    The bigger picture.
  </Card>
</CardGroup>


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