AFAqua Fusion

Documentation

Aqua Fusion is a comprehensive React component library with built-in design tokens, Tailwind CSS integration, and accessible Radix UI primitives.

What you get

  • 30+ atomic components — Button, Input, Card, Badge, Dialog, Toast, and more
  • 13 composite patterns — FormField, DataTable, ActionMenu, EmptyState, PageHeader
  • Design tokens — Colors, typography, spacing, shadows, animations as Tailwind classes
  • Tailwind CSS preset — Drop-in preset with all tokens as CSS custom properties
  • Accessible — Built on Radix UI primitives (Checkbox, Popover, DropdownMenu)
  • Tree-shakeable — ESM + CJS with code splitting
  • TypeScript — Full type definitions included

Quick links

SectionDescription
Getting StartedSet up Aqua Fusion in your project in minutes
InstallationDetailed installation guide with peer dependencies
UsageImport patterns, component composition, and best practices
ThemingCustomize colors, typography, and design tokens
ComponentsBrowse all 30+ components with examples

Import paths

PathContents
@wavebooking/aqua-fusionAll components, patterns, foundations, tokens, hooks
@wavebooking/aqua-fusion/componentsAtomic components only
@wavebooking/aqua-fusion/patternsComposite patterns (FormField, DataTable, etc.)
@wavebooking/aqua-fusion/tokensDesign tokens as Tailwind classes
@wavebooking/aqua-fusion/foundationsCore design primitives (palette, spacing, etc.)
@wavebooking/aqua-fusion/hooksUI hooks (useMediaQuery, useDisclosure, useDebounce)
@wavebooking/aqua-fusion/presetTailwind CSS preset
@wavebooking/aqua-fusion/styles/theme.cssCSS custom properties for theming