Interactive Playground

Experiment with design system components and see the results in real-time.

Customize

Adjust component properties

Preview

See your component in action

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

View All Components

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

Theme Builder

Create and customize your own theme

Component Generator

Generate custom components with AI

Design Token Converter

Convert design tokens between formats

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