aquakit

A reusable React component library.

Quick Start

Install

npm install aquakit

Tailwind CSS (required)

AquaKit is built with Tailwind CSS v4 utility classes. Your app must install and enable Tailwind so those classes resolve and you can safely use Tailwind on your own markup and className props.

Vite (recommended)

npm install tailwindcss @tailwindcss/vite

Register the plugin in vite.config.ts:

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

In your global stylesheet (for example src/index.css), include:

@import "tailwindcss";

PostCSS instead of the Vite plugin

npm install tailwindcss @tailwindcss/postcss postcss

// postcss.config.js
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Point your app entry at a CSS file that contains @import "tailwindcss";.

For full setup options, see the Tailwind CSS v4 installation guide.

Use components

Import components from aquakit. With typical bundlers (Vite, webpack, Rspack, and similar), styles are pulled in automatically when your app resolves the package entry—you do not need a separate CSS import in main.tsx / main.jsx.

import {
  Button,
  Card,
  Input,
  Checkbox,
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  Label
} from "aquakit";

export default function App() {
  return (
    <Card>
      <h2>My App</h2>
      <Button variant="primary">Click me</Button>
      <Label htmlFor="email">Email</Label>
      <Input placeholder="Your email" />
      <Checkbox label="Accept terms" />
      <Combobox>
        <ComboboxInput placeholder="Select a framework..." />
        <ComboboxContent>
          <ComboboxList>
            <ComboboxItem value="react">React</ComboboxItem>
            <ComboboxItem value="vue">Vue</ComboboxItem>
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
      <ContextMenu>
        <ContextMenuTrigger>Right click me</ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem>Rename</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
    </Card>
  );
}

Optional: import CSS explicitly

Only add this if your toolchain does not apply CSS side effects from dependencies (uncommon):

import "aquakit/style.css";

Available Components

• Button
• Card
• Input
• Checkbox
• Combobox
• ContextMenu
• Label

Local Development

npm install
npm run dev

Build

npm run build

Build output is created in dist/.

Publish To npm

1. Login to npm:

npm login

2. Update package version:

npm version patch

3. Publish:

npm publish --access public

prepublishOnly runs the build automatically before publishing.

Peer Dependencies

This package expects your app to provide:

• react (^18 || ^19)
• react-dom (^18 || ^19)
• tailwindcss (^4) — required; AquaKit relies on Tailwind utility classes (see Tailwind CSS (required) above)