$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;
  }
}