We're excited to announce CapsuleUI v2.0.0 - a major update featuring a complete migration to Shadcn UI styling system, new components, and significant improvements!
🚨 Breaking Changes
Package Name Change
Important: The package has been renamed from @zizigy/capsule to @capsuleui/core.
Migration:
# Old
npx @zizigy/capsule add Button
# New
npx @capsuleui/core add ButtonUpdate all your CLI commands and documentation references to use the new package name.
Removed Components
The following components have been removed:
- Chip - Removed in favor of Badge component
- HoverCard - Removed due to technical limitations
- Sidebar - Removed (may return in future release)
If you're using these components, you'll need to remove them from your project or find alternatives.
✨ What's New
🎨 Complete Shadcn UI Style Migration
All components have been refactored to match Shadcn UI's design system:
- Color System: Migrated to
oklchcolor format with Shadcn's color variables - Design Tokens: Updated to use Shadcn's radius, shadows, spacing, and typography
- Component Variants: Aligned with Shadcn's variant system (default, destructive, outline, secondary, ghost, link)
- Consistent Styling: All components now follow Shadcn's visual language
🆕 New Components
RadioGroup
A custom radio button group with smooth animations and icon support:
npx @capsuleui/core add RadioGroup<capsule-radio-group value="option1">
<label>
<capsule-radio-group-item value="option1"></capsule-radio-group-item>
<span>Option 1</span>
</label>
</capsule-radio-group>Features:
- Custom icons support
- Smooth scale animations
- Full keyboard navigation
- Form integration
Textarea
CSS-only component for styling native <textarea> elements:
npx @capsuleui/core add Textarea<textarea placeholder="Enter your message" rows="4"></textarea>Features:
- Automatic styling for native textarea
- Vertical resize by default
- Focus states and validation support
Icon
Icon component with Iconify integration - access thousands of icons:
npx @capsuleui/core add Icon<capsule-icon name="mdi:home" size="lg"></capsule-icon>Features:
- Supports all Iconify icon sets (Material Design, Heroicons, Lucide, etc.)
- Automatic caching
- Size variants (xs, sm, md, lg, xl)
- Custom size support
🔄 Updated Components
All existing components have been updated to Shadcn styling:
- Button: New variants (default, destructive, outline, secondary, ghost, link)
- Badge: Simplified to Shadcn variants (default, secondary, destructive, outline)
- Alert: Updated to match Shadcn's default and destructive variants
- Accordion: Restored grid-based animation
- Switch: Fixed thumb positioning
- Progress: Updated to use
transform: translateX()animation - Tooltip: Fixed height issues and improved styling
- Rating: Fixed star colors
- Tabs: Improved spacing and animations
- Stepper: Restored slide animations
- Range: Fixed vertical orientation range display
- Input: Now CSS-only (separated from Textarea)
- Divider: Simplified to Shadcn's minimal approach
- Skeleton: Updated to Shadcn's
animate-pulsestyle
📦 Component List (25+)
Form Elements
- Button, Input, Textarea, RadioGroup, Switch, Range
Feedback
- Alert, Skeleton
Navigation
- Breadcrumb, Pagination, Tabs, Stepper
Data Display
- Badge, Rating, Divider, ScrollArea, Icon, AspectRatio, Kbd, Calendar, Comparison
Overlay
- Tooltip, Tour
Data Entry
- Autocomplete
Layout
- Accordion, Button Group
🛠️ CLI Commands
# Initialize CapsuleUI
npx @capsuleui/core init
# Add components
npx @capsuleui/core add Button
npx @capsuleui/core add RadioGroup
npx @capsuleui/core add Icon
# List available components
npx @capsuleui/core list
# Manage modules
npx @capsuleui/core module add form
# Update VSCode settings
npx @capsuleui/core vscode🎯 Key Improvements
Design System
- ✅ Complete Shadcn UI color palette with
oklchformat - ✅ Consistent spacing, typography, and shadows
- ✅ Improved dark mode support
- ✅ Better focus states and accessibility
Developer Experience
- ✅ Updated documentation for all components
- ✅ Better examples and usage patterns
- ✅ Improved VSCode IntelliSense
- ✅ Clearer component APIs
Performance
- ✅ Optimized animations
- ✅ Better CSS organization
- ✅ Reduced bundle size (removed unused components)
🐛 Bug Fixes
- Fixed vertical Range slider range display
- Fixed Switch thumb positioning when checked
- Fixed Tooltip height issues
- Fixed Rating star colors
- Improved Tabs spacing
- Fixed Range dark theme thumb color
📚 Documentation
- Complete documentation update for all components
- New examples and use cases
- Migration guide from v1.x
- Updated API references
🚀 Quick Start
# Initialize (if upgrading, remove old @capsule folder first)
npx @capsuleui/core init
# Add a component
npx @capsuleui/core add Button
# Use it
<capsule-button variant="default">Click me!</capsule-button>⚠️ Migration Guide
If you're upgrading from v1.x:
- Update CLI commands: Replace
@zizigy/capsulewith@capsuleui/core - Remove old components: Delete Chip, HoverCard, Sidebar if you used them
- Update component variants: Check Button, Badge, and other components for new variant names
- Review styling: Components now use Shadcn's color system - check your customizations
- Re-add components: Run
npx @capsuleui/core add <Component>to get updated versions
🙏 Thank You
Thanks to everyone who provided feedback, reported bugs, and contributed to this release. Your input helped shape this major update!
🔮 What's Next?
- More components (Modal, Dropdown, DatePicker, etc.)
- Better SSR support
- More modules
- Performance optimizations
We'd love your feedback! Found a bug? Have a feature request? Open an issue!
Install: npx @capsuleui/core or use npm install @capsuleui/core
Star us on GitHub ⭐ if you find this useful!
Full Changelog: See CHANGELOG.md for detailed changes.