Components

CapsuleUI provides a collection of modern, unstyled web components that you can add to your project. All components are built with Web Components standard and are fully customizable.

Available Components

Form Elements

• Button - A button component with multiple variants and sizes
• Switch - A toggle switch component
• Range - A range slider component

Feedback

• Alert - A component for displaying alert messages
• Skeleton - A loading placeholder component

Navigation

• Breadcrumb - A breadcrumb navigation component
• Pagination - A pagination component
• Tabs - A tabs component
• Stepper - A step-by-step navigation component

Data Display

• Badge - A badge component
• Chip - A chip component
• Rating - A rating component
• Divider - A divider component
• ScrollArea - A custom scrollable area component

Overlay

• Tooltip - A tooltip component
• Alert - An alert dialog component

Data Entry

• Autocomplete - An autocomplete input component

Layout

• Accordion - A collapsible accordion component
• Button Group - A group of buttons with seamless borders

Adding a Component

To add any of these components to your project, use:

npx @zizigy/capsule add <ComponentName>

For example, to add the Button component:

npx @zizigy/capsule add Button

See the Getting Started guide for more information.

Customization

All components are fully customizable. After adding a component, you'll find the source files in your @capsule/components directory. You can modify styles, behavior, and appearance to fit your needs.