UI Gallery (shadcn-style)

Theme Variables
--background
--foreground
--card
--card-foreground
--primary
--primary-foreground
--secondary
--secondary-foreground
--muted
--muted-foreground
--accent
--accent-foreground
--destructive
--destructive-foreground
--border
--input
--ring

Navigation

Right-click here
Example code
<Menubar items={[...]} />
<NavigationMenu items={[...]} />
<ContextMenu items={[...]}><div>Right-click here</div></ContextMenu>

Buttons

Example code
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>

Radios

Selected: One
Example code
<RadioGroup value="One" onChange={setRadio} options={["One","Two","Three"]} />

Slider

Value42
Example code
<Slider value={42} onValueChange={setValue} />

Inputs

Example code
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Jane Doe" />

Checks & Toggles

Example code
<Checkbox />
<Switch />

Badges & Progress

NewPrimaryAlert
42%
Example code
<Badge>New</Badge>
<Progress value={42} />

Alerts & Skeleton

Example code
<Alert title="Heads up" description="..." />

Dialog, Tooltip, Popover, Menu, Sheet

Example code
<Dialog open={open} onOpenChange={setOpen} title="Example" description="Text" />

Avatars & Scroll

JD
JS
KU
Scrollable item 1
Scrollable item 2
Scrollable item 3
Scrollable item 4
Scrollable item 5
Scrollable item 6
Scrollable item 7
Scrollable item 8
Scrollable item 9
Scrollable item 10
Scrollable item 11
Scrollable item 12
Scrollable item 13
Scrollable item 14
Scrollable item 15
Scrollable item 16
Scrollable item 17
Scrollable item 18
Scrollable item 19
Scrollable item 20
Example code
<Avatar name="Jane Doe" />
<ScrollArea style={{ maxHeight: 120 }}>...</ScrollArea>

Form Example

Example code
<form>...<Button>Submit</Button></form>

Combobox & Command

Combobox
Selected: —
Type to filter and select
Example code
<Combobox options={[...]} value={value} onChange={setValue} />
<Command open={open} onOpenChange={setOpen} items={[{ label: 'New Project' }, ...]} />