Components

Callaloo provides a comprehensive library of accessible, themeable Vue 3 components designed to serve as the building blocks for modern user interfaces.

Available Components

Buttons & Actions

• CLButton – Standard interactive button with colors, variants, and badges
• CLA11yButton – Accessible button primitive with enhanced ARIA attributes

Feedback, Status & Overlays

• CLBadge – Compact numerical or status indicator
• CLBanner – High-visibility message banners
• CLDropdownMenu – Floating dropdown menu with trigger support
• CLPill – Compact tag or status badge
• CLProgress – Linear and circular progress indicators
• CLSkeleton – Content placeholder loader
• CLSpinner – Circular loading indicator
• CLToast – Transient notification toasts

Form Inputs

• CLCalendar – Date calendar grid
• CLCheckbox – Accessible checkbox with boolean or array models
• CLInput – Text input with prefix, suffix, and character count
• CLInputDatePicker – Input integrated with date picker popup
• CLInputTimePicker – Input integrated with time picker popup
• CLModalDatePicker – Full-featured modal date selection
• CLModalTimePicker – Full-featured modal time selection
• CLRadioButton – Radio group and individual buttons
• CLSelect – Select input with customizable options
• CLTextArea – Multi-line text field with autogrow
• CLTimePicker – Time selection picker

Icons

• CLIcon – Predefined icon component with full icon set support

Layout & Containers

• CLCard – Structured content container with header, body, and footer
• CLCarousel – Touch-enabled carousel and slideshow
• CLDisclosure – Collapsible accordion/disclosure container
• CLDrawer – Slide-out drawer panel
• CLModal – Accessible modal dialog with focus management
• CLTable – Tabular data display with sorting and nesting

Navigation & Links

• CLLink – Accessible anchor link with external handling
• CLNavLink – Navigation item for menu links
• CLNavSection – Vertical navigation list container

Typography & Content

• CLHeading – Accessible heading element with predefined typography scales
• CLMaskedText – Obfuscate sensitive or PII content with screen reader accessibility
• CLText – Text element with color, size, weight, and truncation options