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
• Input - CSS-only styles for native input elements
• Textarea - CSS-only styles for native textarea elements
• RadioGroup - A custom radio button group with animations and icons
• 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

• Avatar - A circular avatar component with fallback support
• Badge - A badge component
• Rating - A rating component
• Divider - A divider component
• ScrollArea - A custom scrollable area component
• Icon - Icon component with Iconify integration
• AspectRatio - A component for maintaining aspect ratios
• Kbd - A keyboard key display component
• Calendar - A calendar date picker component
• Comparison - A before/after image comparison component

Overlay

• Tooltip - A tooltip component
• Tour - A guided tour 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 @capsuleui/core add <ComponentName>

For example, to add the Button component:

npx @capsuleui/core 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.