The component library.
Every component is live: rendered from the registry, not screenshotted, with its props and an install command. Composed with slots, themable, and sharp-cornered by default. Install any one with the shadcn CLI.
Foundations
03The base language: type, the logo, and the primitives everything else is built on.
Layout
08Structural primitives that carry the spacing and width tokens, like Stack, Grid and Container.
StackVertical flex-column primitive that spaces children with a gap from the shared token scale.
InlineHorizontal flex-row layout primitive with a token gap, alignment, and wrapping.
GridResponsive equal-width column grid that collapses to a single stacked column on small screens.
ContainerCentred, max-width content container that caps line length and page gutters.
Section wrapperSemantic section wrapper that groups blocks without adding spacing or visual treatment.
Aspect ratioLocks its content to a fixed aspect ratio and clips overflow for framing media at a consistent shape.
Media bannerFull-width, fixed-height media frame for a full-bleed banner image or video between sections.
Cross fadeReduced-motion-aware slideshow primitive that fades between absolutely stacked children.
Components
35Self-contained UI controls. They compose through ReactNode slots, so any child can be passed in.
ButtonButton with variants and sizes, plus icon and loading slots.
Icon buttonSquare, icon-only button that reuses the button variants and requires an accessible label.
TaglineSmall labelled eyebrow chip with ghost, outline, and link variants and icon slots.
SurfacePadded, coloured panel that stacks its content and remaps the on-surface tokens (foreground, muted, and links on dark surfaces) so content stays legible on any coloured background, in both themes.
BadgeA small status pill, the data layer's vocabulary for state: RAG delivery health, on-track or at-risk, or a category tag in a table cell.
12%
DeltaA compact trend indicator: a directional arrow plus a change value. Colour (intent) is decoupled from direction, so an inverted metric like falling attrition reads as good.
24.8
StatA single metric rendered as a typographic unit: an eyebrow label, a large value, and an optional trend line. The atom every KPI surface is built from.
SparklineA tiny, axis-less, label-less trend chart: the shape of a series at a glance, sized to sit inside a StatCard, a table cell, or beside a Stat.
ChartA responsive, token-themed wrapper around any Recharts chart. ChartContainer provides labels + colours from a ChartConfig and injects the --color-<key> variables; the tooltip and legend read the same config.
Panel chartThe chart a generated surface is allowed to ask for: one serializable { type, series } object in, one finished line or bar chart out. Ramp colours, grid, tooltip and legend are fixed. Line or bar is the only choice the data gets to make.
Waterfall chartA bridge/waterfall chart: a dumb painter over pre-computed data. Totals anchor in navy, movements read as signed increases and decreases against them. Colour, ordering and labels are the renderer's decisions; the caller supplies only the resolved bars and the y-domain.
PanelThe dashboard workhorse: a bordered, sharp-cornered card with an optional divided header (eyebrow, title, description, actions slot) and footer, wrapping any chart, table, or stat cluster.
2.4k8%
Stat cardA single KPI on a bordered card: a Stat (label, value, trend) over an optional Sparkline and footnote. The unit a dashboard's headline-metrics row is built from.
Data tableA semantic, sortless table driven by flat columns + rows props. Each column owns a cell render function, so status pills, trend numbers, and sparklines compose into cells while the table stays a thin, opinionated grid.
Dashboard shellThe application frame for a dashboard: a fixed left sidebar (brand + nav + footer) and a sticky topbar (title + actions) wrapping a scrolling content area. It turns a grid of Panels and StatCards into a product, not a page.
InputThe system's text input: a thin, token-styled wrapper over Base UI's Input. Sharp-cornered, with the shared navy focus ring, and a destructive treatment that turns on automatically inside an invalid Field. Wrap it in a Field for a label, description, and error text.
Input groupComposed input shell for inline icons, text, and button slots around an Input or Textarea.
TextareaA multi-line text input, styled to match Input: sharp corners, the shared navy focus ring, and the automatic destructive treatment inside an invalid Field. A plain styled <textarea> (Base UI has no textarea primitive), so every native textarea prop is forwarded.
FieldThe label + control + help/error wrapper that every form row is built from. It generates an id, associates the <label>, wires aria-describedby to the description/error, and flips the control into its invalid state when error is set, so any control that accepts id/aria-* (Input, Textarea, Select) gets accessible labelling for free. label/description/error are data props; the control is a composition slot.
SelectA single-select dropdown: a token-styled wrapper over Base UI's Select. Options are flat { value, label } data, so a CMS/query result drops straight in; the trigger matches Input's height and focus ring, and picks up the invalid treatment inside a Field. For a free-text-filterable list, reach for Base UI's Autocomplete/Combobox directly.
CheckboxA token-styled wrapper over Base UI's Checkbox. Sharp-cornered, navy when checked, with the shared focus ring; supports the indeterminate state (a dash) for "some selected" headers. Pair it with a <label> for an accessible name, because the box itself doesn't carry one.
SliderControlled single-value slider with token track, fill, thumb, and accessible value formatting.
DialogA centred modal dialog, wrapping Base UI's Dialog with the system tokens. Dialog is the state root (open, defaultOpen, onOpenChange, modal); the trigger and close buttons render your element via Base UI's render prop, so a Button stays a full Button. The dialog never mirrors its API.
DrawerA side-sheet drawer built on the same Base UI Dialog primitive as Dialog, but the popup is a full-height panel that slides in from the edge. Drawer is the state root; trigger and close render your element via Base UI's render prop, so a Button keeps its full API.
PopoverPortalled popover surface for small contextual content anchored to a trigger. The popup is role="dialog"; a PopoverTitle inside names it (aria-labelledby), and PopoverDescription sets aria-describedby.
MenuDropdown menu primitives for action items, links, radio groups, separators, and submenus.
TooltipA hover/focus tooltip: a token-styled wrapper over Base UI's Tooltip that collapses the Root/Trigger/Portal/Positioner/Popup anatomy into one ergonomic call, where content is data and the trigger is children. Use it for supplementary hints only. Never put essential or interactive content in a tooltip; it is not reachable on touch.
ToastTransient, non-blocking confirmations such as "Saved" or "Request sent". ToastProvider wraps a subtree so it can raise toasts and renders the bottom-right viewport that stacks them; any descendant calls useToast() to add one. Not a place for actions the user must take: use a Dialog for that.
TabsAn underline tab bar: a token-styled wrapper over Base UI's Tabs. Give Tabs a defaultValue (or value/onValueChange to control it) and compose TabsList + TabsTab for the bar and TabsPanel for each panel. The selected tab is underlined by a bg-primary indicator that slides between tabs.
BreadcrumbA semantic breadcrumb trail: <nav><ol> with aria-current="page" on the last item. BreadcrumbBasic takes flat { label, href } crumbs (root first, current page last); intermediate crumbs with an href are links, the current page is plain text. Data, not slots, because a trail is uniform path data a CMS/router produces directly. The primitive parts are exported for anything bespoke.
123...
PaginationPresentational pagination primitives for URL-owned page links, previous/next controls, and ellipses.
AX+3
AvatarA circular avatar built on Base UI's Avatar. Renders src when it loads and falls back to initials derived from name otherwise. AvatarGroup overlaps a row of avatars from flat data.
ProgressA determinate progress bar: a token-styled wrapper over Base UI's Progress. Base UI sizes the indicator from value/max; this owns the surface (sharp corners, muted track) and an optional label/value row.
SeparatorA hairline rule: a token-styled wrapper over Base UI's Separator. Stretches to fill its axis, so it is full-width and 1px tall when horizontal, full-height and 1px wide when vertical.
Empty stateThe centred "nothing here yet" placeholder: an empty table, a cleared filter, a fresh workspace. title/description are data (read-only copy); icon/action are composition slots so the glyph and CTA keep their own APIs.
Elements
08Small composed pieces built from components, like section titles, cards and list items.
Audio playerControls-less audio element with play/pause, seek, volume, download, and playback-speed controls.
Button groupTwo-action row that owns ordering and spacing while actions stay slotted.
Content cardTeaser card for a piece of content, with media, tagline, title, and excerpt.
AK
Employee cardPerson card with role, location, headshot fallback, and contact/profile links.
List itemList leaf that renders either a navigation row or a controlled filter tag.
Media carouselStateful media carousel with full-bleed slides, dot controls, and an optional caption slot.
Section linkRuled list of full-width links with trailing arrows for section-level navigation.
Section titleAn optional eyebrow (tagline or breadcrumbs), title, and description, stacked with size-aware spacing.
Patterns
09Repeatable content shapes such as post grids, people tiles and lists. Composed through slots.
Audio tileAudio tile for a briefing or podcast module, fed by CMS-serializable audio data and boolean display flags.
ListNavigation and filter lists from flat item data. A `variant` enum picks link rows or filter tags; interactive state stays with the parent.
Logo carouselTwo-column proof section: a text tile beside an infinite LogoLoop strip. Both sides are flat data (a TextTile record and LogoLoop props), so the pairing spreads straight from a query while the pattern owns the layout.
Logo loopAn endlessly looping horizontal strip of logos passed as data, with no visible join.
Multimedia blockA media carousel paired with a caption tile: flat media data, a text-tile caption, and surface enums, with every layout decision pre-made.
People grid tilePeople-directory tile: searchable, paginated cards from flat employee records, CMS-serializable throughout.
Post gridThe insights index: fixed row choreography over flat content-card records, paginated by URL. CMS-serializable.
Post row blockA row of one to four content cards from flat article records, with a column-count enum. CMS-serializable.
Text tileSurface tile built around a section title (tagline, title, description, and up to two actions) on a coloured background. The tile picks the button variant for its surface.
Sections
08CMS-ready page blocks. They take flat, serialisable data rather than slots, so a page drops one straight in from a CMS.
Careers headerCareers page header: title, section links, media and a presentational search field, all flat CMS-serializable data.
Home headerFull-bleed, viewport-height media stage that cross-fades between slides, with the ALIX wordmark drawn so its X lands exactly on the central line: the 50% split the whole page hangs from.
People gridThe people directory section: flat person records with tag filters and client-side faceted filtering.
A
C
F
Services indexA-Z services directory that sorts flat link records into responsive letter groups. CMS-serializable.
Services listTwo-column services section where hovering a link previews it over the opposite column. Built from flat link, media and text-tile records.
Text and audio blockText-and-audio section: a text tile paired with an audio tile, positioned right or below.
Text and media blockThe workhorse text-and-media section: a text tile beside an image or video frame, or a split tile carrying its own image, with surface enums and ratios.
Text and textTwo-column text section of paired text tiles, with surface enums and min-height tokens. Each column is one TextTile record (a surface, a SectionTitle's content, and a buttonGroup), so a CMS query spreads straight in.
VI
01Visual-identity artifact renderers for everything off the website: covers, dividers, social tiles. They render a fixed white canvas from flat, serialisable config, so a generated brief drops straight in.
Deck
09The presentation system: nine slide layouts on the VI canvas, from title and section break to statement, quote, key points, table, stats, stages and the quantified waterfall bridge. Each takes flat, serialisable data, so a generated deck maps straight onto them.
Title slideThe deck cover, drawn by the VI canvas: the side-by-side lockup by default, the full-bleed art cover when imagery is supplied. Client, date and the classification caveat ride the canvas's own footer row.
03
SectionBreak slideThe chapter turn on the VI canvas: a big zero-padded index and a short title on the line, the canvas otherwise clear. Deck chrome rides the meta row.
Statement slideOne idea alone at display scale on a brand surface (navy by default). The line the room should repeat afterwards; any attribution joins the meta row so the statement stays alone on the field.
Quote slideA fieldwork voice at display-md on sand, attributed by role and place beneath: evidence from the ground, not authorship. Never a name; never the deck's own claim.
KeyPoints slideVerdict-first points in the content region of the VI canvas: a hairline-ruled grid that picks its own column count from the data (two columns up to four points, three beyond). The author never chooses a layout.
Table slideA comparison matrix in the content region of the VI canvas, hairline-ruled. The first cell of each row reads as the row label in canvas ink; the value cells read muted, so the eye scans the label column first.
14
14
14
Stats slideThe executive-summary band on the VI canvas: two to four headline figures in a row, each a hairline-ruled value, label and optional support line. The number is the design: no colour, delta or icon decorates it, and values arrive pre-formatted.
01
02
03
Stages slideA slide title over a horizontal run of numbered stages on the VI canvas. Left-to-right order is the timeline itself, so there are no arrows or connectors; the ordinal is computed and zero-padded, never authored.
Waterfall slideThe quantified bridge on the VI canvas: title top-left, the waterfall chart owning the right region full-height. The schema gives an opening level, signed movements, and a closing label; the closing value is computed here (start + Σ steps), so the bridge always reconciles.
Report
01The document system. Sections argue in prose and show their evidence as exhibits, every metric resolved and pre-formatted from one fact base.
Dashboard
01The monitoring surface. One serialisable object becomes KPI tiles, charted panels and a tracker table, all drawn from registry components.
Designed, next up
09Specified in the design file, scheduled for the build. Listed so the system's edge is visible: what you see above is everything that ships today.
NavbarSections
FooterSections
Page header navigationSections
Navigation boxesSections
Bio headerSections
Rich text tilePatterns
Quote tilePatterns
Footer bandPatterns
Badge groupElements