The component catalog.

Primary interactive element. Several size and variant styles, supports asChild for composition with Link components. Adds loading / success / error feedback states, an inline confirm flow, badge + tooltip slots, and an o

Segmented control or pill group for clustering related actions and single-select choices. Horizontal or vertical orientation; child borders auto-merge.

Button that copies a value to the clipboard — a plain string or a sync/async producer resolved at click time. Writes via navigator.clipboard with a hidden-textarea/execCommand fallback, flips to a check icon for a config

Floating Action Button: circular + extended variants, three sizes, tonal colours, and fixed-corner positioning helpers. Supports loading state and icon-only / icon+label content.

Floating action button that expands a radial cluster of sub-actions. All four directions, tooltip placement per action, optional backdrop, open-on-hover or click.

Primary action button with an attached caret segment that opens a dropdown of secondary actions. Both segments share Button's tone × emphasis × size API with correctly joined border radii, and the menu is fully keyboard

Money field with a currency symbol prefix and locale-aware thousands/decimal separators probed from Intl.NumberFormat, so th-TH, en-US and de-DE each format correctly. onAccept hands back both the numeric value and the display string, and scale/min/max control the fractional digits and clamp the amount as it is typed. Right-aligned monospace tabular figures; ships THB, USD, EUR, GBP and JPY presets.

Validated email field with leading mail icon, trailing status pill, RFC 5322 regex, optional domain allowlist / blocklist, Levenshtein typo suggestions against 17 common providers ("Did you mean gmail.com?"), and server-

Click-to-edit field: renders a committed value as text with a pencil affordance on hover/focus, and swaps to an input, textarea, or native select on activation. Enter or the check button confirms (Ctrl/Cmd+Enter in texta

Single-line text input for short values. Leading / trailing icons, prefix / suffix addons, clear button, password reveal, copy-to-clipboard, character counter, a lock / pen editability indicator, and validation states.

shadcn input-otp primitive (installed via `npx shadcn add input-otp`). Provides InputOTP / InputOTPGroup / InputOTPSlot / InputOTPSeparator with per-slot caret, paste support, and aria-invalid ring. Source primitive for

Compose an Input with leading or trailing addons (icons, prefix text, suffix buttons).

Numeric spinbutton field with min/max clamping, step increments (keyboard + hold-to-repeat stepper buttons) and Intl.NumberFormat display when blurred — decimal, currency (default THB) or percent. Shows the raw editable

Multi-cell digit / alphanumeric verification-code input built on the shadcn input-otp primitive. Configurable length and groups, paste support, auto-submit on complete, optional resend countdown (mm:ss), and three size s

Pairs PasswordInput with a confirm field. Forwards all PasswordInput props to the primary field; the confirm field validates equality with a red/green ring + inline match indicator.

Password field with configurable rules (min length default 12, upper/lower/digit/special), top-50 common-password blocklist, 4-segment strength meter (Weak/Fair/Good/Strong), rule checklist, visibility toggle, and option

Tiptap-based WYSIWYG editor with a token-styled formatting toolbar: paragraph/H1–H3 select, bold, italic, strike, inline code, blockquote, bullet/ordered lists, validated link popover (http(s)/mailto) and undo/redo. Cont

Canonical build69 search-input composite. Leading magnifier, optional clear button, platform-aware ⌘K kbd hint, optional global keyboard shortcut, debounced onDebouncedChange, async loading spinner, pill / full-width var

Dependency-free canvas signature capture with smooth quadratic-curve strokes and velocity-based pen width. DPR-aware and responsive (ResizeObserver redraw), undo/clear toolbar, read-only display from a data URL, and PNG

Gmail / GitHub-style inline chip input. Type-then-commit on Enter / comma / semicolon / Tab; backspace deletes last chip; paste comma-separated splits into multiple tags; autocomplete dropdown with arrow-key nav + pinned

Multi-line text input. Resizable by default; pairs with FormField for long-form input. Adds autosize, character counter, markdown preview (DOMPurify-sanitised), mentions autocomplete, a floating formatting toolbar, and s

Hierarchical dependent select (Ant Cascader-style) for tree-shaped choices such as Thai addresses (จังหวัด → เขต/อำเภอ → แขวง/ตำบล). Multi-column popover where each pick reveals the next level; the value is the string[]

Two- or three-state checkbox (Radix). Use for boolean form fields or selectable list rows. Adds description / error slots, a card layout variant, and a CheckboxGroup that derives indeterminate state on a parent from its

Multi-select checkbox dropdown. Search filter, "Select all" with indeterminate state, "Clear" link, "N of M selected" header, trigger count badge, optional grouping with section headings.

Dependency-free HSV color picker with a 2D saturation/brightness area, hue slider, optional alpha slider (checkerboard), hex + RGB(A) inputs, preset swatches and an eyedropper button when the browser supports window.EyeD

Searchable single- or multi-select that composes Popover + Command. Hand-rolled — single via Combobox, multi via MultiCombobox.

Async-loading combobox with debounced fetch, optional creatable entries, multi-select with chips, free-solo input, and grouped results. Exports ComboboxAsync + ComboboxAsyncMulti.

Multi-select counterpart to ComboboxAsync: the same host-driven async loading, spinner, error-and-retry panel, creatable and free-solo rows and grouped results, but the trigger carries one removable chip per value with a "+N more" count past `maxChips`. `maxValues` caps how many can be picked, and Backspace or Delete on the trigger removes the last chip. Values the current result set no longer contains still render as chips using the raw value as the label.

Dedicated multi-select combobox: a searchable Popover + Command list whose trigger holds one removable chip per selection plus a "+N more" count once the list exceeds `maxDisplay`. Uses a values/onValuesChange array API rather than Combobox's discriminated single/multiple union, so state stays a plain string[]. Chips are removable by mouse, and Backspace in an empty search field drops the last value.

Token multi-select: popover listbox with checkbox options + built-in search, rendering the selection as removable chips in the trigger. Flat or grouped options, select-all / clear-all that respects the active search filt

Mutually-exclusive option group (Radix). Use when exactly one of a small set must be chosen. Adds inline / stacked / cards layouts, description + recommended-pill slots, per-item disabled state, and an optional icon slot

Five-star rating with half-star precision, hover preview, hover labels, custom icon support, read-only / disabled states, and three sizes.

Native-like select control (Radix). Use for single choice from a moderate list.

Range slider control (Radix). Single or dual-thumb for numeric range input. Adds marks with labels, a hover value bubble, paired numeric inputs, and tonal variants.

On/off toggle (Radix). Use for immediate boolean settings (no save button). Adds inline / stacked / card layouts, label + description slots, a loading spinner, and an optional confirm gate before applying the change.

Two-state toggle buttons built on Radix Toggle / ToggleGroup. Ships a standalone Toggle (aria-pressed) plus a ToggleGroup with single or multiple selection — ideal for view switchers, list-page status filters and formatt

Dropdown panel of Switch rows. Description + leading-icon slots per item, grouping with separators, per-item async loading spinner, "Reset to defaults" footer wired to defaultValues, and an "N changed" indicator.

Select input whose popover is a checkable tree. Single mode is a radio-like leaf select; multiple mode adds tri-state parent checkboxes with a checkStrategy (all / parent / child) controlling which values are emitted. Se

Date picker grid powered by react-day-picker. Used inside a Popover as a DatePicker; range selection supported.

Keyboard-first `DD/MM/YYYY` date field with real range constraints — day 1-31 and month 1-12 are enforced by the mask, so `99/99/9999` can never be typed. `autofix: 'pad'` pads a leading `9` to `09` instead of rejecting the keystroke. Use it when typing a date is faster than picking one; reach for DatePicker when a calendar popover is wanted.

Date, date-range, and date-time pickers built on Calendar + Popover. Supports from/to constraints, a presets footer slot, and the Thai Buddhist Era calendar (พ.ศ.) with full Thai locale labels.

Two-month range picker in a Popover, with an optional quick-range rail (Today, Yesterday, Last 7/30 days, This month, Last month, This quarter) via `presets` — pass `true` for the built-ins or supply your own presets array. The trigger collapses the range to a compact label, dropping the repeated year when both ends share one. Supports Buddhist Era (พ.ศ.) and Thai locale labels.

Combined date + time-of-day picker: a Popover calendar with an Hour/Minute Select row beneath it, merging both into one Date value. Minute options are step-filtered via `minuteStep` (default 5), and an off-grid current minute (e.g. :37 on a 5-minute step) is spliced in so the control never misrepresents the stored time. Supports Buddhist Era (พ.ศ.) and Thai locale labels.

Scrollable digital time-list pickers (MUI DigitalClock / MultiSectionDigitalClock equivalents). DigitalClock renders one scrollable column of times at a fixed interval; MultiSectionDigitalClock renders hours | minutes |

Side-by-side scrollable columns for hours, minutes and either AM/PM or seconds, the MUI MultiSectionDigitalClock equivalent. The `views` prop chooses which columns render and in what order, while minutesStep and secondsStep control each column's granularity. Every column is its own accessible listbox with keyboard support and auto-scrolls its selected value into view.

Analog clock-face time picker (MUI TimeClock equivalent). A round face where the user clicks a number to pick hours, then minutes — the classic two-step interaction. Supports 12h (AM/PM) and 24h (two concentric rings), o

Keyboard-first 24-hour `HH:MM` time field with real range constraints — hours cap at 23 and minutes at 59, so `87:95` can never be typed. `autofix: 'pad'` pads a leading `9` to `09` instead of rejecting the keystroke. Use it when typing a time is faster than spinning a clock; reach for TimePicker or TimeClock for a picker UI.

Time field with free-text parsing plus a popover digital-clock panel (composes MultiSectionDigitalClock). Type "9:30", "1:45 pm" or "18:20:05" and it parses/validates live — invalid or out-of-range text shows the error s

Single-YEAR picker: a Popover-anchored grid of years behind an outline button trigger, four to a row, twelve to a page, with prev/next paging and fromYear/toYear bounds. Shows พ.ศ. or ค.ศ. with the same era toggle chip as the calendar pickers, and the value it reports is ALWAYS the Common Era number (2026, never 2569) whichever era is on screen. Full keyboard grid (arrows, Home/End, PageUp/PageDown, roving tabindex). Works controlled (year/onYearChange) or uncontrolled (defaultYear).

Credit card number field that auto-detects the brand from the typed prefix and shows a tinted badge (Visa, Mastercard, Amex, Discover, JCB). The mask switches itself to Amex's 15-digit `0000 000000 00000` grouping the moment a 34/37 prefix is seen, and back to 16-digit grouping otherwise. Sets inputMode="numeric" and autoComplete="cc-number"; the badge can be hidden with `hideBrand`.

Masked input wrapping the shadcn Input visual contract on top of react-imask. Ships with pre-baked exports for phone, credit card, tax ID, date, time, and currency formats.

Phone number field with the country dial code baked into the mask — Thailand `+66 XX XXX XXXX` by default, plus US, UK and Singapore formats. The prefix is fixed mask text rather than a separate overlay, so the accepted value always carries the full international number. Renders monospace tabular figures and sets inputMode="tel" and autoComplete="tel".

Thai 13-digit tax ID field masked as `X-XXXX-XXXXX-XX-X`. The grouping hyphens are inserted by the mask, so the field only ever accepts digits and the accepted value is always correctly grouped. Renders monospace tabular figures with inputMode="numeric".

Masked phone input with country-specific completeness validation across 12 countries (TH/US/UK/SG/AU/JP/KR/CN/PH/MY/ID/VN). Searchable country picker on the left, masked local number on the right (react-imask), plus E.16

Vertically stacked collapsible sections built on Radix Accordion. Use for FAQs, settings groups, or progressive disclosure of long content. Also ships richer variants (card / flush / bordered / separated) plus declarativ

User or entity avatar with image + initials fallback. Use anywhere a person, team, or organisation needs an identity glyph. Adds hash-tinted initials, status dot, size + tone + ring variants, and an AvatarGroup with hori

Small pill-shaped label for status, counts, or tags — covering BOTH the MUI Chip role (standalone pill in the full tone × emphasis matrix with leading dot / icon / avatar slots, dismiss button, count + pulse modes) AND t

1D barcode tile rendering CODE128, EAN-13, EAN-8, UPC-A or CODE39 symbologies via jsbarcode into an SVG ref inside useEffect, making it SSR-safe. Bar width, height, colours and the human-readable text line are all configurable, with an optional caption under the code. Values that are invalid for the chosen format (a bad EAN-13 check digit, Thai text in CODE39) surface as a danger-toned inline error state instead of throwing.

Month / week / day calendar with event chips and drag-to-create. Use when users need to see and schedule events on a grid.

Generic container with subtle border, padding, and slots for header / title / description / content / footer. Adds elevation levels, hover lift, selected state, tonal tint, and a loading overlay for richer surface compos

Syntax-highlighted code display built on highlight.js with design-token colors that follow the app theme in both light and dark schemes (no hljs stylesheet). Supports explicit language or auto-detect, line numbers, per-l

Single expand / collapse region built on Radix Collapsible — simpler than the Accordion (which manages many items). The consumer supplies one trigger and one content region with a smooth height animation. Supports contro

Professional sortable, filterable, groupable table powered by TanStack Table. Use for any tabular list where users need to slice the data.

Dependency-free text diff viewer: line-level Myers (linear space) with word-level refinement inside changed line pairs. Unified (inline) and side-by-side (split) modes, collapsible unchanged context with keyboard-operabl

Friendly empty-list illustration + headline + sub-copy + primary CTA. Use whenever a list, search, or filter returns nothing.

Two-column key/value display list. Use for read-only metadata, attribute panels, audit summaries.

Vertical list primitive with rich slots — avatar / leading icon / primary / secondary / trailing actions. Compound API: List.Item, List.Avatar, List.Action.

Compact meta-info row shown above or below a list (count, pagination summary, sort indicator, density toggle).

Expandable master–detail rows for DataTable — click a row to reveal an animated detail panel with related records inline.

Pinned-content card for dashboards or "My day" — shows a snippet, quick action, and dismiss / pin affordance.

Scannable-code tiles for payment slips, receipts, shipping labels and product tags. QRCode renders a token-themed SVG QR (react-qr-code) with quiet-zone padding, optional centre logo slot, caption and a download-as-PNG a

KPI tile showing a single big number, delta vs prior period, and optional sparkline. Stack 3-6 in a row at the top of dashboards. Supports a colorful mode that hashes the title to a deterministic palette hue for "rainbow

Multi-step indicator with 6 step states (idle / active / completed / error / disabled / loading), horizontal or vertical orientation, linear or non-linear navigation, alternative-label mode, and a content slot per step.

Low-level styled <table>. Build trivial tables directly; use DataTable for anything interactive.

Visible cluster of selectable tag chips (filter rail, blog cloud, category picker). Three selection modes (none / single / multi), three layouts (wrap / horizontal-scroll / grid), six variants (default / outline / subtle

Two parallel lists with move (→ ←) buttons, drag-and-drop reorder, optional search and sort. Use to assign / unassign items between an "available" and "selected" pool.

Recursive tree of nested nodes with optional checkboxes / single / multi select, lazy loading, drag-and-drop reorder, search filter, and right-click context menu.

Windowed list built on @tanstack/react-virtual that renders only the visible slice of arbitrarily long datasets while keeping list/listitem semantics, roving-tabindex keyboard navigation, and aria-setsize / aria-posinset

Vertical activity timeline of events with timestamps, icons, and descriptions. Use for audit logs, comments, status history.

Compliance-style table view of audit events: actor / target / action / timestamp / IP, with optional filters and severity badges.

MUI Lab-style alternating left/right timeline with a center rail. Use for biography / case-history-style narratives.

Diff and restore change-history timeline: who changed what, before / after diff, and a restore action per revision.

Gantt-light horizontal timeline with milestones and optional multi-lane rows. Use for roadmaps and release schedules.

Sparkline-style inline timeline for KPI cards and table cells. Just dots on a line.

Parallel-track timeline with one swimlane per actor / department / channel. Use for cross-team operations and multi-channel campaigns.

Large-step milestone tracking timeline (order placed → packed → shipped → delivered) with success and failure states.

Recharts-backed area chart with stacked + threshold variants. Use to emphasise cumulative volume over time.

Recharts-backed bar chart with grouped, stacked, horizontal, and color-by-point variants. The default categorical comparison chart.

shadcn ChartContainer / ChartTooltip / ChartLegend wrappers that adapt recharts to build69 theme tokens. Foundation for all build69 chart composites.

Recharts-backed combo chart mixing bars + lines on the same axes (e.g., revenue bars + margin line). Two or three series.

Trapezoidal funnel of stages with percentage and per-stage drop-off labels. Horizontal or vertical orientation.

ClickUp-style project timeline — a zoomable task grid with collapsible group headers, dependency links, a critical-path toggle and a resizable task panel.

Arc / speedometer gauge drawn with pure SVG. Shows a single value against a [min, max] range as a coloured arc with a centre readout. Supports arbitrary start / end angles, colour-band thresholds, tick segments, an optio

2D grid heatmap with sequential / diverging / categorical colour scales, hover tooltip, axis labels, and tonal palettes. Use for matrices like retention or hour-of-day activity.

Recharts-backed line chart with multi-series, area fill, straight-segment, and dashed-forecast modes. The default time-series chart.

Tiny inline area chart for table cells / KPI tiles. No axes.

Tiny inline bar chart for table cells / KPI tiles. Single line, no axes.

Tiny inline line chart for table cells / KPI tiles. No axes.

Recharts-backed pie / donut chart with external labels and click-to-highlight mode. Use for part-of-whole when there are 2-6 slices.

Multi-axis polar / radar / spider chart — recharts-backed. Use to compare items across multiple metrics in one shape.

Recharts-backed radial (gauge) chart with single-gauge, percent-progress, and multiple-rings variants. Use for goal completion and rate indicators.

Flow diagram (recharts) showing weighted edges between nodes with hover highlight of incoming + outgoing flows.

Recharts-backed scatter chart with optional brush selector for filtering. Use to spot correlation between two metrics.

Tiny SVG line chart for inline trend display. Shipped with StatCard but usable anywhere.

Nested rectangles sized by value — recharts-backed. Use for budget / revenue breakdowns or any hierarchical part-of-whole.

Inline callout for short, contextual messages (info, warning, error, success). Not a toast — stays in the layout. Now ships the full tone × emphasis matrix, action slot, countdown auto-dismiss, expandable details, and a

Full-page overlay surface with dark / light / blur / glass tones. Composes with dialogs, sheets, and custom overlays; supports escape + click-outside dismiss.

One long-running operation that is happening on a SERVER — a move, copy, delete, archive or any kind a host names. Distinct from UploadTray, which counts the bytes it is sending and therefore always knows the percentage: here the host POLLS and gets whatever the server chose to report, so percent is OPTIONAL and a job with no size yet draws an indeterminate bar rather than a zero that reads as stalled. Queued, running, paused, done, failed and cancelled each have their own word, bar and controls, and a failed job shows the server's own message verbatim. JobProgressList stacks several under one heading.

Linear progress bar (Radix). Shows determinate or indeterminate task progress. Adds multi-segment bars, stepped indicators, a circular variant, striped fill, indeterminate mode, and tonal + size variants.

Outcome block for an operation the user just performed or a route resolving to an HTTP error. Big tone-colored status icon (or large dimmed code typography for 403/404/500), title, subtitle, actions slot, and an optional

Animated grey placeholder block. Use during data loading to preserve layout. Ships pre-baked shapes (Avatar / Text / Card / Row / Table / Form / Stat / Chat) plus pulse or shimmer wave animation.

A circular placeholder standing in for a profile picture while user data loads. Ships six preset sizes from xs (20px) to 2xl (72px) so it lines up with whatever avatar it replaces. Pick the size that matches the real avatar and the row will not reflow when data arrives.

A ready-made placeholder for a content card: title bar, a two-line body and a footer holding a meta label and a pill. Comes wrapped in a bordered card surface with role="status" and aria-busy so assistive tech announces the loading state. Drop it straight into a card grid while the list request is in flight.

A placeholder for a message thread: alternating incoming and outgoing bubbles with avatars, at deterministically varied widths so the transcript looks natural. Outgoing rows flip direction and corner rounding just like real bubbles. Use it while chat history loads.

A placeholder for an edit form: `fields` label-and-input pairs followed by a right-aligned pair of action buttons. Set fields to the number the real form renders so the dialog or panel keeps its height when data arrives. Announces itself with role="status" and aria-busy.

A placeholder for a single list item: circular avatar, a title and subtitle stack, and a right-hand action button. Stack several to hold the shape of a people or conversation list while it loads. Carries role="status" and aria-busy for assistive tech.

A placeholder for a KPI tile: a small label bar, a large metric-value bar and a sparkline block, inside a bordered card. Built for the metrics strip at the top of a dashboard, where four tiles usually load together. Carries role="status" and aria-busy.

A placeholder for a data grid: a tinted header strip plus a rows x cols body of cells. Cell widths are staggered deterministically so the block reads as real tabular data instead of a uniform grid. Match rows and cols to your page size and the table will not jump when data lands.

A stack of placeholder bars standing in for a paragraph of copy. Renders `lines` bars at the given width, with the last bar shortened to 60% so the block reads as prose rather than a solid box. Use it wherever a run of text is still loading.

Toast notification system (sonner library). Stack of transient feedback messages.

Inline loading spinner with seven visual variants (spin, dots, pulse, ring, bars, gradient, orbit), five sizes, and three tones. Use inside buttons or anywhere a small loading glyph is needed.

Full-page or container-overlay loading state. Three layouts: fixed full-viewport with blur (screen), absolute fill of a relative parent (card), and inline spinner + label (inline).

Hover / focus hint floating above an element (Radix). Adds rich content support, a keyboard-shortcut hint slot (Kbd), tonal variants, and an interactive (hover-stay) mode that keeps the tooltip open when hovered.

Rich file-upload progress display. Three modes (single / list / aggregate); shows bytes uploaded / total, speed (auto-computed via rolling 10-sample buffer if not provided), ETA, chunked-upload segmented progress bar; st

Command palette / fuzzy-search menu (cmdk). Drives ⌘K palettes, autocompletes, and command lists.

Right-click / long-press menu built on Radix ContextMenu, styled 1:1 with DropdownMenu: identical item anatomy (icon / label / description / Kbd shortcut), checkbox and radio items, nested submenus, separators, labels an

Modal dialog (Radix). Blocking overlay for confirmations, forms, or focused tasks. Ships with tonal headers, a confirm pattern, multi-step stepper, and form-dialog layout for richer flows.

Context / action menu (Radix). Supports nested submenus, checkboxes, radios, and keyboard shortcuts. Adds searchable items, a recently-used section, icons + keyboard hints, destructive tone, and trigger-width matching.

Rich preview card that opens when the pointer rests on (or keyboard focus reaches) a trigger, built on Radix HoverCard with the same popover surface styling as Popover. Ships width presets, an arrow option, tunable open/

Inline confirmation popover for destructive or consequential actions. Wraps any trigger; on open shows a tone-aware icon, title, optional description, and Cancel + Confirm buttons. Async onConfirm shows a loading spinner

Floating panel anchored to a trigger (Radix). Used for date pickers, mini-forms, info bubbles. Adds header / body / footer slot composition, search input slot, sectioned items, tonal variants, and a form-popover layout.

Side panel that slides in from an edge (Radix). Use for filters, settings, or detail editors. Adds header / body / footer slots, declarative sub-sections, a dismissable backdrop toggle, and a form-friendly footer with a

Keyboard-shortcuts help dialog built on Radix Dialog. Documents app shortcuts as a grouped two-column list of Kbd keycaps ("mod" renders ⌘ on macOS, Ctrl elsewhere), with a filter-as-you-type search field and a global ho

Product tour / spotlight overlay. Dims the page with an SVG-masked scrim, cuts a rounded spotlight over each step's target, and shows a card with next / back / skip / finish controls and step dots.

Brand-accent swatch row that switches the data-theme accent (orange/blue/green/violet/rose). Controlled, or self-persisting to localStorage. Each swatch renders its real primary token — no hardcoded color.

Odoo/Xero-style module-menu top bar — app launcher, brand, a current-module pill with switcher, a Radix Menubar section-dropdown bar, and a right cluster (+New, ⌘K search, notifications, company switcher, avatar). Dark surface.

Command-first light top bar (Linear / Vercel) — brand, a large centered ⌘K command/search button, and a compact right cluster. Light surface.

Catalogue-style top bar where each trigger opens a wide multi-column mega-menu panel (icon + label + description). Built on Radix Menubar. Dark surface.

Modern SaaS light top bar with a centered segmented-pill nav (active pill filled), brand, and a right cluster (+New, avatar).

Two-row admin top bar — a dark utility row (brand, growing global search, notifications, company switcher, avatar) over a light section-tab row.

Flat text-tab top bar (Slack / Notion) — brand, a scrollable row of flat nav links with an active underline, and a compact right cluster (search, notifications, avatar). Dark surface.

Pill-shaped tag that identifies which build69 app a record belongs to (e.g., CRM, Inventory, HR). Used in cross-app lists.

Mobile-first bottom tab bar with fixed or inline placement, badges, and labels-when-active mode. Pair with mobile pages or sticky surfaces.

Hierarchical location trail with optional ellipsis collapse for long paths. Use when a record sits three or more levels deep in the nav.

Locale selector in menu or select form. Controlled, or drop-in via LocaleController which owns the locale state and renders LocaleProvider. Switching reformats every build69 date/number/currency via Intl.

Application menu bar (File / Edit / View…) built on Radix Menubar. Same item vocabulary and visual language as DropdownMenu — items, checkbox items, radio groups, nested submenus, separators and keyboard-shortcut hints —

Responsive marketing / public-site top navigation (logo + links + CTA + mobile hamburger) — distinct from the in-app Topbar chrome. Pass a logo, an array of links (each may carry children for a dropdown / mega-menu), and

Standalone pagination controls (separate from the DataTable built-in). Numbered links, prev/next, ellipsis collapse, with optional page-jump input.

Primary vertical navigation panel. Sections with collapsible groups, item badges, active highlight, and collapsed/expanded states. The "MA" workspace badge centers correctly in collapsed icon-only mode.

Reusable left-rail navigation with sections, nested items, count pills, optional search, sticky positioning, footer slot, and card / flush visual variants. Lighter-weight alternative to Sidebar for inner panels.

Tabbed content panels (Radix). Use for switching between related views in the same context. Adds pills / underline / segmented / enclosed visual variants, closable + addable tabs, overflow scroll, sticky header, and coun

Light / dark / system color-scheme control over next-themes, in menu, segmented or single-icon form, with an optional brand-accent submenu. Drop into any app bar or settings row.

Persistent app-level top bar with breadcrumb / page title slot, action buttons, and user menu.

Three-tab avatar picker: upload a file, generate from DiceBear HTTP API (10 styles), or paste an image URL. Falls back to hash-tinted initials.

Embla-powered carousel for image galleries, content slides, and onboarding. Horizontal or vertical, optional autoplay, thumbnails, and one-at-a-time scroll.

Two stored documents side by side in a dialog, and ONE decision (fb_56743998): the system-generated original next to the uploaded signed scan, each pane fetching its OWN file with its own loading skeleton, its own error and its own Retry, plus a footer slot for the decision button. It is a compare SHELL around DocumentViewer, not a second viewer: every pane is a DocumentViewerSurface, so the credentialed fetch-then-render, the PDF frame, the image wrapper, the explicit cannot-be-shown state, print and download all behave exactly as in the single-document viewer. DocumentCompareSurface is the dialog-less form for embedding and SSR.

Modal viewer for ONE stored document (fb_781415ea): fetches it WITH credentials, renders a PDF in an iframe, an image inline, and an explicit "cannot be shown here" state + Download for office types. Footer: print through the frame (so the DOCUMENT prints), download under the stored filename, open-in-new-tab, close. Also accepts app-composed markup (srcDoc) for client-built print sheets. DocumentViewerSurface is the dialog-less inner surface for embedding / SSR.

Two-pane file browser: nested folder tree on the left, file table / grid on the right. Drag to move, right-click for actions.

Drag-drop dropzone with click-to-pick fallback, per-file progress, rejection feedback, and a virus-scan placeholder. Three layouts: default panel, single-line compact, and round avatar picker.

Mark up an image — arrow, box, freehand and text over a screenshot — with select / move / recolour / delete of existing marks, undo and redo, and a flattened PNG export at the image's natural size (fb_f8a55acb). Marks are DATA (AnnotationShape[] in natural pixels), not baked pixels, so they can be stored, re-opened and edited later; mark sizes are scaled to the capture's resolution, so a HiDPI screenshot shown small still exports legibly.

Uniform image grid with title / subtitle overlays and configurable aspect ratios. For photo galleries and product catalogues.

Themed markdown renderer with GFM tables, KaTeX math, lazy Mermaid (securityLevel:strict), remote-rendered PlantUML SVG, syntax-highlighted code, and task lists. Output is sanitised via DOMPurify.

Horizontal or vertical rail of image thumbnails to CHOOSE from (fb_fd688b75): one current selection (single), or multi-select where each picked thumbnail carries an order badge — 1, 2, 3 in the order ticked. A <button> per thumbnail with aria-current / aria-pressed, a fixed aspect box that holds the rail's shape while a thumbnail is still being generated, a caption under each image, and roving-tabindex arrow-key navigation along the rail.

Upload component with four visual variants (default panel / compact / avatar / gallery), drag-drop, per-file progress, pause / resume / retry, and DnD reorder.

Gmail-style floating upload manager. Fixed corner positioning, minimisable header (thin progress visible while minimised), persistent across pages, autoCloseOnComplete, notifyOnComplete (sonner toast), four corners, conf

Themed <video> surface with an overlay control bar — play / pause, a seek scrubber with a buffered underlay, an elapsed / duration clock, optional volume and playback-rate controls, and fullscreen. Controls fade on idle during playback (or pin with controlsVisibility="always").

Locks content to a fixed width÷height ratio while the width stays fluid. Built on Radix AspectRatio with preset ratio strings, corner rounding, and automatic media fitting: direct img / video / iframe children are stretc

Max-width centered wrapper with 13 width tokens (xs through 9xl + prose + full) and 5 padding scales. Use as the outer wrapper of any page content area.

The frame around a full-screen editor somebody else wrote — ONLYOFFICE, Collabora, a third-party designer. Thin on purpose: the part every host rewrites is not the iframe but the three states around it. LOADING is a cover OVER the frame, not instead of it, because the editor inside needs the frame present and sized to lay itself out. FAILED comes from a timeout, because a cross-origin iframe fires no error event for a 404, a 500, an X-Frame-Options refusal or a dead host — load simply never comes — and Retry remounts the frame with a fresh key rather than resetting a flag. OBSCURED makes the frame inert so a dialog above it keeps its drag and its focus. It never claims to know whether the editor INSIDE is ready; same-origin policy means it cannot, and onMessage is the seam for the editor's own protocol.

Decorative gradient hero strip — used as the page background of marketing or public landing surfaces, or as a header block.

Platform-aware keyboard hint renderer: shows ⌘ on Mac, Ctrl on Windows / Linux, plus the formatShortcut + useIsMac helpers for shortcut display.

Form label (Radix Label). Click forwards focus to associated input.

Themed anchor with 5 variants, 3 underline modes, an external-link auto-icon, and size + weight tokens. Drop-in replacement for plain <a>.

CSS multi-column staggered grid with responsive column counts and consistent gap. Use for mixed-height media galleries and pin boards.

Surface primitive: elevation 0-5, outlined / inset / tinted variants, hoverable lift. The cheapest framing layer above raw <div>.

Resizable split-pane layout built on react-resizable-panels v4. Compose ResizablePanelGroup → ResizablePanel + ResizableHandle for master-detail workspaces, collapsible sidebars, and IDE-like layouts. Handles are keyboar

Custom-styled scroll container (Radix). Replaces native scrollbars with consistent thin track.

Thin horizontal or vertical divider line (Radix). Adds an optional label, icon, and dashed variant for richer section dividers.

Themed typography component with a 15-step type ramp (display-2xl down to caption-xs), tones, alignment, weight, truncate, and line-clamp helpers.

Screen-reader-only content primitive: renders children in an sr-only span (or merges onto your own element via Radix Slot asChild). A focusable mode reveals the content as a small token-styled pill while focused — the sk

Overlay watermark for confidential documents: wraps children in a relative container and tiles deterministic SVG text (or an image) on an absolutely-positioned pointer-events-none layer above the content. Theme-aware ink

Lower-level MagicUI source primitive backing `AnimatedText.GradientText`. Prefer the `AnimatedText` composite from `@/components/motion/animated-text` unless you need direct access to the underlying API.

Reveals a sentence word-by-word, each word resolving from a heavy blur into sharp focus. Wraps the MagicUI TextAnimate primitive with animation="blurIn" and converts build69's ms-based `delay`/`initialDelay` into TextAnimate's seconds-based duration. Under prefers-reduced-motion it renders the text plainly with no animation.

Reveals a sentence word-by-word with a soft opacity fade, staggering each word by a delay you set in milliseconds. Wraps the MagicUI TextAnimate primitive with animation="fadeIn" and converts build69's ms-based `delay`/`initialDelay` into TextAnimate's seconds-based duration. Under prefers-reduced-motion it renders the text plainly with no animation.

Fills text with a continuously animated linear gradient that flows through the glyphs, driven by a moving 300% background-position. Takes two stops (from/to) or three (from/via/to) using any CSS colour, including build69 tokens like var(--b69-accent). It is the lightest member of the AnimatedText family — it has no motion/react dependency and no reduced-motion branch, since the animation is pure CSS.

Animated counting number for KPI reveals. Spring-driven via motion/react with locale-aware Intl.NumberFormat — integer, currency, percent, or decimal formats with size and tone tokens.

Reveals a sentence word-by-word, with each word climbing up from below the baseline into place. Wraps the MagicUI TextAnimate primitive with animation="slideUp" and applies a tight leading-[1.1] so large display headings do not clip. Under prefers-reduced-motion it renders the text plainly with no animation.

Text laid out around a rotating circular path (MagicUI). Each character is positioned on a ring of a given radius and the whole ring spins continuously. Use for badge seals, vinyl-record labels, or playful hero accents;

Lower-level MagicUI source primitive backing `AnimatedText.FadeInText`, `BlurInText`, and `SlideUpText`. Prefer the `AnimatedText` composite from `@/components/motion/animated-text` unless you need direct access to the u

Types text out character-by-character with an optional blinking cursor, either as a single static string or as a rotating list that types, pauses, deletes and moves to the next phrase. Wraps the MagicUI TypingAnimation primitive with build69 prop names (speed/deleteSpeed/pauseMs). Under prefers-reduced-motion it renders the first string statically instead of looping forever.

Lower-level MagicUI source primitive backing `AnimatedText.TypewriterText`. Prefer the `AnimatedText` composite from `@/components/motion/animated-text` unless you need direct access to the underlying API.

Staggered-entrance wrapper that runs a motion/react variant on each child. Four animations: fade-up, fade, slide-right, scale — respects prefers-reduced-motion.

Lower-level MagicUI source primitive used by `AnimatedText.BlurInText` / `FadeInText` patterns. Prefer the `AnimatedText` composite from `@/components/motion/animated-text` unless you need direct access to the underlying

Animates its child between zero and its natural size, measuring real content with a ResizeObserver so no fixed height or width is needed. `orientation` switches between collapsing height (accordions) and width (sidebars), and the measurement re-runs when the content changes, so dynamic children stay correct. The only transition wrapper that animates layout rather than opacity or transform.

macOS-style magnifying dock (MagicUI). Icons rest at a base size and grow as the cursor approaches, with falloff over distance. Composes a Dock container with DockIcon children that can show a hover tooltip and a "runnin

Cross-fades its child's opacity in and out based on the `in` prop, using a pure-CSS transition driven by inline styles. Supports per-instance duration, delay and easing, plus `unmountOnExit` to remove the child from the DOM after the exit transition finishes. Combine with a `delay` per item to stagger a list or grid entrance.

Fades its child in while scaling it from 0.95 to 1 — a subtle, restrained entrance that reads as 'appearing in place' rather than flying in. A `transformOrigin` prop anchors the scale, so a popover can grow out of the corner nearest its trigger. Gentler than Zoom, which scales all the way from 0.

Horizontal or vertical scrolling banner (pure CSS, MagicUI source). Use for logo strips, news tickers, and tag clouds — the seamless loop is built in.

Elements orbiting a central node on a circular path (MagicUI). Children are spaced evenly around a ring of a given radius and revolve at a configurable speed / direction. Nestable to build multi-ring solar-system / brand

Animated conic-gradient border that sweeps around its contents (MagicUI source, themed with build69 tokens). Use sparingly to mark premium tiles, AI-generated content, or featured pins.

Translates its child in from a given direction while fading it, so content enters with a sense of where it came from. `direction` picks the origin edge (up / down / left / right) and `distance` sets the travel in px. Pair it with Fade and a per-item delay to build a staggered grid entrance.

Scales its child from 0 to full size while fading it in — the most assertive of the transition wrappers, built to pull the eye. Use it where the appearance itself is the message, such as a success tick or a badge landing on a card. For a calmer in-place entrance reach for Grow, which only scales from 0.95.

Color foundation: the complete build69 token palette and the per-theme accent variants. Browse the semantic tokens (primary/accent/status/chart/sidebar/surfaces), see how each accent theme (orange / blue / green / violet

SSR-safe React hook wrapping window.matchMedia. Accepts a CSS media query string and returns whether it currently matches, re-rendering on change. Ships with breakpoint helper (useBreakpoint), pointer-type helper (useIsT

Top-level frame that arranges Sidebar + Topbar + main content. Every full-page screen in build69 wraps in AppShell.

The bar a list shows once rows are ticked: a three-state select-all, the selected count, optional quick selections behind a menu, the actions, and Deselect all. Lifted out because every list was rebuilding it from a Checkbox and some Buttons and each rebuild got a different part wrong. An action declares which selection SIZES it applies to and why it does not apply otherwise, and the reason reaches both the tooltip and the accessible name. While one action runs the bar stays put, that action shows it is working and the rest disable, so a second bulk delete cannot start on rows the first one is deleting.

Polaris-style dirty-form save bar. A portal-rendered bar docked to the top or bottom edge that slides in while a form has unsaved changes, with a Discard action (optional confirm dialog) and a Save action with loading sp

Header for record detail pages: title + key meta fields + status + tabs + actions. Pairs with KVList for the body.

Horizontal toolbar of filter chips, search, and view actions. Sits above a DataTable or list to drive its query.

The tile grid a suite's start page opens on: one tile per application, with an icon, a one-line description, an optional badge and an optional featured tile that spans two columns. Columns step 1 → 2 → the requested count, so the one-column case a phone sees first is the one that is right. A tile with an href is a LINK and one with a handler is a BUTTON, because those are different things to a keyboard and to a middle click; a disabled tile is always a button, since an anchor cannot be disabled and a dead link still navigates on Enter. Carries its own empty and loading states, and loading draws skeleton TILES so the grid keeps its shape.

In-page header with title, breadcrumb, subtitle, status badge, and action buttons. Sits just below the global Topbar.

Full-height page layout patterns for Next.js (App Router). Six live mocks — AppShell (topbar+sidebar+main), StickyHeader, HeaderContentFooter (sticky action bar), SidebarContent (settings/section nav), CenteredColumn (do

Map-and-list property search: a scrollable list of estate cards (photo, name, baht price range, land and floor area, bedrooms) beside a clustered-marker map, with filters and load-more, and ONE selection both panes obey (fb_73127df0). The component owns the list, the filters, the selection syncing and the clustering MATH; the BASE MAP comes from the host through renderMap, because every real tile provider needs an API key and a billing account the consumer owns - so nothing here adds a paid dependency. With no renderMap the markers sit on a plain themed surface that still zooms, selects and clusters.

Predicate builder: repeating rows of field / operator / value joined by and / or, with add and remove per row and one level of grouping (fb_3e0ed14a). The control behind "only send this automation when Department is HR and Status is not Draft". Rules are DATA - a JSON-serialisable ConditionRuleSet, controlled or uncontrolled - and ship with a dependency-free evaluator (evaluateConditionRuleSet) that runs the saved rule against a record, on the server if that is where the automation runs.

Drag-and-drop form-builder canvas (dnd-kit). Used inside the form designer to compose a public form from a palette of field types.

Composite of Label + Input/Select/Textarea + description + error. The standard atom for any form row in build69.

Visual + semantic grouping of related FormField rows under a heading and optional description. Use for long forms with logical sections.

Branded cover/hero block for public-facing forms (lead capture, RSVP, survey). Provides logo, headline, sub-copy, and decorative gradient.

Multi-step form shell composing the Stepper: clickable step header, WizardStep content panels, and a Back/Next/Finish footer. Next/Finish run the current step's validate() (sync or async) — a string result renders as an

Sticky bottom bar for the build69 AI agent: text input + quick prompt chips + streaming response slot + tool call chips.

Threaded chat conversation view: bubbles with avatars, timestamps, sender grouping, typing indicator, attachment slots.

Threaded discussion component — nested replies, reactions, role badges, rich-text bodies and score/sort controls for internal comment feeds.

Classic three-column email layout: folders pane, message-list pane, reading pane. Resizable panels.

Tile representing a third-party integration (connect / configure / disconnect actions). Used in settings > integrations grids.

Drag-and-drop board with columns of cards (dnd-kit). Use for task pipelines, sales stages, kanban workflows.

Single step block for the workflow / automation designer (trigger / condition / action). Composes into a linear or branching workflow.

Slim full-width promo / announcement / cookie banner strip. Copy-paste block; baked-in demo content (edit the JSX to customise).

Bento-grid section — mixed-size feature cards arranged in an asymmetric grid. Copy-paste block; baked-in demo content (edit the JSX to customise).

Blog / article listing section with cards, featured posts and sidebars. Copy-paste block; baked-in demo content (edit the JSX to customise).

Contact section pairing a message form with details / map. Copy-paste block; baked-in demo content (edit the JSX to customise).

Call-to-action section that converts — bold headline plus prominent buttons. Copy-paste block; baked-in demo content (edit the JSX to customise).

Frequently-asked-questions section built around accordions and Q&A columns. Copy-paste block; baked-in demo content (edit the JSX to customise).

Product feature showcase section — icon grids, alternating media rows, tabs and checklists. Copy-paste block; baked-in demo content (edit the JSX to customise).

Site footer with link columns, newsletter, legal row and social icons. Copy-paste block; baked-in demo content (edit the JSX to customise).

Above-the-fold hero section for landing/marketing pages — headline, subcopy, CTAs and a visual. Copy-paste block; baked-in demo content (no data props — edit the JSX to customise).

Trusted-by logo wall showing customer / partner brand logos. Copy-paste block; baked-in demo content (edit the JSX to customise).

Email-capture / newsletter sign-up section with inline and card layouts. Copy-paste block; baked-in demo content (edit the JSX to customise).

Pricing section with tier cards, billing toggles and comparison tables. Copy-paste block; baked-in demo content (edit the JSX to customise).

The front door of a property portal (fb_97d176de): a headline over a search FORM whose first control is the kind of home as a keyboard-operable tab row, then a buy-or-rent switch, a text box, and a row of shortcut chips each carrying a LIVE count the host supplies. It holds no results — it builds a query and hands it over, so a home page renders it before a single listing has been fetched (PropertyMapSearch and the PropertySearch page are the results surface). It is a real <form> with named fields, so the search works with JavaScript off; onSearch upgrades that to client navigation. The counts are never invented: a chip with no figure prints none, a figure still in flight shows a placeholder, and a failed count fetch drops every number and offers a retry.

Metrics / stats band highlighting headline numbers (users, uptime, revenue). Copy-paste block; baked-in demo content (edit the JSX to customise).

Team / people section with portrait cards, bios and social links. Copy-paste block; baked-in demo content (edit the JSX to customise).

Social-proof section showing customer quotes, ratings and logos. Copy-paste block; baked-in demo content (edit the JSX to customise).

User account page — overview, profile edit, security/privacy, tabbed dashboard and activity log. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Admin console page — overview, user management, roles/permissions, org management and system health. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Cross-product launcher home — an active-company KPI header, a 'Your apps' tile grid, quick actions and a 'needs attention' rail. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Audit log / activity page — table, timeline, with-filters, detail and security layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Jira-parity project page with the full Planning sidebar — Summary, Timeline, Backlog and Board views. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example workspace-home page: PageHead + starred board cards with mini column previews + workspace-grouped board grids + collapsed recently-closed rail. Reference for any boards/projects directory screen.

Booking / appointment page — multi-step, service picker, calendar slots, provider select and confirmation. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example calendar page using BuildCalendar at full height with a sidebar of calendars.

Calendar page — month, week, day-agenda, scheduler and team-availability layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Trello-parity card back (the 2024+ two-column redesign) — cover, checklists, activity and sidebar actions over a dimmed board. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example chat page: conversation list + Chat thread + agent suggestions side panel.

Customers / case studies page — logo walls, case study grids, testimonials and stats heroes. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Application dashboard page — overview, analytics, finance, sales and project-ops layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example dashboard: StatCard row, two-column charts + activity, recent records table. Reference for building your own dashboard.

Composed example detail page: DetailHead + Tabs + KVList side panel + Timeline. Reference for any "view a record" page.

Composed example promotions-admin page: commerce back office with summary StatCards, All/Codes/Automatic tabs, a discounts DataTable, and a create-discount Sheet form.

Composed example email client page using EmailThreeColumn at full height.

Composed example file manager page using FileBrowser at full height.

Files / document manager page — grid, list, tree, browser and upload layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example timeline page: PageHead + FilterBar toolbar (zoom, Today, Baseline switch) + grouped GanttChart with a task-detail side panel. Reference for any project-scheduling app.

Inbox / messaging page — three-pane, email client, chat messenger, unified and support-ticket layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example inventory page: commerce back-office shell + stat strip + DataTable stock grid with inline on-hand adjusters and OK/Low/Out flags + incoming purchase orders. Reference for any stock-control screen.

Jira-parity issue view — breadcrumb with the issue key, description, child issues with a progress bar and an Activity feed. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example board page: PageHead + FilterBar + Kanban. Reference for any pipeline board.

Composed example list page: PageHead + FilterBar + DataTable + ListMeta. Reference for any "browse records" page.

Composed example "my day" page: pinned cards row + tasks + calendar slice + agent suggestions.

Notifications page — feed, tabbed, panel, with-filters and grouped layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example HR org-chart page: StatCard strip + FilterBar over a recursive position-hierarchy diagram with token-drawn connectors, team identity chips and a dashed hiring node. Reference for people/HR hierarchy screens.

Composed example planning-poker estimation page: story-queue rail, current-story panel with acceptance criteria, a players table of hidden/empty/revealed vote cards, and a selectable estimate deck with computed consensus/spread reveal outcomes.

Composed example portfolio page: StatCard health summary + FilterBar + program-grouped project rows, each program fused with a shared-axis TimelineHorizontal mini-Gantt.

Composed example point-of-sale till page: product grid + open cart + payment pad. Reference for retail POS surfaces.

Composed example products-admin page (Shopify parity) for a commerce back office: status tabs with counts, search + filter chips, and the pro DataTable with SKU tiles, status badges, low-stock warnings, bulk actions and a Sheet product editor.

Public / user profile page — classic, social, resume, team-member and freelancer layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example delivery-analytics reports page: KPI StatCards plus burndown / velocity / cumulative-flow charts (agile view) or a baseline-slippage DataTable with milestones (schedule view), switched by a view prop.

Map-based property search PAGE: heading, result summary and saved-search action over a PropertyMapSearch - a scrollable list of estate cards beside a clustered-marker map, with filters and one shared selection (fb_73127df0, condo69 house menu). Full-page template with baked-in demo projects (Bangkok and Nonthaburi estates, baht price ranges, land in square wah), every experience state wired - loading, empty, error, 403 and 404 - and the base map still supplied by the host through renderMap.

Composed example public-facing form page: PublicFormCover hero + FormSection body + thank-you state.

Composed example sprint-retrospective board: Went well / To improve / Action items columns with vote pills, anonymous notes, theme grouping and owner-assigned action items under a timer-chip PageHead.

Jira-parity roadmap — the Timeline view as a full page, with epics and progress-filled bars on a Months / Quarters time axis. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Search results page — list, tabbed, grid, with-filters and global command layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Settings page — sidebar layout, tabbed, profile form, account/security, notifications and integrations. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example settings page: sidebar of sections + scrolling FormSection blocks. Reference for any preferences page.

Composed example active-sprint page (Jira Active-sprints parity): sprint header card with goal, day countdown, story-point Progress and participants above a four-column Kanban scoped to the sprint.

Composed example daily-standup page: PageHead day switcher, submitted/awaiting status strip, a grid of per-person check-in cards (Yesterday/Today issue bullets, destructive blocker callouts, out-of-office states) and a parking-lot topic list.

Composed example commerce CRM page: stat strip + segment FilterBar + customer DataTable with a slide-in customer profile Sheet. Reference for any merchant back-office customer list.

System status / uptime page — all-operational, with-incident, component list, uptime history and incident history layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example workspace-members admin page: PageHead + StatCard strip + members DataTable with inline role Selects and icon row actions + Pending invites / Guests sections. The admin counterpart of InviteAccept.

Composed example workflow / automation designer page: palette + RuleStep canvas + properties side panel.

Composed example workload page: PageHead with week-range switcher + FilterBar + six-week person-by-week allocation grid with utilisation tints and over-allocation flags + unassigned pool with suggested assignees. Reference for any resource-allocation view.

Account / workspace setup page for profile and workspace configuration during onboarding. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Password-reset request page that captures an email to send a reset link. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Team-invite acceptance page where an invitee joins a workspace (optionally creating an account). Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Sign-in page with email/password, SSO buttons and "forgot password" link. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Composed example of a build69 login screen (split layout with brand panel + form). This is a reference, not a reusable atom — copy it as the starting point for your own auth flow.

Sign-out page covering the confirm prompt and the post-logout state. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

First-run onboarding page — multi-step wizard, checklist and split-welcome flows. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

One-time-code verification page for email / SMS / authenticator 2FA flows. Full-page copy-paste template; baked-in demo content (a few optional display props such as last4).

Account sign-up page with form, benefits panel and multi-step variant. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Set-new-password page reached from a reset link, including an expired-link state. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Email-verification page covering the link-sent, enter-code and verified states. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Billing page — overview, plan management, payment methods, invoice history and usage metering. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Shopping cart page — classic, slide-over, with-suggestions, empty and with-coupon layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Checkout page — two-column, multi-step, one-page, guest and express layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Invoice / document view page — standard, minimal and detailed invoices plus quotation, receipt, credit note and PO documents. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Order confirmation / thank-you page — classic, with-tracking, receipt and thank-you layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Orders management page — table, filters, order detail, card grid and status tabs. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Full pricing page — tier grids, annual toggles, comparison tables, calculators and FAQ. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Product detail page — classic, gallery, with-variants, with-reviews and bundle layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Products / catalog page — grids, category browsing, bundles, comparison and ecommerce layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Subscription management page — overview, change plan, usage, payment method and invoices. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Wallet / balance page — overview, transactions, top-up, withdraw, cards and transfers. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

About / company page — mission, story timeline, values, team and stats. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

API reference / developer docs page — three-column docs, endpoint reference, auth, webhooks and SDK layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Blog index / article listing page — three-column grid, magazine, list rows and sidebar layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Blog post / article page — classic, with-TOC, minimal, wide-hero and with-sidebar layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Careers / jobs page — hero, perks, open roles, departments, culture and job detail layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Changelog / release notes page — timelines, cards, markdown and subscribe layouts (plus roadmap variants). Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Coming-soon / pre-launch page with countdown and email capture. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Community / forum page — feed, categories, thread detail, questions and leaderboard layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Comparison / vs page — two-column, full feature tables, migration and scorecard layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Full contact page — split info, map, departments, office locations and sales enquiry forms. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Request-a-demo page — booking forms, calendar slots, with-video, multi-step and enterprise layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Long-form developer documentation page — a contents rail that follows the reading position, numbered steps, copyable code blocks, reference tables that stay readable on a phone, and note / warning / danger callouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Download / get-the-app page — hero, app-store badges, platform grids, QR codes and release notes. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Transactional / marketing email templates — welcome, verify, receipt, invoice, newsletter and notification layouts. Copy-paste blocks; baked-in demo content (edit the JSX to customise).

Empty-state page templates — empty inbox, no results, no data, error, no access and empty cart. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Events / webinars page — grids, lists, calendar views, speakers and webinar registration. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Full features page — hero grids, alternating stories, tabbed product tours, bento showcases and comparisons. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

403 forbidden / access-denied page for unauthorised requests. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Gallery / portfolio page — masonry, grids, filtered, quilted and lightbox layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Help center / docs page — home, category grids, article docs, knowledge base and search. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Integrations / marketplace page — grids, by-category, search, marketplace and connected layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Full landing pages composed from sections — SaaS classic, product launch, startup, conversion-focused and enterprise layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Legal document pages — terms of service, privacy policy, cookie policy, refund policy and acceptable-use. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Scheduled-maintenance / downtime page with optional progress indicator. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

404 not-found error page with helpful navigation back to safety. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Press / newsroom page — hero, release lists, coverage grids, media kits and awards. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Referral / invite-a-friend page — hero, dashboard, how-it-works, share cards and rewards. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Reviews / ratings page — overview, grids, summaries, G2-style and write-review layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Product roadmap page — kanban columns, quarter timelines, voting boards and now/next/later layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

500 internal-server-error page for unexpected failures. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Services page — service grids, process steps, tiers, consulting and booking CTAs. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

HTML sitemap page — column lists, cards, visual trees, by-category and search layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Solutions page — by-industry, by-role, by-size, use-case grids and solution detail layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Success / confirmation page for completed actions (order, verification, payment). Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Survey / feedback page — multi-step, single question, NPS, CSAT and feedback-form layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

Waitlist / early-access page — hero, gradient, referral, split and countdown layouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).