bordered container. the base card everything else builds on.

framed section with an optional header.

full-bleed layout wrapper with brand, breadcrumbs, and actions.

labeled divider between sections.

flex and grid helpers: row, stack, grid, cell, spacer.

single-line text input with a square border.

multi-line text in a shell-code face.

minimal dropdown picker, no chrome.

a [x] marker instead of a tick box.

a (•) marker for exclusive choice.

a two-state toggle.

drag a thumb along a bordered track to pick a value.

a numeric field with -/+ stepper buttons.

type to filter a select.

type to filter, pick multiple, remove with backspace.

a month grid for picking a date, no library required.

a calendar behind a popover trigger.

react-hook-form + zod validation with error messages.

a dropzone to drag, drop or browse for files.

one slot per digit, paste and autofill work out of the box.

same field as OtpInput, entered characters masked.

five variants, mechanical press, dither loading.

button with a keyboard shortcut binding.

keycap hint.

the > selection cursor.

accent link, renders any element.

a two-state pressed/unpressed button.

toggle buttons joined into one segmented control.

a filled or hollow dot.

dithered progress bar.

inline banner with a tone.

bordered box with a title, description, and four tones.

labeled bar with a current value.

label over a big number.

transient notification, deduplicated.

dithered placeholder for loading regions.

dithered inline loading indicator.

friendly nothing-here placeholder.

failure placeholder with a retry action.

hover hint.

modal with backdrop, closes on esc.

non-modal floating panel.

menu from a trigger, keyboard navigable.

right-click menu.

destructive confirmation dialog.

side drawer, used for the mobile sidebar.

type-to-filter command menu.

static vertical menu.

segmented panel switcher.

path trail.

page controls.

numbered progress through a multi-step flow.

1. xdetails
2. 2payment
3. 3confirm

expandable sections.

single show/hide region.

hierarchical list.

grid table with zebra, hover, and row actions.

divided vertical list.

label / value pair.

inline code and code blocks.

const x = 1;

plain text with backtick spans rendered as code.

press mod+k to open the palette

text with a copy button.

small outlined label.

renders a filesystem path.

a line of terminal output.

a run of characters as a divider.

an input that looks like a shell prompt.

keycap plus description.

the whole app frame: sidebar, topbar, main.

nav rail, collapses to a sheet on mobile.

top strip with trigger and actions.

title, description, and actions for a page.

avatar trigger with a dropdown.

avatar derived from a name hash, dithered.

the wrksz logo as a dithered canvas.

a dithered background texture.