v0.3.0 More Compos and Colors
Highlights
This release brings comprehensive theming capabilities, dark mode support across all components, and 5 powerful new
UI components.
Theme System
- 13 Primary Colors: blue, violet, indigo, teal, cyan, emerald, rose, amber, orange, sky, purple, fuchsia, pink
- Brand Customization: All components accept themeColor prop to match your brand
- Dark Mode: Universal darkMode prop (default: true) with automatic light/dark class generation
New Components
| Component | Description |
|---|---|
| Progress | Linear & circular progress bars with indeterminate, striped, and animated variants |
| Toggle | Switch component with labels, descriptions, and hidden form input support |
| Skeleton | Loading placeholders for text, cards, avatars, and tables |
| Avatar | User avatars with images, initials fallback, status indicators, and stacked groups |
| Toast | Non-intrusive notifications with 6 positions, auto-dismiss, and action buttons |
Enhanced Components
- Button: Added loading state, xs/xl sizes, createIconOnlyButton()
- Badge: New styles (subtle/solid/outline), removable, dot status indicators
- Card: hoverable, interactive props, card sections (header/body/footer)
- Alert: Full dark mode support with proper contrast
- Tabs: Theme color support for underline, pills, and button variants
- Spinner: Semantic variants (success/warning/error), theme color support
Documentation
- Added CLAUDE-GUIDE.md for AI-assisted development integration
Full Changelog: v0.2.1...v0.3.0