Aqua Fusion
A design system and React component library for building modern web applications with Tailwind CSS.
npm install @wavebooking/aqua-fusionEverything you need to build
Production-ready components with design tokens, accessibility, and full TypeScript support.
30+ Components
Buttons, inputs, cards, dialogs, tables, and more. Built on accessible Radix UI primitives.
Design Tokens
Colors, typography, spacing, shadows, and animations as semantic CSS custom properties.
Tailwind CSS Preset
Drop-in preset that maps all design tokens to Tailwind utility classes. Zero configuration needed.
TypeScript First
Full type definitions with IntelliSense support. Every prop documented and typed.
Dark Mode
Built-in dark mode with semantic color tokens. Toggle with a single CSS class.
Tree-Shakeable
ESM + CJS output with code splitting. Import only what you use for minimal bundle size.
Component Library
From atomic components to composite patterns, everything you need for a complete UI.
Get started in 3 steps
Install the package, configure Tailwind, import the theme, and start building.
Add the Tailwind preset
Include aquaFusionPreset in your tailwind.config.js
Import theme CSS
Add @wavebooking/aqua-fusion/styles/theme.css to your app entry
Use components
Import from @wavebooking/aqua-fusion and start building
import { Button, Card, Typography } from '@wavebooking/aqua-fusion';
export function MyComponent() {
return (
<Card className="p-6">
<Typography variant="h2">
Hello, Aqua Fusion
</Typography>
<Button variant="default" className="mt-4">
Get Started
</Button>
</Card>
);
}Ready to build?
Start using Aqua Fusion in your project today. Check out the docs, browse Storybook, or install from npm.