Components
60+ UI components built on shadcn/ui, styled with your design tokens.
Your component library
Every component comes from shadcn/ui, customized with the semantic design token system. When you change your brand colors or toggle dark mode, every component updates automatically. The designer agent uses these as building blocks when constructing pages.
| Component | What it does |
|---|
| Button | Primary actions, variants for secondary, ghost, destructive |
| Input | Text fields with label and error state support |
| Textarea | Multi-line text input |
| Select | Dropdown selection with search |
| Checkbox | Single and group checkboxes |
| Radio Group | Radio button groups |
| Switch | Toggle switches |
| Form | Form wrapper with Zod validation |
| Slider | Range input |
| Calendar | Date picker |
Layout components
| Component | What it does |
|---|
| Card | Content containers with header, body, footer |
| Dialog | Modal dialogs |
| Sheet | Slide-out panels from any edge |
| Drawer | Mobile-friendly bottom drawer |
| Tabs | Tabbed content switching |
| Accordion | Collapsible content sections |
| Separator | Visual dividers |
| Scroll Area | Custom scrollbar containers |
| Resizable | Drag-to-resize panels |
| Sidebar | Application sidebar with navigation |
Data display
| Component | What it does |
|---|
| Table | Data tables with sorting and pagination |
| Badge | Status indicators and labels |
| Avatar | User profile images with fallback |
| Tooltip | Hover information |
| Hover Card | Rich hover previews |
| Popover | Click-triggered floating content |
| Progress | Progress bars |
| Skeleton | Loading placeholders |
Feedback
| Component | What it does |
|---|
| Alert | Status messages (info, warning, error, success) |
| Alert Dialog | Confirmation dialogs for destructive actions |
| Sonner | Toast notifications |
| Command | Command palette with search |
| Dropdown Menu | Context menus and action menus |
| Context Menu | Right-click menus |
Visual effects
| Component | What it does |
|---|
| Animated Beam | Connecting beam animations |
| Animated Grid Pattern | Subtle background grids |
| Blur Fade | Fade-in with blur transition |
| Dot Pattern | Decorative dot backgrounds |
| Magic Card | Cards with hover spotlight effect |
| Marquee | Scrolling content strips |
| Particles | Particle background effects |
| Shimmer Button | Buttons with shimmer animation |
| Rainbow Button | Gradient animated buttons |
Using components in prompts
You do not need to specify which components to use. When you describe a feature, the designer agent picks the right components based on the UI requirements. If you say "show a confirmation dialog before deleting," it uses Alert Dialog. If you say "let users pick a date," it uses Calendar.
If you want a specific component, just mention it by name in your prompt and the agent will use it.