HeadSpinUI Integration
Learn how to integrate BreakMade with HeadSpinUI for advanced design token management.
BreakMade offers seamless integration with HeadSpinUI, providing advanced design token management and CSS variable conversion capabilities.
What is HeadSpinUI?
HeadSpinUI is a companion plugin that provides advanced design token management for Breakdance. When used with BreakMade, it offers:
- Prefixed Variables: All BreakMade variables are converted to
--hsp-*format - Token Management: Advanced design token organization
- CSS Generation: HeadSpinUI handles CSS output
- Component Library: Access to HeadSpinUI components
Do You Need HeadSpinUI?
| Use BreakMade Only (Native) | Use BreakMade + HeadSpinUI |
|---|---|
| Starting a new project | Already using HeadSpinUI |
| Want simpler setup | Need advanced token management |
| Don’t need token management | Want HeadSpinUI components |
| Building standalone projects | Building enterprise projects |
Integration Overview
When HeadSpin Mode is enabled in BreakMade:
- Variables Convert:
--s8becomes--hsp-s8 - Colors Convert:
--primary-basebecomes--hsp-primary-base - Designs Match: Use HeadSpin framework designs from breakmade.com
- Data Merges: Click “Merge Data” to sync with HeadSpinUI