Components
Browse all 30 core components and 6 marketing components. All components are production-ready and WCAG 2.1 AA compliant.
Quick Preview
View Code
Core Components (30)
Primitives
Button
Interactive buttons with loading states and variants
Badge
Status indicators and labels
Avatar
User profile images with fallback support
Icon
SVG icons with customizable styling
Separator
Visual separators with horizontal and vertical variants
Forms
Input
Text input fields with validation and form integration
Textarea
Multi-line text input with validation and resize
Select
Dropdown selects with search and multi-select
Checkbox
Form checkboxes with accessibility and validation
RadioGroup
Radio button groups with keyboard navigation
Switch
Toggle switches with accessibility and variants
Label
Form labels with accessibility features
HelperText
Helper text for form fields
ErrorMessage
Error messages for validation
Navigation
Tabs
Tab navigation with keyboard accessibility
Breadcrumb
Navigation breadcrumbs with accessibility
Pagination
Page navigation with keyboard accessibility
Feedback
Alert
Notification alerts with variants and dismiss functionality
Toast
Notification system with auto-dismiss and positioning
Tooltip
Contextual information with positioning and triggers
Progress
Progress indicators with variants and accessibility
Skeleton
Loading states with animations and specialized components
Data Display
Card
Container components for content
Table
Data tables with sortable columns, pagination and responsive design
DataTable
Advanced tables with search, filtering, sorting, and pagination
Accordion
Collapsible sections with keyboard navigation
Advanced
Calendar
Date picker with single, range, and multiple selection modes
Charts
Data visualization with line, bar, area, and pie charts
Dialog
Modal dialogs with accessibility and focus management
ErrorBoundary
Error boundary component for React error handling
Marketing Components (6)
Hero
Hero sections with customizable layouts and call-to-action buttons
Features
Feature showcase grids with icons and hover effects
Testimonials
Customer testimonials with ratings, avatars and responsive grids
Pricing
Pricing tables with yearly/monthly toggle and popular plan highlighting
Gallery
Image galleries with lightbox functionality and responsive grids
Logo Wall
Client logos with hover effects and responsive layouts
Component Status
All components are marked as Stable, meaning they are:
- ✅ Production-ready
- ✅ Fully tested (842 tests passing)
- ✅ WCAG 2.1 AA compliant
- ✅ TypeScript typed
- ✅ Documented with examples
Quick Links
- API Reference - Complete component API documentation
- Theming Guide - Customize themes and design tokens
- Storybook (opens in a new tab) - Interactive component playground