Preview
A live gallery of Duckit components rendered with your theme tokens. Toggle light and dark mode from the panel header — it never affects your editor values.
Button
All variants and sizes
Input
Form text fields
Badge
Status indicators
Alert
Inline messages
Heads up
Error
Tabs
Switch between views
Card
Grouped content surface
Project overview
Usage across all registered components.
Form
Label, input and submit
Surface
Semantic surface tokens
Background
--background
Card
--card
Popover
--popover
Muted
--muted
Secondary
--secondary
Accent
--accent
Typography
Text tokens in use
Typography
Regular text uses the foreground token.
Secondary information uses muted-foreground.
Inline linkSmall caption with inline emphasis.
Separator
Horizontal and vertical dividers
Content separated by a divider.
Breadcrumb
Navigation hierarchy
Toolbar
Compact action clusters
Popover
Floating contextual content
Dialog
Modal with focus trap
Menu
Dropdown action menu
Progress
Task completion indicator
Avatar
User representation
Alex Lee
Product designer
Checkbox
Single option selection
Radio
Exclusive option selection
Switch
Binary on/off control
Slider
Range value selection
Select
Picker with scrollable list
Chart
Chart series tokens