# @quietbuildlab/ui
> Themed shadcn/ui component library. Six ready-made themes (Manuscript, Midnight, Slate, Sunset, Ocean, Mono) light + dark, 31 components on Radix UI + Tailwind v4. Pick a theme with one CSS import or switch at runtime via `data-theme`. Re-themable further via CSS variable overrides.
## Install
`npm install @quietbuildlab/ui` — requires Tailwind CSS v4 and React 18 or 19.
In the consumer app's main CSS, pick ONE setup:
```
/* A) single preset */
@import "tailwindcss";
@import "@quietbuildlab/ui/themes/midnight.css"; /* manuscript | midnight | slate | sunset | ocean | mono */
@source "../node_modules/@quietbuildlab/ui/dist";
```
```
/* B) backward-compat (Manuscript only) */
@import "tailwindcss";
@import "@quietbuildlab/ui/theme.css";
@source "../node_modules/@quietbuildlab/ui/dist";
```
```
/* C) runtime switching */
@import "tailwindcss";
@import "@quietbuildlab/ui/themes.css";
@source "../node_modules/@quietbuildlab/ui/dist";
```
For C, set `document.documentElement.dataset.theme = "ocean"` to change theme; default is Manuscript. Toggle a `.dark` class on `` for dark mode in any mode.
## Themes
| Theme | Vibe | Accent | Radius | Type |
|---|---|---|---|---|
| Manuscript | Warm paper, editorial | Forest green | 4px | Lora + Inter |
| Midnight | Cool, focused | Indigo | 6px | Inter |
| Slate | Neutral, corporate | Slate-blue | 4px | Inter |
| Sunset | Warm, friendly | Coral | 10px | Inter |
| Ocean | Calm SaaS | Teal | 6px | Inter |
| Mono | Brutalist B/W | Black/white | 0px | Inter + mono |
## Components
All exported as named imports from the package root (`import { Button } from '@quietbuildlab/ui'`).
- **Accordion** + **AccordionItem**, **AccordionTrigger**, **AccordionContent** — collapsible sections. `type="single" collapsible` or `type="multiple"`.
- **Alert** + **AlertTitle**, **AlertDescription** — inline non-blocking status banner. Variants: default | destructive.
- **AlertDialog** + **AlertDialogTrigger**, **AlertDialogContent**, **AlertDialogHeader**, **AlertDialogTitle**, **AlertDialogDescription**, **AlertDialogFooter**, **AlertDialogAction**, **AlertDialogCancel** — blocking yes/no confirmation modal. Use for destructive actions.
- **Avatar** + **AvatarImage**, **AvatarFallback** — user image with text fallback. Size via `className` (`size-6`, `size-10`, etc.).
- **Button** — variants: default, secondary, outline, ghost, destructive, link. Sizes: default, sm, lg, icon. Supports `asChild` (Radix Slot).
- **Badge** — variants: default, secondary, destructive, outline.
- **Input** — text input. Standard `` props.
- **Textarea** — multi-line input.
- **Label** — `