Skip to content

Releases: ZiZIGY/CapsuleUI

🎉 CapsuleUI v1.2.4 - Shadcn Style Migration & New Components

30 Dec 18:24
@ZiZIGY ZiZIGY
1.2.4
94951f6

Choose a tag to compare

View all tags
🎉 CapsuleUI v1.2.4 - Shadcn Style Migration & New Components Latest
Latest

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 Button

Update 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 oklch color 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-pulse style

📦 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 oklch format
  • ✅ 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:

  1. Update CLI commands: Replace @zizigy/capsule with @capsuleui/core
  2. Remove old components: Delete Chip, HoverCard, Sidebar if you used them
  3. Update component variants: Check Button, Badge, and other components for new variant names
  4. Review styling: Components now use Shadcn's color system - check your customizations
  5. 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.

Assets 2
Loading

🎉 CapsuleUI v1.0.0 - First Stable Release

01 Dec 11:40
@ZiZIGY ZiZIGY
first-release
9b0115e

Choose a tag to compare

View all tags
🎉 CapsuleUI v1.0.0 - First Stable Release

We're excited to announce the first stable release of CapsuleUI - the first Web Components library in the spirit of shadcn/ui!

What is CapsuleUI?

CapsuleUI is a collection of unstyled Web Components that you copy directly into your project. No heavy dependencies, no version conflicts - just clean, customizable code that works everywhere.

Think of it as shadcn/ui, but for Web Components. One component, works in React, Vue, Angular, or plain HTML.

✨ Key Features

🚀 Copy-Paste Architecture

  • Components are copied into your project as source files
  • Full control over the code
  • No node_modules bloat
  • Customize however you want

🌐 Framework Agnostic

  • Works in React, Vue, Angular, Svelte, or plain HTML
  • Perfect for microfrontends with mixed frameworks
  • Native browser technology - no framework required

💡 VSCode IntelliSense

  • Automatic autocomplete for all component attributes
  • Documentation on hover
  • Full IDE support out of the box

🎨 Unstyled by Design

  • Minimal base styles
  • Easy to customize with CSS variables
  • Build your own design system

📦 Module System

  • Form validation module included
  • Extensible architecture
  • More modules coming soon

📦 What's Included

Components (20+)

  • Button, Alert, Accordion, Tabs, Stepper
  • Rating, Range, Tooltip, Select, Switch
  • Badge, Chip, Divider, Skeleton, Kbd
  • Progress, AspectRatio, Calendar, Breadcrumb
  • And more!

CLI Commands

# Initialize CapsuleUI in your project
npx @zizigy/capsule init

# Add components
npx @zizigy/capsule add Button
npx @zizigy/capsule add Alert

# Manage modules
npx @zizigy/capsule module add form

# Generate VSCode data for custom components
npx @zizigy/capsule generate --dir ./my-components

# List available components
npx @zizigy/capsule list

🎯 Perfect For

  • Microfrontends - One component, multiple frameworks
  • Design Systems - Build your own component library
  • Legacy Projects - Add modern components without refactoring
  • Full Control - Want to customize everything? Go ahead!

🚀 Quick Start

# Initialize
npx @zizigy/capsule init

# Add a component
npx @zizigy/capsule add Button

# Use it anywhere
<capsule-button variant="primary" size="lg">
  Click me!
</capsule-button>

🙏 Thank You

This project started as a solution to a real problem at work, and it's been an amazing journey. Thanks to everyone who tried it, reported bugs, and gave feedback.

🔮 What's Next?

  • More components (Modal, Dropdown, DatePicker, etc.)
  • Better SSR support
  • More modules

We'd love your feedback and contributions! Found a bug? Have a feature request? Open an issue!

Install: npm install -g @zizigy/capsule or use npx @zizigy/capsule

Star us on GitHub ⭐ if you find this useful!

Loading