Components
Explore our comprehensive UI component library built with Astro and Alpine.js
Component Library Overview
Our component library provides a complete set of UI components built with Astro, Alpine.js, and Tailwind CSS. All components follow a consistent design system and support theme variants.
Component Categories
Data Components
Tables, lists, and data display components
Display Components
Badges, cards, alerts, and visual elements
Feedback Components
Toasts, modals, progress indicators
Form Components
Inputs, buttons, selects, and form controls
Layout Components
Containers, grids, sections, and dividers
Navigation Components
Menus, breadcrumbs, tabs, and navigation bars
Using Components
All components are built as Astro components and can be imported directly:
import { Button } from '@/components/ui/forms';
import { Card } from '@/components/ui/display';Theming
Components use CVA (Class Variance Authority) for consistent theming with variants:
- default - Primary brand color
- secondary - Secondary color scheme
- destructive - Error/danger states
- outline - Bordered variant