shadcn/ui Components

shadcn/ui is not a traditional component library installed as an npm package. Instead, you copy individual components into your project and own the source code. This gives you full control over styling, behavior, and bundle size.

Adding components

Use the CLI to add any component. The command copies the source file into components/ui/.

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add sidebar

You can add multiple components at once:

npx shadcn@latest add button card dialog input label

Using a component

After adding, import directly from the local path.

import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

export function FeatureCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Real-time sync</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Data updates automatically across all connected clients.</p>
        <Button className="mt-4">Learn more</Button>
      </CardContent>
    </Card>
  );
}

Commonly used components

Component	Use case
`Button`	Primary actions, links styled as buttons
`Card`	Content containers with header, body, footer
`Dialog`	Modal overlays for confirmations and forms
`Sidebar`	App navigation (this project uses the sidebar-08 variant)
`Input` / `Label`	Form fields with accessible labeling
`DropdownMenu`	Context menus and action lists
`Tabs`	Switching between related views
`Table`	Data display with header, body, and row components

Customizing components

Because the source lives in your project, you can edit any file in components/ui/ directly. Common changes include:

Adjusting padding, border radius, or font size in the component's cva variants.
Adding new size or color variants to the buttonVariants definition.
Wrapping a component with additional logic (e.g., a ConfirmDialog that extends Dialog).

Sidebar variant

This project uses the sidebar-08 variant which provides a collapsible sidebar with nested navigation groups. It is configured in components/ui/sidebar.tsx and composed in the root layout.

import { SidebarProvider, Sidebar, SidebarContent } from "@/components/ui/sidebar";