Advanced Component Playground

Customize components in real-time and export production-ready code!

Customization Controls

<d 
  onClick={() => alert('Button clicked!')}
  
  
  className="px-4 py-2"
>
  Click Me
</d>
React JSX

Live Preview

Primary Button
Component Info

Type: Primary Button

Variant: Primary Button

Interactive: Yes (Click to test)

All Button Variants

Primary Button

Click to customize

Secondary Button

Click to customize

Danger Button

Click to customize

Success Button

Click to customize

Ghost Button

Click to customize

Outline Button

Click to customize

Rainbow Button

Click to customize

Playground Stats

7
Button Types
5
Card Types
3
Input Types
0
Favorites