Components Reference

The complete inventory of src/components/ui/. Each entry lists what the folder exports, its variant axes with every option, and the defaults. For the contract these all follow, see UI Components.

Import either way:

import { Button } from "@components/ui/button";
import { Card, CardHeader, CardTitle } from "@components/ui/card";

Each folder exports its tv() config for composition. A handful of components have no config of their own because they reuse another’s — those are noted.

Layout and surface

pixel-panel — PixelPanel. elevated: true, false — default false (shadow-pixel-lg vs shadow-pixel). Takes an as prop to render as a section, article or div. The signature 8-BitQuest surface: bg-card with a 4px black frame and the hard offset pixel shadow.

card — Card, CardImage, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter.

• variant: default, elevated, outline, interactive — default default
• size: sm, md, lg — default md

size works by setting a --card-p custom property the padded parts read, so a per-part padding override still wins. CardHeader reflows to two columns automatically when a CardAction is present.

separator — Separator. orientation: horizontal, vertical — default horizontal.

table — Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption. No variants. Table wraps itself in a horizontally scrollable container.

list — List, ListItem.

• marker: none, disc, decimal — default none. decimal renders an <ol>.
• orientation: vertical, horizontal — default vertical. Horizontal is dot-separated inline.

ListItem takes an icon slot; the icon treatment is driven by slot presence, not a prop.

accordion — Accordion, AccordionItem, AccordionTrigger, AccordionContent. No variants. Built on native <details>, so exclusive behaviour (a shared name) and keyboard support are free. The trigger chevron rotates on open.

skeleton — Skeleton. No variants. animate-pulse with motion-reduce:animate-none.

avatar — Avatar. size: sm, md, lg — default md. Takes src (a bundled ImageMetadata or a URL) and requires alt whenever src is set — it throws at build otherwise.

Actions and feedback

button — Button.

• variant: primary, secondary, outline, ghost — default primary
• size: sm, md, lg — default md
• icon: true — square, for icon-only buttons

Pass href and it renders an <a> instead of a <button>. Reused by DialogTrigger, DialogClose, DropdownTrigger, PaginationLink and the InputNumber steppers.

badge — Badge. variant: primary, secondary, muted, outline, info, success, warning, error — default primary. Plus a boolean pixel (default false) for the retro 2px-frame uppercase treatment.

alert — Alert. variant: info, success, warning, error — default info. role="alert".

spinner — Spinner. size: sm, md, lg — default md. CSS-only, motion-reduce:animate-none, role="status".

progress — Progress. size: sm, md, lg — default md. Props value and max. Determinate only.

tooltip — Tooltip. side: top, bottom, left, right — default top. CSS-only, revealed on hover and focus-within.

Forms

The text-entry primitives share a base and three states from _field.ts, so state behaves identically across them.

input — Input. size: sm, md, lg — default md. state: default, error, success — default default.

textarea — Textarea. Same two axes, same defaults.

select — Select. Same two axes, same defaults. A native <select> with a custom chevron.

label — Label. size: sm, md, lg — default md.

checkbox — Checkbox. No variants. A native input styled with appearance-none and peer.

radio — Radio. No variants.

switch — Switch. No variants. A native checkbox styled role="switch"; the exported config is switchTrack (the track slot), and your class merges onto the root label. Zero JavaScript.

slider — Slider. size: sm, md — default md (no lg). A native range input styled through its pseudo-elements; WebKit has no progress pseudo-element, so only Firefox fills the track behind the thumb.

input-number — InputNumber. Reuses the input config (size, state); its steppers reuse Button. Ships a small script driving stepUp()/stepDown().

password — PasswordInput, PasswordStrength, plus the exported scorePassword function and Strength type. PasswordInput reuses the input config. PasswordStrength has a size of sm or md (default md) and renders a four-segment meter.

combobox — ComboBox, ComboBoxOption. ComboBox reuses the input config for size/state; the list wrapper’s recipe is comboboxList. Autocomplete over a filterable listbox.

advanced-select — AdvancedSelect. size: sm, md, lg — default md; state: default, error, success — default default. Backed by a visually hidden real <select>, so it submits in a plain form. Ships a script.

searchbox — Searchbox, SearchboxItem. No variants; the exported searchbox recipe is just the outer wrapper. A ⌘K/Ctrl+K command palette built on the Dialog shell.

toggle-count — ToggleCount, ToggleCountValue. No variants. A Monthly/Annual-style toggle built on the Switch primitive; each ToggleCountValue swaps between its min/max text on toggle.

Navigation and overlays

nav — Nav, NavItem, NavLink.

• Nav — orientation: horizontal, vertical — default horizontal
• NavLink — variant: underline, pills, segment, retro — default underline

retro is the theme’s pixel-menu link treatment. The active state is the caller’s aria-current="page"; the primitive only styles it. NavLink is reused by MegaMenuTrigger.

breadcrumb — Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator. No variants. Used on the blog article, paired with the breadcrumb schema.

pagination — Pagination, PaginationItem, PaginationLink, PaginationEllipsis. No variants; PaginationLink reuses Button and takes isActive.

dropdown — Dropdown, DropdownTrigger, DropdownMenu, DropdownItem. DropdownMenu takes an align of start or end. DropdownTrigger reuses Button (default outline). Built on the native Popover API with arrow-key roving.

mega-menu — MegaMenu, MegaMenuTrigger, MegaMenuPanel, MegaMenuItem. MegaMenuPanel takes columns: 1, 2 or 3 (default 3) and an align. The trigger reuses NavLink. Click-to-open, natural Tab order.

dialog — Dialog, DialogTrigger, DialogClose, DialogHeader, DialogTitle, DialogDescription, DialogFooter. No variants. A native modal <dialog>, so the focus trap, page inertness and Escape handling come free.

sheet — Sheet, plus re-exported SheetTrigger and SheetClose. side: right, left, top, bottom — default right. Content parts are Dialog’s; the shell is shared.

tabs — Tabs, TabsList, TabsTrigger, TabsContent. No variants. TabsTrigger and TabsContent each take a required value. The one tab primitive ships a script: roving Arrow, Home and End keys, degrading to all panels visible without JavaScript.

theme-toggle — ThemeToggle. No variants; it re-skins the global .pixel-btn class into a square icon button. The meteor/moon flip is pure CSS; the click handler toggles the class and persists the choice. Pairs with the pre-paint script in BaseHead.

Motion and display

reveal — Reveal. The scroll-entrance wrapper.

• animation: fade-in, fade-in-up, fade-in-down, fade-in-left, fade-in-right, zoom-in, blurred-fade-in, slide-up-fade, bounce-fade-in, flip-in-x, flip-in-y — default fade-in-up
• range: entry, cover, contain, gradual, moderate, brisk, rapid — default entry
• Plus as (default div) and animate. Zero-JS, native scroll timeline.

marquee — Marquee.

• direction: left, right, up, down — default left
• speed: slow, normal, fast — default normal
• Plus pauseOnHover and repeat. Pure-CSS seamless loop; motion-reduce pauses it.

Icons

These two live in src/components/svg/, outside ui/, but follow the same contract. See Icons.

icon — Icon. size: sm, md, lg, xl (size-4…size-8) — default md. name is the typed IconName union over the 571-icon registry. currentColor; decorative unless given a title.

pixel-icon — PixelIcon. size: sm, md, lg, xl (h-4…h-8, width auto) — default md. name is the typed PixelIconName union over the 18-glyph pixel-art set. Sizes by height to preserve the non-square aspect ratios.

Components with no config of their own

These reuse another primitive’s tv() config, so they have no variant axes to list: DialogTrigger, DialogClose, SheetTrigger, SheetClose, DropdownTrigger, MegaMenuTrigger, PaginationLink, PasswordInput, InputNumber.

Seeing them all

pnpm dev, then /examples/ui. Every primitive in every variant, with a theme toggle in the header, plus the two icon registries and the motion catalog. It is development-only and ships no pages in production.