Components
Aqua Fusion provides 30+ components organized into categories. Each component is built with accessibility, TypeScript, and Tailwind CSS in mind.
Display
Components for presenting information and visual feedback.
| Component | Description |
|---|---|
| Avatar | User profile images with fallback initials |
| Badge | Small status descriptors for UI elements |
| Calendar | Date picker calendar component |
| Icon | Heroicons-based icon with size variants |
| Img | Next.js Image optimization wrapper |
| ImageCarousel | Swipeable image carousel |
| Loader | Loading spinner indicator |
| Progress | Progress bar for completion status |
| Skeleton | Placeholder loading animations |
| Tooltip | Informational popup on hover/focus |
| Typography | Text rendering with semantic variants |
Form Controls
Interactive input components for forms and user actions.
| Component | Description |
|---|---|
| Button | Clickable button with variants and loading state |
| Checkbox | Accessible checkbox built on Radix UI |
| FileUpload | Drag-and-drop file upload area |
| IconButton | Icon-only button for compact actions |
| ImageUpload | Image upload with preview |
| Input | Text input with icons and validation |
| RadioGroup | Radio button group for single selection |
| Select | Dropdown for option selection |
| Switch | Toggle switch for boolean settings |
| Textarea | Multi-line text input |
Layout
Components for structuring and organizing content.
| Component | Description |
|---|---|
| Accordion | Collapsible content sections |
| Card | Container with border, shadow, and padding |
| Divider | Horizontal or vertical separator |
| Drawer | Slide-out panel from screen edge |
| Tabs | Tabbed content navigation |
Overlays
Components that appear above the main content.