Interactive Playground
Experiment with design system components and see the results in real-time.
Customize
Adjust component properties
Code
Edit and experiment
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
Authentication Form
Login and registration forms with validation
Don't have an account? Sign up
Data Table
Sortable and filterable data grid
Name
Status
Role
Actions
Alice Smith
Active
Admin
Bob Johnson
Pending
User
Pricing Cards
Subscription pricing tiers
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
A simple starter template with essential components
- Core components (Button, Card, Input, etc.)
- Basic design tokens
- Simple documentation structure
Advanced Design System
A comprehensive template with all components
- All UI components
- Complete design token system
- Comprehensive documentation
Enterprise Design System
For large teams and complex applications
- All components + enterprise patterns
- Multi-brand theming system
- Advanced accessibility features