# GreedUI

Agent-first design system: Base UI primitives + Tailwind v4 tokens + Motion. Copy-in source, zero runtime network calls.
Install any item: npx shadcn@latest add https://greedui.com/r/<name>.json  (or copy the file; imports are @/components/ui/*, @/lib/*).
Tokens: bg-canvas|surface|sunken|tint, text-ink|ink-2|ink-3, border-line|line-strong, brand|brand-ink, positive|warning|danger|info.
Props: size=sm|md|lg, tone=neutral|brand|danger (where relevant). Compose with `render`, never `asChild`. className can be a Base UI state function.
Motion: changing text/numbers go through <Tumbler>, size changes through <Morph>, groups of hoverable items share one gliding highlight (HoverTrail / useHoverTrail, HighlightTrail in popups).
Effects: add fx-halftone next to anim-pop|anim-rise|anim-fade for the dotted popup dissolve. Feature switches: <html data-ui-motion|effects|squircle|pixel="off">, or setFeature/useFeature from @/lib/features.
Full API (every export + Props type, one fetch): /llms-full.txt

## Design language (keep new UI consistent with it)
Interfaces that answer back: actions preview their consequence (hint, inline line, rolling label) and confirm what happened. Fewer containers: hairlines and whitespace, never card-in-card; only floating things get a surface + shadow-pop.
Motion is buttery and instant-feeling: ease-smooth, no wobble, nothing pops in. Changing text = <Tumbler>, size changes = <Morph>, hover groups = HoverTrail. Reserve space so rolling text never shifts layout.
Warm tokens only, brand color for the one primary action and small signals, dots/halftone/pixel accents in small doses. 24px+ hit areas, keyboard, AA contrast, Reduce Motion respected by default.

## Versions (current release: 1.0.10)
Each item below shows (vX.Y.Z), the release it last changed in. Installed files carry the same number in their header as `@version`.
To check a project: compare each installed file's @version with this list. If ours is newer, it changed: check the item's docs page, then re-run the install command (the CLI asks before overwriting, so keep any local edits).

## Before you install, ask the user (then respect the answers)
1. Theme: a hue or preset (ember, iris, moss, tide, mono, sakura), or the default? The Studio at /themes exports one CSS file.
2. Motion: keep it (default)? If no, leave out theme/greedui/motion.css and set <html data-ui-motion="off">.
3. Reduce Motion: respect the OS setting (default, recommended)? Only if they explicitly want full motion for everyone, set <html data-ui-reduced-motion="ignore">.
4. Effects (pixel wipe, halftone dissolve), squircle corners, pixel details, texture: keep each (default) or drop it. Dropping one = delete its @import line in greedui.css (effects, shape, pixel, texture) and set data-ui-<feature>="off" for motion/effects. Don't add fallbacks for parts they dropped.
5. Icons: the pixel set (default) or a pack (hugeicons, phosphor, tabler, remix, iconoir, pixelart)? Install icons-<pack> over components/ui/icons.tsx.
If the user says "just pick", use the defaults: everything on, Reduce Motion respected, pixel icons.

## Components
- accordion (v1.0.0): Hairline-divided disclosure rows, no box. <Accordion items={[{value,title,content,hint?,disabled?}]} multiple numbered /> or compound AccordionRoot/Item/Trigger/Panel.
  e.g. <Accordion numbered defaultValue={["a"]} items={[{ value: "a", title: "Is it private?", content: "No requests, ever." }]} />
- activity (v1.0.0): "What just happened" feed: timeline rows with pixel time, actor, action, target, tone node, undo affordance (onUndo, undone). New rows slide in via CSS. <Activity items> one-liner or ActivityList + ActivityItem parts.
  e.g. <Activity items={[{ id: "1", time: new Date(), actor: "Mara", action: "deleted", target: "api-key-prod", tone: "danger", onUndo: restore }]} />
- alert-dialog (v1.0.0): Confirm-before-consequence dialog. <AlertDialog trigger title description confirm="Delete 3 files" cancel tone=danger|brand|neutral onConfirm(async ok)> or parts AlertDialogRoot/Trigger/Portal/Backdrop/Viewport/Popup/Title/Description/Close/Footer.
  e.g. <AlertDialog trigger={<Button tone="danger">Delete</Button>} title="Delete 3 files?" description="They skip the trash." confirm="Delete 3 files" onConfirm={remove} />
- animated-number (v1.0.1): Number whose digits roll like an odometer (only changed digits move: up when it grows, down when it shrinks, staggered). value, from (mount start), format=Intl.NumberFormatOptions, locales, stagger (ms), pixel font, spring (counts through every value instead, duration in s). Tabular nums.
  e.g. <AnimatedNumber value={48210} from={0} format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} />  ·  <AnimatedNumber value={n} spring />
- autocomplete (v1.0.0): Free-text input with suggestions (search, tags, commands). <Autocomplete items={["fix", { value: "feat", description }]} placeholder icon emptyText loading status size=sm|md|lg invalid>. Compound Autocomplete* parts.
  e.g. <Autocomplete aria-label="Search" icon={<SearchIcon />} placeholder="Search tags" items={["feature", "fix", "docs"]} />
- avatar (v1.0.0): Profile image with pixel-font initials fallback (tone hashed from name). size=sm|md|lg, shape=round|pixel. AvatarGroup stacks, spreads on hover, max → "+N".
  e.g. <Avatar src="/me.png" name="Ada Lovelace" />  ·  <AvatarGroup max={3} shape="pixel"><Avatar name="Ada" />…</AvatarGroup>
- badge (v1.0.0): Static status label with stepped pixel corners. tone=neutral|brand|positive|warning|danger|info, variant=soft|solid|dot, size=sm|md, pulse (live dot), pixel (Geist Pixel caps).
  e.g. <Badge tone="positive">Live</Badge>  ·  <Badge variant="dot" tone="warning" pulse>Deploying</Badge>
- button (v1.0.0): Pressable action. variant=solid|soft|ghost|outline, tone=neutral|brand|danger, size=sm|md|lg, square for icon-only, loading (crossfades to a spinner), morph (label rolls + width glides when children change).
  e.g. <Button tone="brand">Deploy</Button>  ·  <Button morph loading={saving}>{saved ? "Saved" : "Save"}</Button>
- chart-bar-list (v1.0.0): Ranked list that reads like a sentence: label, a dotted leader that fills to the value, share %, value. Hover trail across rows, numbers tumble on change. data=[{label,value,href?,hint?,tone?}], total, format, limit, sort, rank, tone, size=sm|md.
  e.g. <ChartBarList data={[{ label: "api", value: 1_200_000 }, { label: "web", value: 540_000 }]} format={{ notation: "compact" }} />
- chart-core (v1.0.6): Shared plumbing for chart-*: useChartSize (ResizeObserver), useFormat, useCursor + ChartReadout (hover index that re-renders only the readout), ChartTable (sr-only data), DitherFill (Bayer dot dither), chartTones.
  e.g. const [ref, { w, h }] = useChartSize<HTMLDivElement>()  ·  <ChartTable caption="Requests" rows={[["Mon", "1.2K"]]} />
- chart-delta (v1.0.0): Before/after slope chart: one line per item, labels on both ends nudged apart by their real height so they never collide (long ones wrap to 2 lines, then clamp with a Tooltip), pixel % badge on the right, hover spotlights a line. data=[{label,before,after}], labels=[before,after], format, invert (down is good), tone.
  e.g. <ChartDelta labels={["v1", "v2"]} data={[{ label: "Checkout", before: 2.4, after: 1.1 }]} invert format={{ style: "unit", unit: "second" }} />
- chart-dither-area (v1.0.0): Area chart filled with an ordered dot dither that thins toward the baseline, crisp line on top, gliding crosshair + Tumbler readout, arrow keys. data, labels, compare (dashed), label, format, tone, curve, min, max.
  e.g. <ChartDitherArea label="Requests" data={[12, 18, 15, 22, 30]} labels={days} compare={lastWeek} className="h-56" />
- chart-dots (v1.0.9): Countable dot-matrix bars: rounded-square cells fill in, a dithered cell shows the remainder, over-budget cells turn danger. data=[{label,value,max?,tone?}], unit (value per cell, auto), max, maxCells, orientation=horizontal|vertical, size=sm|md|lg, tone, format, unitLabel. Hover trail across rows.
  e.g. <ChartDots data={[{ label: "Design", value: 7, max: 10 }, { label: "Eng", value: 12, max: 10 }]} unitLabel="seat" />
- chart-heat (v1.0.9): Calendar heat grid: one rounded cell per day, 5 tonal steps of the brand hue, gliding outline + Tumbler readout, arrow keys. Shows the latest weeks that fit. data (daily values), end (date of the last value), unit, format, thresholds, tone, minCell.
  e.g. <ChartHeat data={dailyDeploys} unit="deploys" className="max-w-2xl" />
- chart-pulse (v1.0.0): Live heartbeat strip: one small tick per event or interval, new ticks slide in from the right and old ones fade out on the left. Append to data, don't mutate. data=(number|{value,tone?,label?})[], label, unit, format, tone, size=sm|md|lg, align=center|bottom, max, live.
  e.g. <ChartPulse label="Requests" unit="req/s" data={window} />  ·  data={[...prev.slice(-59), { value: 1, tone: "brand", label: "deploy" }]}
- chart-ring-dots (v1.0.0): Radial progress drawn like a watch dial: minute dots with baton markers, a hand tip that sweeps to the value, Tumbler number in the middle. value, max, dots (60), label, format, tone, size=sm|md|lg, numerals, children (custom center).
  e.g. <ChartRingDots value={72} label="Uptime" format={{ style: "unit", unit: "percent" }} numerals />
- chart-waffle (v1.0.0): 10x10 waffle for parts of a whole: one cell = 1%, cells roll in row by row, hovering a legend row or cell spotlights that part with a Tumbler readout. data=[{label,value,color?}], total (leftover cells stay empty), parts told apart by early-Mac fill patterns in one tone, format, size=sm|md|lg, legend, tone.
  e.g. <ChartWaffle data={[{ label: "Chrome", value: 5400 }, { label: "Safari", value: 2800 }, { label: "Firefox", value: 900 }]} />
- checkbox-group (v1.0.0): Shared-state checkbox list (Base UI CheckboxGroup). <CheckboxGroup label options={[{value,label,description}]} selectAll="All" defaultValue value onValueChange size tone>; select-all goes indeterminate, children hang off a hairline. Part: CheckboxGroupRoot.
  e.g. <CheckboxGroup label="Notify me about" selectAll="Everything" options={[{ value: "mentions", label: "Mentions" }, { value: "replies", label: "Replies" }]} />
- checkbox (v1.0.9): Checkbox (Base UI Checkbox): empty boxes sit inset, checked ones fill in raised while the pixel check draws in with a tiny overshoot; unchecking eases it all back. size=sm|md|lg, tone=brand|neutral|positive|danger, indeterminate, label + description for the common row. Parts: CheckboxRoot, CheckboxIndicator.
  e.g. <Checkbox label="Email me about replies" description="At most once a day." defaultChecked />
- collapsible (v1.0.0): Single show/hide region with an interruptible height transition. <Collapsible trigger="Advanced">…</Collapsible> or compound CollapsibleRoot/Trigger/Panel.
  e.g. <Collapsible trigger="Show 3 hidden files" defaultOpen>…</Collapsible>
- combobox (v1.0.9): Filterable select (values are option ids). <Combobox items={[{value,label,description?,icon?}]} placeholder multiple(chips) emptyText loading status size=sm|md|lg invalid icon>. Async: filter={null} + onInputValueChange. Compound Combobox* parts.
  e.g. <Combobox multiple placeholder="Add reviewers" items={[{ value: "ada", label: "Ada Lovelace", description: "Owns billing" }]} />
- command (v1.0.0): ⌘K palette (Dialog + Autocomplete): grouped items {id,label,hint,icon,kbd,keywords,tone,onSelect}, highlighted item previews its consequence in the footer, recent items, empty state, shortcut. useCommandShortcut(key) → [open, setOpen]. Parts: CommandRoot, CommandPopup, CommandSearch, CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty, CommandFooter, CommandKbd.
  e.g. <CommandDialog groups={[{ label: "Actions", items: [{ id: "deploy", label: "Deploy", hint: "Ships main to production", onSelect: deploy }] }]} />
- context-menu (v1.0.0): Right-click / long-press menu at the pointer. <ContextMenu menu={items}>area</ContextMenu>; items are the menu vocabulary (ContextMenuItem icon|description|shortcut|tone, checkbox, radio, ContextMenuSub).
  e.g. <ContextMenu menu={<><ContextMenuItem shortcut="⌘C">Copy</ContextMenuItem><ContextMenuItem tone="danger">Delete</ContextMenuItem></>}><div>Right-click me</div></ContextMenu>
- dialog (v1.0.0): Modal dialog. <Dialog trigger title description footer size=sm|md|lg closeButton swapKey> or parts DialogRoot/Trigger/Portal/Backdrop/Viewport/Popup/Title/Description/Close/CloseButton/Body/Footer. Nested dialogs recede.
  e.g. <Dialog trigger={<Button>Rename</Button>} title="Rename project" footer={<DialogClose render={<Button tone="brand" />}>Save</DialogClose>}>…</Dialog>
- drawer (v1.0.0): Swipe-to-dismiss panel. <Drawer side=bottom|right|left|top trigger title description footer grip closeButton snapPoints swapKey> or parts DrawerRoot(side)/Trigger/Portal/Backdrop/Viewport/Popup/Grip/Content/Title/Description/Close/CloseButton/Footer/Provider/Indent.
  e.g. <Drawer trigger={<Button>Filters</Button>} title="Filters" footer={<DrawerClose render={<Button tone="brand" />}>Show 24 results</DrawerClose>}>…</Drawer>
- empty (v1.0.0): Empty state, no card: pixel icon in a stepped-corner tile on a dot halo, label, title, description, actions. align=center|start. Compound EmptyRoot/Icon/Title/Description/Actions.
  e.g. <Empty icon={<FolderIcon />} label="0 projects" title="Nothing here yet" description="Projects you create show up here." actions={<Button>New project</Button>} />
- field (v1.0.0): Label + control + description + inline error (Base UI Field). <Field label description error optional name validate validationMode>; error replaces the description in place with a short fade. Parts: FieldRoot, FieldLabel, FieldControl, FieldDescription, FieldError, FieldItem, FieldValidity.
  e.g. <Field label="Email" description="We only use it for receipts." name="email"><Input type="email" required /></Field>
- fieldset (v1.0.0): Groups related fields under one legend (Base UI Fieldset). <Fieldset legend description disabled>; hairline under the heading, whitespace between fields. Parts: FieldsetRoot, FieldsetLegend.
  e.g. <Fieldset legend="Billing" description="Shown on invoices."><Field label="Company">…</Field></Fieldset>
- flow-sheet (v1.0.5): Apple Pay style multi-step sheet: one surface that glides its width and height per step (Morph axis="both"), content slides the way you're going. steps=[{id,label,width,render(flow),run,back}] (run = auto step, moves on when it resolves, goes back with flow.error if it throws), step/defaultStep/onStepChange, drawer (bottom sheet via Drawer) + trigger/open/onOpenChange. Esc goes back. Parts: FlowSheetHeader, FlowSheetRow, FlowSheetFooter, FlowSheetProcessing, FlowSheetDone, useFlowSheet.
  e.g. <FlowSheet steps={[{ id: "pay", render: (f) => <Button onClick={f.next}>Pay</Button> }, { id: "wait", run: pay, render: () => <FlowSheetProcessing /> }, { id: "done", render: () => <FlowSheetDone title="Paid" /> }]} />
- form (v1.0.0): Native form with consolidated validation (Base UI Form): errors={{name: msg}} from the server, validationMode=onSubmit|onBlur|onChange, onFormSubmit(values). FormActions = hairline-topped button row.
  e.g. <Form onFormSubmit={save} errors={errors}><Field label="Email" name="email"><Input required /></Field><FormActions><Button type="submit">Save</Button></FormActions></Form>
- hand-underline (v1.0.1): Wraps a few words and draws a hand-drawn mark on hover/focus, or while active (controlled). shape=underline|double|circle|strike, tone=brand|neutral|positive|danger, delay (ms). One SVG stroke per mark, CSS transition only. handDraw = the shared draw classes.
  e.g. <HandUnderline>hover me</HandUnderline>  ·  <HandUnderline shape="circle" active={saved}>saved</HandUnderline>
- highlight-trail (v1.0.0): One highlight that glides to whichever child matches `selector` (default [data-highlighted], so it follows Base UI keyboard, pointer and virtual focus). Drop it inside the list or scroll container. selector can be a priority list. as="span"|"li". Add trailItemClass to items so their own hover bg steps aside.
  e.g. <Menu.Popup><HighlightTrail selector={["[data-highlighted]", "[data-popup-open]"]} />…items</Menu.Popup>
- hint (v1.0.1): Consequence preview on hover/focus: "→ what will happen". content (string content rolls when it changes), detail (pixel meta), kbd, tone=neutral|brand|danger, side, align, delay, closeOnClick, disabled. Fades out quickly on leave. Wrap groups in <HintGroup> for instant hand-off. Parts: HintRoot, HintTrigger, HintPopup.
  e.g. <Hint content="Deploys main to production" detail="3 services" kbd="⌘D"><Button>Deploy</Button></Hint>
- hover-trail (v1.0.0): One highlight that glides between items as the pointer or keyboard focus moves, and returns to the active item (or fades) when you leave. Items opt in with data-trail. useHoverTrail + trailClass when the root is a Base UI part; moveTrail is the shared glide.
  e.g. <HoverTrail className="flex gap-1" active="[aria-current=page]">{links.map((l) => <a data-trail key={l.href} …/>)}</HoverTrail>
- icons-hugeicons (v1.0.0): Hugeicons free stroke set (MIT, @hugeicons/core-free-icons) behind every GreedUI icon name. Installs as components/ui/icons.tsx, replacing the pixel set.
  e.g. npx shadcn@latest add <origin>/r/icons-hugeicons.json  ·  every <CheckIcon />, <ChevronDownIcon size={12} /> keeps working
- icons-iconoir (v1.0.0): Iconoir regular set (MIT, iconoir-react) behind every GreedUI icon name. Installs as components/ui/icons.tsx, replacing the pixel set.
  e.g. npx shadcn@latest add <origin>/r/icons-iconoir.json  ·  every <CheckIcon />, <ChevronDownIcon size={12} /> keeps working
- icons-phosphor (v1.0.0): Phosphor Icons regular weight (MIT, @phosphor-icons/react) behind every GreedUI icon name. Installs as components/ui/icons.tsx, replacing the pixel set. Pass weight via IconContext.
  e.g. npx shadcn@latest add <origin>/r/icons-phosphor.json  ·  every <CheckIcon />, <ChevronDownIcon size={12} /> keeps working
- icons-pixelart (v1.0.0): Pixelarticons free set (MIT, pixelarticons) on a 24×24 pixel grid behind every GreedUI icon name. Installs as components/ui/icons.tsx, replacing our pixel set. Sharpest at 24/48px.
  e.g. npx shadcn@latest add <origin>/r/icons-pixelart.json  ·  every <CheckIcon />, <ChevronDownIcon size={12} /> keeps working
- icons-remix (v1.0.0): Remix Icon line set (Remix Icon License 1.0: free in apps, no reselling as an icon pack, no logos; @remixicon/react) behind every GreedUI icon name. Installs as components/ui/icons.tsx, replacing the pixel set.
  e.g. npx shadcn@latest add <origin>/r/icons-remix.json  ·  every <CheckIcon />, <ChevronDownIcon size={12} /> keeps working
- icons-tabler (v1.0.0): Tabler Icons outline set (MIT, @tabler/icons-react) behind every GreedUI icon name. Installs as components/ui/icons.tsx, replacing the pixel set.
  e.g. npx shadcn@latest add <origin>/r/icons-tabler.json  ·  every <CheckIcon />, <ChevronDownIcon size={12} /> keeps working
- icons (v1.0.0): 1-bit pixel icon set on a 16×16 grid (1px outlines, 2px functional glyphs, 12px content box). Crisp at 16/32/48px. Named exports, currentColor, `size` prop.
  e.g. <CheckIcon />  ·  <ChevronDownIcon size={12} className="text-ink-3" />  ·  createIcon("Name", glyph(2, ["..##", …]))
- inline-confirm (v1.0.0): Two-step destructive action, no modal: first press arms ("Confirm delete?") with a pixel countdown that auto-cancels; Esc/blur cancel; async onConfirm shows spinner then doneLabel. Button props + onConfirm, confirmLabel, doneLabel, timeout (ms), confirmTone.
  e.g. <InlineConfirm onConfirm={remove} confirmLabel="Delete 3 files?"><TrashIcon /> Delete</InlineConfirm>
- input (v1.0.2): Calm text input on Base UI Input: a dotted ring ripples out once on focus, the caret fades instead of blinking. size=sm|md|lg, leading/trailing slots (icon, kbd, button), invalid; picks up Field state (data-invalid) automatically.
  e.g. <Input placeholder="Search" leading={<SearchIcon />} trailing={<Kbd>/</Kbd>} />
- kbd (v1.0.0): Pixel keycap for shortcuts (stepped corners, Geist Pixel). keys=[…] renders a combo; size=sm|md. Dips 1px when its parent button is pressed.
  e.g. <Kbd>⌘K</Kbd>  ·  <Kbd keys={["⌘", "K"]} />  ·  <Button>Search <Kbd size="sm">/</Kbd></Button>
- menu (v1.0.1): Dropdown of actions. <Menu trigger>; MenuItem icon|description|shortcut|tone=neutral|brand|danger, MenuCheckboxItem, MenuRadioGroup+MenuRadioItem, MenuSub label, MenuGroupLabel, MenuSeparator. Compound Menu* parts.
  e.g. <Menu trigger={<Button variant="soft">Edit</Button>}><MenuItem shortcut="⌘D" description="Copy it next to the original">Duplicate</MenuItem><MenuItem tone="danger">Delete</MenuItem></Menu>
- menubar (v1.0.0): App-style command bar. <Menubar> of <MenubarMenu label>…menu items…</MenubarMenu>; hover-switches instantly between open menus. Compound: MenuRoot + MenubarTrigger + MenuContent.
  e.g. <Menubar><MenubarMenu label="File"><MenuItem shortcut="⌘N">New</MenuItem></MenubarMenu><MenubarMenu label="Edit">…</MenubarMenu></Menubar>
- mesh-gradient (v1.0.5): Smooth, grainy WebGL mesh gradient that blends spots in oklab with a soft noise warp. points=[{x,y,color}]|preset name, warp, grain, speed (0 = still), dither="none"|"bayer"|"halftone", cell. Pauses offscreen, CSS fallback when effects are off.
  e.g. <MeshGradient points="apricot" speed={0.3} className="h-80 rounded-xl" />  ·  <MeshGradient points={[{ x: 0.2, y: 0.3, color: "oklch(0.9 0.06 60)" }, …]} dither="halftone" />
- message (v1.0.1): Chat rows without bubbles. <Message role=user|assistant|system name time meta avatar text streaming stopped tools grouped size tone copy onRetry onFeedback actions footer>. Words fade in with a soft caret, height glides, actions show on hover. <MessageList> sticks to the bottom and offers "jump to latest". Parts: MessageText, MessageTool, MessageActions, MessageAction, MessageCopy, MessageFeedback.
  e.g. <MessageList><Message role="user" time="14:06" text="Why is p95 up?" /><Message role="assistant" name="Atlas" text={reply} streaming={busy} onRetry={retry} /></MessageList>
- meter (v1.0.3): A measured value in a known range (quota, battery, strength). variant=bar|pixel (tall, narrow whole-pixel cells with a fixed 2px gap; count fills the width, or set cells for an exact count that stretches to fill it), tone=neutral|brand|positive|warning|danger|info, thresholds={{warning,danger}} picks tone (descending = low is bad), size=sm|md|lg, label, showValue.
  e.g. <Meter value={82} label="Storage" showValue thresholds={{ warning: 70, danger: 90 }} />  ·  <Meter variant="pixel" value={18} thresholds={{ warning: 30, danger: 15 }} />
- morph (v1.0.2): Wrapper that glides its own width/height when its content changes size (Dynamic Island style). axis="height"|"width"|"both". swapKey: when it changes, the new content fades and sharpens in while the box resizes. One CSS transition, no per-frame JS.
  e.g. <Morph axis="both" swapKey={step}>{step === 1 ? <StepOne /> : <StepTwo />}</Morph>
- navigation-menu (v1.0.0): Site nav with rich dropdown panels; one shared popup morphs size/position between triggers. NavigationMenu > NavigationMenuList > NavigationMenuItem > NavigationMenuTrigger + NavigationMenuContent > NavigationMenuLink title|description|icon|variant=card|bar.
  e.g. <NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Docs</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/docs" title="Start" description="Install in a minute" /></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>
- number-field (v1.0.9): Numeric input with −/+ steppers and a drag-to-scrub label (Base UI NumberField); stepped values roll in. <NumberField label min max step format size invalid defaultValue value onValueChange>. Parts: NumberFieldRoot, NumberFieldScrubArea, NumberFieldScrubAreaCursor, NumberFieldGroup, NumberFieldInput, NumberFieldIncrement, NumberFieldDecrement.
  e.g. <NumberField label="Seats" defaultValue={5} min={1} max={50} />
- otp-field (v1.0.0): One-time-code entry (Base UI OTPField): pixel cells with stepped corners and a blinking block caret; a ripple runs across when complete. <OTPField length={6} groupSize={3} size mask validationType autoSubmit onValueComplete>. Parts: OTPFieldRoot, OTPFieldInput, OTPFieldSeparator.
  e.g. <OTPField length={6} groupSize={3} onValueComplete={verify} />
- popover (v1.0.1): Anchored floating panel that grows out of its trigger. <Popover trigger title description side align sideOffset arrow openOnHover swapKey> or parts PopoverRoot/Trigger/Portal/Positioner/Popup/Arrow(pixel-stepped)/Title/Description/Close.
  e.g. <Popover trigger={<Button variant="soft">Share</Button>} title="Share link" arrow>…</Popover>
- preview-card (v1.0.1): Hover preview for a link. <PreviewCard href title description meta media content side arrow delay>link text</PreviewCard> or parts PreviewCardRoot/Trigger/Portal/Positioner/Popup/Arrow.
  e.g. <PreviewCard href="/docs/motion" title="Motion" description="CSS-first enter and exit." meta="6 min read">motion guide</PreviewCard>
- progress (v1.0.3): Task progress. variant=bar|pixel (tall, narrow whole-pixel cells with a fixed 2px gap fill one by one; count fills the width, or set cells for an exact count that stretches to fill it), tone=neutral|brand|positive|warning|danger|info, size=sm|md|lg, value={null} = indeterminate, label, showValue.
  e.g. <Progress value={64} label="Uploading" showValue />  ·  <Progress variant="pixel" value={null} label="Indexing" />
- prompt-input (v1.0.0): Conversational input for AI/agent features: textarea that glides as it grows, ⌘↵ submit (enterSubmits for ↵), send morphs to stop while loading, suggestion chips fill the input, attachments + toolbar slots. value/defaultValue/onValueChange, onSubmit, onStop, status, maxRows, ref (textarea).
  e.g. <PromptInput placeholder="Ask anything…" suggestions={["Summarize this week"]} loading={busy} onSubmit={send} onStop={stop} />
- radio-group (v1.0.9): Single choice (Base UI RadioGroup + Radio), same raised fill as Checkbox. <RadioGroup label options={[{value,label,description,meta}]} variant=list|choice size tone=brand|neutral|positive|danger>; choice = hairline-divided rows with a sliding accent bar, no boxes. Parts: RadioGroupRoot, RadioRoot, RadioIndicator, Radio.
  e.g. <RadioGroup variant="choice" defaultValue="pro" options={[{ value: "free", label: "Hobby", meta: "$0" }, { value: "pro", label: "Pro", description: "For teams", meta: "$12" }]} />
- reactions (v1.0.0): Reaction chips + picker (ReactionPicker alone works as a toolbar button, icon prop). value/defaultValue/onValueChange of { id, count, mine }[], options of { id, label, icon } (pixel icons by default, emoji strings work too), size=sm|md, picker. Counts roll, yours is highlighted, toggling thumps, the picker pops with a halftone dissolve.
  e.g. <Reactions defaultValue={[{ id: "love", count: 3, mine: true }]} onValueChange={save} />
- scribble-check (v1.0.9): Consent checkbox (Base UI Checkbox) that signs itself: a hand-drawn check scribbles in, the label gets a hand underline, and a little pen rides along it with a "signed" note. label, description, underline, pen, note, size=sm|md|lg, tone=brand|neutral|positive, invalid. Parts: ScribbleCheckRoot.
  e.g. <ScribbleCheck name="terms" required label="I agree to the terms" description="You can change your mind anytime." />
- scroll-area (v1.0.0): Native scrolling with thin overlay scrollbars that appear on hover/scroll and edge fade masks driven by overflow distance. orientation=vertical|horizontal|both, fade.
  e.g. <ScrollArea className="h-64">…</ScrollArea>  ·  <ScrollArea orientation="horizontal" fade={false}>…</ScrollArea>
- select (v1.0.0): Pick from a list; popup aligns the chosen item over the trigger. <Select items={[{value,label,description?,icon?}]} placeholder size=sm|md|lg multiple invalid label>. Compound Select* parts.
  e.g. <Select label="Region" placeholder="Choose a region" items={[{ value: "fra", label: "Frankfurt", description: "Lowest latency in EU" }]} />
- sentence (v1.0.0): Settings written as plain sentences with clickable inline tokens. <Sentence size=sm|md|lg state=idle|active|running|done|skipped|failed> wraps text + <Token tone=neutral|brand empty invalid>.
  e.g. <Sentence>When <Token tone="brand">a new order</Token> comes in, <Token empty>pick an action</Token>.</Sentence>
- separator (v1.0.0): 1px hairline divider. orientation=horizontal|vertical, variant=line|pixel (stepped dashes), optional label in pixel font.
  e.g. <Separator />  ·  <Separator label="or" variant="pixel" />  ·  <Separator orientation="vertical" className="h-4" />
- skeleton (v1.0.0): Shimmering placeholder that matches the shape of what's loading. shape=text|circle|rect, lines (text). Size via className. Reduced motion = static.
  e.g. <Skeleton shape="circle" className="size-9" />  ·  <Skeleton lines={3} />  ·  <Skeleton shape="rect" className="h-32" />
- slider (v1.0.0): Single or range slider (Base UI Slider): thick inset track with a dotted ruler, pill thumb, fill that glides and tucks into the thumb at 0, rolling value. size, tone=brand|neutral, labels=["Low","High"] (snaps + highlights), dots (ruler, on by default), format, showValue, bubble, thumbLabels, variant=track|slim. Parts: SliderRoot, SliderLabel, SliderValue, SliderControl, SliderTrack, SliderIndicator, SliderRuler, SliderThumb.
  e.g. <Slider label="Effort" labels={["Low", "Medium", "High", "Max"]} defaultValue={1} />  ·  <Slider label="Budget" defaultValue={[200, 800]} max={1000} step={50} format={{ style: "currency", currency: "USD" }} />
- sparkline (v1.0.1): Tiny SVG trend. data, variant=line|area|dither|bar (dither = Bayer dot fill), texture=dither|grain|none (area: fine ordered-dither dots over the soft fill by default), tone=brand|neutral|positive|warning|danger|info|gradient, labels, format (Intl), interactive crosshair, strokeWidth, min, max. Draws in on mount (CSS), fills its box.
  e.g. <Sparkline data={[4, 6, 5, 9, 12, 10, 14]} variant="area" tone="gradient" className="h-8 w-32" />  ·  <Sparkline data={d} variant="area" texture="grain" />
- spinner (v1.0.0): Pixel "busy" indicator: 8 cells chase around a 3×3 grid. Pure CSS, inherits currentColor.
  e.g. <Spinner />  ·  <Spinner size={20} label="Saving" />
- stat (v1.0.2): Inline metric, not a card. label, value (number → AnimatedNumber, digits roll), format, delta (%), deltaLabel, invert (down is good), data (sparkline, sparkline={{ variant: "dither" }} for a dot fill), size=sm|md|lg, pixel, spring (count instead of roll). String label, delta and deltaLabel roll too. <StatGroup> = hairline-divided equal columns (4 → 2x2 → 1), sparkline drops under the value when a column is narrow.
  e.g. <StatGroup><Stat label="Revenue" value={48210} format={{ style: "currency", currency: "USD" }} delta={12.4} data={[3, 5, 4, 8]} /></StatGroup>
- status (v1.0.9): Tiny 3x3 dot-matrix status + label: operational beats like a heart, degraded stutters, down blinks hollow, pending chases, idle flatlines. state, size=sm|md|lg, pulse (animate, off under reduced motion), square (crisp pixels instead of dots), pixel label, uptime=[0..1 | state] (strip of cells on hover/focus), children overrides label.
  e.g. <Status state="operational" uptime={[1, 1, 0.97, 1, 1]} />  ·  <Status state="degraded" square pixel>Partial outage</Status>
- switch (v1.0.0): On/off toggle (Base UI Switch): the thumb glides and squashes the same both ways, a dotted glow breathes on hover and a dotted ring pops on toggle. size=sm|md|lg (36/44/52px), tone=brand|neutral, label + description render a settings row. Parts: SwitchRoot, SwitchThumb.
  e.g. <Switch label="Auto-deploy" description="Ship every push to main." defaultChecked />
- table (v1.0.0): Hairline data table, no box: sticky header, tabular nums, row hover, selection via TableRow selected (data-selected, brand edge). Table size=sm|md|lg, sticky, maxHeight; TableHead sort="asc"|"desc"|false + onSort, align; TableCell align; TableHeader/Body/Footer/Caption.
  e.g. <Table><TableHeader><TableRow><TableHead sort="asc" onSort={flip}>Name</TableHead><TableHead align="end">MRR</TableHead></TableRow></TableHeader><TableBody><TableRow selected><TableCell>Acme</TableCell><TableCell align="end">$4,200</TableCell></TableRow></TableBody></Table>
- tabs (v1.0.0): Tabs with a gliding indicator and a hover highlight that glides between tabs. variant=underline|pill, size=sm|md|lg; panels glide to their height and fade in. <Tabs items={[{value,label,content}]} /> or compound TabsRoot/List/Tab/Panel.
  e.g. <Tabs variant="pill" defaultValue="code" items={[{ value: "preview", label: "Preview", content: … }, { value: "code", label: "Code", content: … }]} />
- textarea (v1.0.2): Multiline input that grows with its content (CSS field-sizing, JS fallback). size=sm|md|lg, invalid, count shows a pixel character counter (pairs with maxLength). Field-aware.
  e.g. <Textarea placeholder="What changed?" maxLength={280} count />
- toast (v1.0.0): Stacked toasts that fan out on hover/focus, swipe to dismiss. Mount <Toaster /> once, then toast("Saved") · toast.positive|info|warning|danger(title, {description, actionProps, timeout}) · toast.promise(p, {loading, success, error}). useToast() inside a provider.
  e.g. toast.positive("Deployed", { description: "acme.dev is live", actionProps: { children: "Open", onClick } })
- toggle-group (v1.0.3): Shared on/off state for a row of toggles; a hover highlight glides between items. variant=ghost|outline|segmented (CSS-only sliding indicator, never empty), tone, size, multiple, value/defaultValue (string[]). SegmentedControl = one-liner with string value.
  e.g. <ToggleGroup defaultValue={["left"]}><ToggleGroupItem value="left" square aria-label="Left"><ListIcon /></ToggleGroupItem>…</ToggleGroup>  ·  <SegmentedControl items={["Day", "Week"]} defaultValue="Day" />
- toggle (v1.0.3): Two-state button (on/off): a clicky squash-and-settle, a dotted ring when it turns on, a squish-and-bounce icon and a pixel "LED" when pressed. useToggleFx adds the same feel to your own Base UI toggles. variant=ghost|outline, tone=neutral|brand, size=sm|md|lg, square, pressed/defaultPressed/onPressedChange.
  e.g. <Toggle square aria-label="Star" defaultPressed><StarIcon /></Toggle>  ·  <Toggle tone="brand" pressed={on} onPressedChange={setOn}>Live</Toggle>
- token-picker (v1.0.0): Inline sentence token that opens a searchable, grouped picker: the popup flows out of the token, the highlight glides, the pick rolls in and the token width glides. options=[{value,label,description?,group?,icon?}], value, onValueChange, placeholder, title, freeform (accept typed values), display, tone, invalid, open/onOpenChange.
  e.g. <TokenPicker title="What kicks it off?" placeholder="something" value={t} onValueChange={setT} options={[{ value: "order", label: "a new order comes in", group: "Orders" }]} />
- toolbar (v1.0.9): Roving-focus row of controls; one hover highlight glides across buttons, links and nested toggles. ToolbarRoot variant=outline|floating|bare, size=sm|md, orientation; ToolbarButton (tone, square), ToolbarGroup, ToolbarSeparator, ToolbarLink, ToolbarInput. Drop a ToggleGroup in for toggles.
  e.g. <ToolbarRoot><ToolbarButton square aria-label="Edit"><EditIcon /></ToolbarButton><ToolbarSeparator /><ToolbarLink href="#">Docs</ToolbarLink></ToolbarRoot>
- tooltip (v1.0.1): Small hover/focus label. <Tooltip content kbd side align pixel arrow delay>{trigger}</Tooltip>; wrap groups in <TooltipProvider> so neighbours open instantly. Parts TooltipRoot/Trigger/Portal/Positioner/Popup(pixel,arrow)/Arrow/Kbd.
  e.g. <TooltipProvider><Tooltip content="Search" kbd="⌘K"><Button square aria-label="Search"><SearchIcon /></Button></Tooltip></TooltipProvider>
- tumbler (v1.0.6): Text that rolls to its next value like a drum: the old line tips away, the new one rolls in, and the size glides. by="word"|"char" (char rolls only the characters that changed). wrap for multi-line text. Numbers roll up when they grow, down when they shrink.
  e.g. <Tumbler value={hint} wrap />  ·  <Tumbler value={price} by="char" />
- typing (v1.0.0): "Someone is working" indicator: 3 rounded-square pixel dots in a wave. label adds text, timer adds a rolling "· 3s" (since = start time in ms). size=sm|md. Static dots under reduced motion.
  e.g. <Typing />  ·  <Typing label="Thinking" timer />  ·  <TypingDots className="text-brand" />

## Blocks
- ai-chat (v1.0.2): Agent chat that shows its work: Message rows without bubbles, expandable tool calls, words that fade in behind a soft caret, "Thinking · 3s" timer, hover copy/retry/feedback, next-step chips with Hint, a list that never yanks you while you read, a faint dotted mesh dither behind it all that drifts faster while it works (mesh preset or false). Props: agent, model, capabilities, initialMessages, respond(prompt) → { tools, text (string or async iterable), actions }, suggestions.
  e.g. <AIChat agent="Atlas" respond={(prompt) => ({ tools: [{ name: "query_logs", target: "edge", detail: "1,284 rows" }], text: "Errors began at 14:02." })} />
- app-shell (v1.0.2): Sidebar shell: Dynamic Island workspace switcher, a "now" well (rolling status + pixel ring), pixel activity signals per row, folding sections (remembered), drag or ⌥↑↓ to reorder pins, hold ⌘ for key hints (⌥1-9 jumps), ⌘K palette, inbox, icon rail ([) with pixel badges, halftone hover trail; Drawer when narrow. nav, active/onNavigate, now, workspace(s), notifications, user, usage, status, defaultPinned, defaultFolded, assistant(page), children.
  e.g. <AppShell workspace="Acme" onNavigate={go} now={{ label: "Deploying main", detail: "building", progress: 0.4 }}><Page /></AppShell>
- billing (v1.0.2): Billing page, no cards: plan / next invoice / payment hairline row, inline plan change (RadioGroup choice + prorated consequence, plan name morphs on switch), ChartDitherArea spend-to-date vs last period, usage rows with pixel Meters and pace projections, spend-cap Switch, period Progress, invoices Table with Badge status + download Hint. data={BillingData}, onChangePlan.
  e.g. <Billing data={{ ...billingData, seats: 12 }} onChangePlan={(plan) => api.switch(plan)} />
- chat-widget (v1.0.0): Floating assistant that stays out of the way: the launcher grows into a compact chat, which expands into a docked side panel for longer work. ⌘J opens, Esc closes, minimize keeps the draft, unread badge, suggestions, attachments (pick or drop), reactions, screen-reader announcements. Props: agent, greeting, respond(prompt, files) → { text, tools?, suggestions? }, suggestions, mode/defaultMode/onModeChange, shortcut, contained, children (page that makes room when docked).
  e.g. <ChatWidget agent="Sidekick" respond={(q) => ({ text: `On it: ${q}` })}><App /></ChatWidget>
- cta-footer (v1.0.9): Closing CTA band (halftone MeshGradient, dithered edge, two CTAs whose consequence line rolls underneath, numbers digit by digit) + footer with brand, changelog email capture, link columns, Status line and legal row. Props: title, primary/secondary {label,href,hint,detail}, columns [{title,links:[{label,href,badge}]}], status, onSubscribe(email), mesh.
  e.g. <CTAFooter title="Ship your next deploy here" columns={[{ title: "Product", links: [{ label: "Pricing", href: "/pricing" }] }]} status={{ state: "operational", label: "All systems normal", href: "/status" }} />
- dashboard (v1.0.0): Overview screen, no cards: env switcher + ⌘K palette, hairline Stat row, ChartDitherArea traffic vs previous, ChartBarList top routes, ChartPulse live strip over Activity with undo, deployments Table with Status + row Menu (optimistic redeploy/promote/delete). data={DashboardData}, shortcut.
  e.g. <Dashboard data={{ ...dashboardData, workspace: "Acme" }} shortcut="k" />
- data-table (v1.0.1): Filterable, sortable data table: search (/ focuses), filter Menu with icon items (active fill + soft check) + removable icon chips, rows/grid view toggle (grid has a HoverTrail), row selection with a rising bulk-action bar that morphs (plan change, InlineConfirm delete, undo), rolling counts, pagination, Empty state. rows={Customer[]}, pageSize.
  e.g. <DataTable rows={customers} pageSize={10} />
- faq (v1.0.9): FAQ: side column (title, topic filter, "still have questions" line with response time + Status) beside a numbered hairline Accordion (answers stagger in word by word). Props: title, description, items [{value,question,answer,topic}], contact {label,href,note,icon,external}, defaultValue.
  e.g. <FAQ items={[{ value: "privacy", topic: "Privacy", question: "Do you track users?", answer: "No. Zero third-party requests." }]} contact={{ label: "support@atlas.dev", href: "mailto:support@atlas.dev" }} />
- features (v1.0.0): Architectural feature grid: hairline cells with corner ticks, pixel icon per cell, one wide cell with a live micro-demo (region switch → latency tween + sparkline). Props: eyebrow, title, description, features [{icon,title,body,meta}], demo.
  e.g. <Features title="Everything ships with the edge" features={[{ icon: <BoltIcon />, title: "Instant rollbacks", body: "One click, every region.", meta: "< 3s" }]} />
- hero-pulse (v1.0.1): Live landing hero (hero v3): editorial headline beside a dot field where deploys land as halftone ripples on region pins (click a city to ship there), plus a hairline ledger whose numbers roll (Tumbler). One canvas, pauses offscreen, still when motion is off. Props: eyebrow, title, description, primary/secondary {label,href,hint,detail}, regions [{id,label,x,y}], stats.
  e.g. <HeroPulse title="Deploys you can watch land" regions={[{ id: "fra", label: "Frankfurt", x: 0.52, y: 0.3 }]} />
- hero-stage (v1.0.1): Centered landing hero (hero v2): announcement pill, headline whose last word rolls through words (Tumbler), two CTAs with a rolling consequence line instead of tooltips, then a halftone MeshGradient stage with a dithered edge and a dry-run window you can ship. Props: announce {label,tag,href}, title, words, description, primary/secondary {label,href,hint,detail}, aside, mesh.
  e.g. <HeroStage title="Ship it in one" words={["command", "commit", "click"]} primary={{ label: "Start building", href: "/signup", hint: "Makes a free workspace", detail: "~30 sec" }} />
- hero (v1.0.0): Landing hero: meta line, headline, sub, two CTAs that preview where they go (Hint), copyable command, MeshGradient panel (mesh preset, slow drift) with dithered edge + live deploy window. Props: meta, title, description, primary/secondary {label,href,hint,detail}, command, onCopy, aside, mesh.
  e.g. <Hero title="Ship the edge in one command" command="npx create-atlas@latest" primary={{ label: "Start building", href: "/signup", hint: "Creates a free workspace" }} />
- letter-form (v1.0.4): Sign-up + consent form (name, email, topics, note, ScribbleCheck) with live validation you can switch off (live). Submit morphs the button to busy then done, then the whole form morphs into a paper letter that writes itself in line by line (font-hand) and gets signed (font-sign). Props: live, topics, consent, agreement, author, handle, onSubmit(values), defaultValues.
  e.g. <LetterForm live author="broke" handle="@brokefyi" onSubmit={(v) => api.subscribe(v)} />
- not-found (v1.0.1): 404 page: 1-bit pixel illustration (sad early-Mac, warm glowing screen, blinking drive LED), the missing path, "did you mean" chips, halftone dots that trail the pointer (trail) and a hairline "here's what you can do" list (search, back, home, report with inline confirmation). Props: path, title, suggestions, trail, onSearch, onBack, homeHref, onReport.
  e.g. <NotFound path={location.pathname} suggestions={[{ label: "/pricing", href: "/pricing" }]} onSearch={() => setPaletteOpen(true)} />
- pricing (v1.0.1): Pricing: monthly/yearly SegmentedControl (prices roll via Tumbler), hairline-divided plan columns (hover fills a column with halftone and rolls the price line to a per-day cost), recommended plan with a brand hairline + flat tint + pixel Badge, period note that morphs, CTA hints, grouped comparison rows. Props: plans, comparison, currency, yearlyNote, onSelect(plan, period).
  e.g. <Pricing plans={[{ id: "pro", name: "Pro", price: { monthly: 20, yearly: 16 }, features: ["Unlimited deploys"], recommended: true }]} onSelect={(id, period) => checkout(id, period)} />
- rule-builder (v1.0.9): Automation builder that reads like a sentence: inline tokens, if/otherwise branches on a hairline rail, wait, for each, stop, live plain-English summary, hoverable flow map, step-by-step test run with sample data, undo/redo, drag or ⌥↑↓ reorder. Props: value/defaultValue/onChange (typed Rule JSON), triggers, actions, waits, templates.
  e.g. <RuleBuilder defaultValue={rule} onChange={save} triggers={myTriggers} actions={myActions} />
- settings (v1.0.0): Settings page: sticky section nav (HoverTrail + sliding bar), hairline rows (label + description left, control right) with Input/Select/Switch/RadioGroup/Slider, per-row "edited" marks, consequence notes that roll in, a rising unsaved-changes bar that morphs like an island (Morph swapKey) and says what will change (⌘S saves), danger zone with InlineConfirm + AlertDialog. defaultValues, onSave(values, changed).
  e.g. <Settings workspace="Acme" defaultValues={{ ...settingsDefaults, region: "iad" }} onSave={(v) => api.save(v)} />
- sign-in (v1.0.9): Sign-in: email + password with Field validation, magic-link mode that folds the password away, Morph height between form and result, rolling labels + hints (Tumbler), SSO/passkey buttons (pixel icons, Hint), pending + success states that say what happened. Props: title, providers, onSubmit({mode,email,password}) (throw to show an error), onProvider, onForgot, aside, mesh.
  e.g. <SignIn onSubmit={async ({ mode, email, password }) => (mode === "magic" ? sendLink(email) : login(email, password))} />
- sign-up (v1.0.2): Multi-step onboarding: account → workspace → verify (OTPField) → invite, pixel step indicator, Morph swapKey per step (box glides, new step fades and sharpens in), rolling labels (Tumbler), per-step Field validation, password rules that tick as you type around a dotted pixel ring, finish summary. Props: title, domain, onVerify(code) (throw = wrong code), onComplete(data), defaultStep.
  e.g. <SignUp domain="atlas.app" onVerify={(code) => api.verify(code)} onComplete={(data) => router.push(`/${data.slug}`)} />
- team-members (v1.0.0): Team page: hairline member rows with a HoverTrail, per-row role Select (inline "now can…" note), InlineConfirm remove with undo, invite Popover that morphs into a sent state (Morph swapKey; email + role, validation, seat math), pending invites with resend/revoke, pixel seat Meter, rolling counts. members, invites, seats, onInvite.
  e.g. <TeamMembers members={team} invites={pending} seats={10} onInvite={(email, role) => api.invite(email, role)} />

## Hooks & lib
- feature-switches (v1.0.6): Runtime switches on <html>: motion, effects, squircle, pixel. getFeature/setFeature/useFeature. Motion and effects also respect prefers-reduced-motion, unless <html data-ui-reduced-motion="ignore"> opts out on purpose. prefersReducedMotion().
  e.g. setFeature("effects", false)  ·  const fx = useFeature("effects")
- mesh (v1.0.0): Cozy mesh gradient palettes + helpers. meshPresets (apricot, honey, matcha, dusk, tide, plum, paper; light + dark), meshPreset(name, dark), cozyMesh() for a random but tasteful set, meshToCss(points) for a CSS-only background.
  e.g. <div style={{ background: meshToCss(meshPreset("dusk")) }} className="grain relative" />  ·  setPoints(cozyMesh({ dark }))
- motion (v1.0.6): Lean Motion setup: <MotionProvider> fetches Motion's feature bundle once the browser is idle (never in your main bundle) and respects reduced motion. Use `m.*` components + `spring`/`ease` tokens.
  e.g. <MotionProvider><App /></MotionProvider>  ·  <m.div animate={{ x: 4 }} transition={spring.snappy} />
- pixel-transition (v1.0.0): Full-screen dithered dot wipe in WebGL: rounded cells grow out from a point, you swap the UI underneath, then they shrink away. ~3kb, no deps. Skips straight to the swap when effects are off, motion is reduced, or WebGL is missing.
  e.g. await pixelTransition({ origin: { x, y }, color: "oklch(0.17 0 0)", onCovered: () => setDark(true) })
- svg-icon (v1.0.0): Icons from raw SVG path data (Streamline, Figma, any set) + the 16×16 pixel-grid helpers. Same IconProps as icons.tsx. Used by every icons-* pack.
  e.g. svgIcon("Rocket", ["M12 2 15 9H9z", { d: "M9 9h6v8H9z", fill: true }], { stroke: 1.5 })  ·  createIcon("Name", glyph(2, ["..##", …]))
- create-theme (v1.0.8): Full --ui-* theme (light+dark, AA-solved brand) from one hue. createTheme({hue,chroma,neutralWarmth,radius,speed,density,font,fontSans,fontPixel,bodyWeight,headingWeight,tabularNums,depth,features}), themeToCss, themeVars, themeImports, contrastReport, themeMesh (points for MeshGradient), presets, fonts.
  e.g. const css = themeToCss(createTheme({ hue: 265, radius: 8, font: "onest", depth: "tactile", features: { squircle: false } }))  ·  themeToCss(presets.moss, ".marketing")
- utils (v1.0.0): `cn()` class merger (clsx + tailwind-merge), same as shadcn's. `cnState()` also handles Base UI's className-as-function.
  e.g. cn("px-3", isActive && "bg-tint", className)  ·  className={cnState(className, "px-3 data-[open]:bg-tint")}
- theme (v1.0.8): GreedUI tokens + optional parts. Import after `@import "tailwindcss";`. Delete any part you don't want; components fall back cleanly.
  e.g. @import "tailwindcss"; @import "./styles/greedui.css";
- shadcn-compat (v1.0.0): Maps shadcn/ui tokens (--background, --primary, --muted, --sidebar-*, --chart-*, --radius…) onto GreedUI --ui-* vars, light+dark. Import after greedui.css; delete your old :root/.dark token blocks.
  e.g. @import "tailwindcss"; @import "./styles/greedui.css"; @import "./styles/shadcn-compat.css";