shadcn/ui components

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

shadcn/ui 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.

components/ui/button.tsx

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:

By prompt

“Add the Combobox component from shadcn/ui.” vly fetches it and adds it to components/ui/.

By CLI

npx shadcn-ui@latest add combobox from a local clone, then commit the file.

Tips

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

Wrap, don’t replace. If you need a “branded” button, add a variant rather than building a new <BrandedButton /> component. Easier to evolve.

Related

Components panel

Visual browser for the library.

Themes

Token-level theming.

Design systems

The bigger picture.