Interactive Playground
Experiment with design system components and see the results in real-time.
Customize
Code
import { Button } from "@/components/ui/button"
import { Play } from 'lucide-react'
export function ButtonExample() {
return (
<div className="flex flex-wrap gap-4">
<Button variant="default"
size="default"
>
<Play className="mr-2 h-4 w-4" />
Button
</Button>
</div>
)
}Component Recipes
Pre-built component combinations for common UI patterns
Data Table
Name
Status
Role
Actions
Alice Smith
Active
Admin
Bob Johnson
Pending
User
Pricing Cards
Pro Plan
For professional developers
$29
per month
- Unlimited projects
- Advanced features
Advanced Features
Take your design system to the next level with these powerful tools
Download Starter Templates
Get started quickly with our pre-built design system templates. These templates include all the components and configurations you need to build your own design system.
Basic Design System
- Core components (Button, Card, Input, etc.)
- Basic design tokens
- Simple documentation structure
Advanced Design System
- All UI components
- Complete design token system
- Comprehensive documentation
Enterprise Design System
- All components + enterprise patterns
- Multi-brand theming system
- Advanced accessibility features