# Aqua

> Aqua is a shadcn/ui component registry that recreates the classic Mac OS X (2000–2007) interface — gel buttons, pinstripes, brushed metal, the Dock, the iPod — as accessible React components built on Base UI primitives and Tailwind CSS. Components are distributed as open code under the @aqua namespace and copied into the user's project, shadcn-style. Made by Igor Duca (https://duca.dev, @ducaswtf on X).

To install components, first register the namespace in the project's components.json:

{
  "registries": {
    "@aqua": "https://aqua.duca.dev/r/{name}.json"
  }
}

Then add components with the shadcn CLI, e.g. `npx shadcn@latest add @aqua/theme @aqua/button`. Components import as `@/components/ui/<name>`. Install `@aqua/theme` first to get the palette and Lucida Grande typography. Theming: every component derives its color from the `--aqua-accent` CSS variable (set it on :root, or on any subtree for scoped themes).

For complete per-component usage with code examples, see https://aqua.duca.dev/llms-full.txt

## Getting Started

- [Introduction](https://aqua.duca.dev/docs/introduction)
- [Installation](https://aqua.duca.dev/docs/installation)
- [Theming](https://aqua.duca.dev/docs/theming)

## Components

- [Avatar](https://aqua.duca.dev/docs/avatar): The iChat buddy icon: photo, initials over a gel color, or the classic generic silhouette. Install: `npx shadcn@latest add @aqua/avatar` — registry JSON: https://aqua.duca.dev/r/avatar.json
- [Alert](https://aqua.duca.dev/docs/alert): Soft gradient notice panel in note, caution and stop flavors. Install: `npx shadcn@latest add @aqua/alert` — registry JSON: https://aqua.duca.dev/r/alert.json
- [Dropdown Menu](https://aqua.duca.dev/docs/dropdown-menu): Aqua context menu: white panel, gel highlight, checkable items and submenus. Install: `npx shadcn@latest add @aqua/dropdown-menu` — registry JSON: https://aqua.duca.dev/r/dropdown-menu.json
- [Label](https://aqua.duca.dev/docs/label): Etched form label in classic panel typography. Install: `npx shadcn@latest add @aqua/label` — registry JSON: https://aqua.duca.dev/r/label.json
- [Radio Group](https://aqua.duca.dev/docs/radio-group): Glossy round radios that fill with gel and a white pip when selected. Install: `npx shadcn@latest add @aqua/radio-group` — registry JSON: https://aqua.duca.dev/r/radio-group.json
- [Textarea](https://aqua.duca.dev/docs/textarea): Multi-line Aqua text well with an inset shadow and blue focus halo. Install: `npx shadcn@latest add @aqua/textarea` — registry JSON: https://aqua.duca.dev/r/textarea.json
- [Toast](https://aqua.duca.dev/docs/toast): Growl-style notifications: call toast() and an Alert slides in from the corner. Install: `npx shadcn@latest add @aqua/toast` — registry JSON: https://aqua.duca.dev/r/toast.json
- [Code Block](https://aqua.duca.dev/docs/code-block): Shiki-highlighted code card with an Aqua copy button. Install: `npx shadcn@latest add @aqua/code-block` — registry JSON: https://aqua.duca.dev/r/code-block.json
- [Loader](https://aqua.duca.dev/docs/loader): The twelve-spoke spinner, ticking around in steps like the original. Install: `npx shadcn@latest add @aqua/loader` — registry JSON: https://aqua.duca.dev/r/loader.json
- [Cursor](https://aqua.duca.dev/docs/cursor): Wrap your app and get the classic Aqua arrow, pointing hand and I-beam cursors. Install: `npx shadcn@latest add @aqua/cursor` — registry JSON: https://aqua.duca.dev/r/cursor.json
- [Badge](https://aqua.duca.dev/docs/badge): Tinted capsule label in blue, glossy gray and red. Install: `npx shadcn@latest add @aqua/badge` — registry JSON: https://aqua.duca.dev/r/badge.json
- [Button](https://aqua.duca.dev/docs/button): Glossy Aqua pill button with gel highlight, in blue, capsule and red. Install: `npx shadcn@latest add @aqua/button` — registry JSON: https://aqua.duca.dev/r/button.json
- [Tabs](https://aqua.duca.dev/docs/tabs): Aqua tab bar with glossy active state over a pinstripe content pane. Install: `npx shadcn@latest add @aqua/tabs` — registry JSON: https://aqua.duca.dev/r/tabs.json
- [Input](https://aqua.duca.dev/docs/input): The classic Aqua text field: white well with an inset shadow and blue focus halo. Install: `npx shadcn@latest add @aqua/input` — registry JSON: https://aqua.duca.dev/r/input.json
- [Checkbox](https://aqua.duca.dev/docs/checkbox): Glossy square that fills with blue gel when checked. Install: `npx shadcn@latest add @aqua/checkbox` — registry JSON: https://aqua.duca.dev/r/checkbox.json
- [Switch](https://aqua.duca.dev/docs/switch): Gel toggle with a polished metal thumb. Install: `npx shadcn@latest add @aqua/switch` — registry JSON: https://aqua.duca.dev/r/switch.json
- [Select](https://aqua.duca.dev/docs/select): The Aqua popup button: glossy capsule with a gel arrow box, menu with gel highlight. Install: `npx shadcn@latest add @aqua/select` — registry JSON: https://aqua.duca.dev/r/select.json
- [Slider](https://aqua.duca.dev/docs/slider): iTunes volume slider: groove track, blue gel range, polished knob. Install: `npx shadcn@latest add @aqua/slider` — registry JSON: https://aqua.duca.dev/r/slider.json
- [Dialog](https://aqua.duca.dev/docs/dialog): The Aqua alert panel: soft gradient sheet with a deep drop shadow. Install: `npx shadcn@latest add @aqua/dialog` — registry JSON: https://aqua.duca.dev/r/dialog.json
- [Progress](https://aqua.duca.dev/docs/progress): The iconic striped blue barber-pole progress bar. Install: `npx shadcn@latest add @aqua/progress` — registry JSON: https://aqua.duca.dev/r/progress.json
- [iPod](https://aqua.duca.dev/docs/ipod): The classic iPod: white shell, LCD screen and a working click wheel. Install: `npx shadcn@latest add @aqua/ipod` — registry JSON: https://aqua.duca.dev/r/ipod.json
- [Window](https://aqua.duca.dev/docs/window): Brushed metal window chrome with traffic lights and a titlebar. Install: `npx shadcn@latest add @aqua/window` — registry JSON: https://aqua.duca.dev/r/window.json
- [Dock](https://aqua.duca.dev/docs/dock): The translucent shelf: magnifying items, hover labels and running indicators. Install: `npx shadcn@latest add @aqua/dock` — registry JSON: https://aqua.duca.dev/r/dock.json
- [Chat Bubble](https://aqua.duca.dev/docs/chat-bubble): iChat gradient bubbles with sculpted tails, in blue and orange. Install: `npx shadcn@latest add @aqua/chat-bubble` — registry JSON: https://aqua.duca.dev/r/chat-bubble.json
- [Tooltip](https://aqua.duca.dev/docs/tooltip): Dock-style label tooltip: dark translucent capsule with white text. Install: `npx shadcn@latest add @aqua/tooltip` — registry JSON: https://aqua.duca.dev/r/tooltip.json

## Live Demos

- [Mail (2009)](https://aqua.duca.dev/demo/mail): an Apple Mail clone built entirely from Aqua components
- [Chat](https://aqua.duca.dev/demo/chat): an iChat-style conversation with gradient bubbles