Skip to content

🎉 CapsuleUI v1.0.0 - First Stable Release

Choose a tag to compare

View all tags
@ZiZIGY ZiZIGY released this 01 Dec 11:40
· 28 commits to master since this release
first-release
9b0115e

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!

Assets 2
Loading