HeadSpinUI Integration
Seamlessly integrate BreakMade with HeadSpinUI for advanced design token management.
BreakMade offers deep integration with HeadSpinUI, allowing you to combine BreakMade’s design system with HeadSpinUI’s powerful token management.
What is HeadSpinUI?
HeadSpinUI is a design system and component library for Breakdance. Combined with BreakMade, you get:
- Design Tokens: Advanced token management
- Component Library: Pre-built components
- CSS Generation: HeadSpinUI handles CSS output
- Unified Variables:
--hsp-*prefixed naming
When to Use HeadSpin Mode
| Use BreakMade Only | Use BreakMade + HeadSpinUI |
|---|---|
| New projects | Already using HeadSpinUI |
| Simpler setup | Need token management |
| Standalone sites | Want HeadSpinUI components |
Quick Comparison
| Feature | BreakMade Only | With HeadSpinUI |
|---|---|---|
| Variable Naming | --s*, --primary-* | --hsp-s*, --hsp-primary-* |
| CSS Output | BreakMade file | HeadSpinUI compiled |
| Token Management | Basic | Advanced groups |
| Components | BreakMade Button | Full HeadSpinUI library |
Getting Started
For step-by-step setup instructions, see the HeadSpinUI Setup Guide.
For variable conversion details, see Variable Conversion.