Skip to content
>_devvkit
$devvkit learn --librarie shadcn/ui-guide

shadcn/ui Guide

[react][ui][components]
JavaScript / TypeScript
Install
npx shadcn@latest init
npx shadcn@latest add button card dialog

Not a traditional component library — there is no npm package. CLI copies source into your project.

Built on Radix UI primitives with Tailwind CSS. Accessibility built-in.

Full ownership: modify any component and never worry about version compatibility.

Setup

Init— Setup Tailwind and CSS variables.
npx shadcn@latest init

Core Components

Add button— Install button component.
npx shadcn@latest add button
Button variants— Different styles.
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
Card— Contained content.
<Card><CardHeader><CardTitle>Title</CardTitle></CardHeader><CardContent>Content</CardContent><CardFooter><Button>Action</Button></CardFooter></Card>

Data Display

Table— Tabular data.
<Table><TableHeader><TableRow><TableHead>Name</TableHead><TableHead>Email</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Alice</TableCell><TableCell>alice@example.com</TableCell></TableRow></TableBody></Table>
Badge— Status label.
<Badge>New</Badge>
<Badge variant="secondary">Draft</Badge>
<Badge variant="destructive">Deleted</Badge>

Overlay Components

Dialog— Modal with focus trapping.
<Dialog><DialogTrigger asChild><Button>Open</Button></DialogTrigger><DialogContent><DialogHeader><DialogTitle>Confirm</DialogTitle></DialogHeader></DialogContent></Dialog>
Dropdown— Menu with actions.
<DropdownMenu><DropdownMenuTrigger>Open</DropdownMenuTrigger><DropdownMenuContent><DropdownMenuItem>Profile</DropdownMenuItem><DropdownMenuSeparator /><DropdownMenuItem>Logout</DropdownMenuItem></DropdownMenuContent></DropdownMenu>

Customization

Theme— Override CSS variables.
@layer base {
  :root {
    --primary: 0 85% 56%;
    --radius: 0.5rem;
  }
}