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
03Layout
08StackVertical 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.
ContainerCentered, 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
33ButtonButton 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, colored panel that stacks its content and remaps text tokens so muted copy stays legible on dark backgrounds.
BadgeA small status pill — the data layer's vocabulary for state: RAG delivery health, on-track / 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.
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 checkbox — a 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 — the box itself doesn't carry one.
SliderControlled single-value slider with token track, fill, thumb, and accessible value formatting.
DialogA centered modal dialog — a token-styled wrapper over Base UI's Dialog. 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.
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: content is data, the trigger is children. Use it for supplementary hints only — never put essential or interactive content in a tooltip (it's not reachable on touch).
ToastTransient, non-blocking confirmations — "Saved", "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.
BreadcrumbsA semantic breadcrumb trail — <nav><ol> with aria-current="page" on the last item. Takes flat { label, href } data (root first, current page last); intermediate items 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.
123...
PaginationPresentational pagination primitives for URL-owned page links, previous/next controls, and ellipses.
AX+3
AvatarA square avatar — a token-styled wrapper over Base UI's Avatar. Squares, not circles: sharp corners are the brand. Renders src when it loads and falls back to the fallback slot (initials/glyph) otherwise. AvatarGroup overlaps a row, collapsing past max into a trailing "+N" tile.
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: full-width and 1px tall when horizontal, full-height and 1px wide when vertical.
Empty stateThe centered "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
09Audio 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.
LogosTwo-column logo section that pairs a text slot with a logo composition slot.
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 tagline, title, description, and up to two action slots, stacked with size-aware spacing.
Patterns
08Audio 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 loopAn infinite, seamlessly looping horizontal strip of logos passed as data.
Multimedia blockA media carousel paired with a caption tile — flat media data, text-tile variants and surface enums, all CMS-serializable.
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 action slots — on a colored background.
Sections
09Careers headerCareers page header — title, section links, media and a presentational search field, all flat CMS-serializable data.
HeroFull-bleed, viewport-height media stage that cross-fades between slides, with the ALIX wordmark overlaid on the column split.
Media banner blockFull-width media banner with flattened image/video fields and a fixed-height enum — spreads straight from a CMS query.
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 — 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. CMS-serializable.
Text and media blockThe workhorse text-and-media section — text-tile data beside an image or video frame, with surface enums and ratios. CMS-serializable.
Text and text blockTwo-column text section of paired text tiles, with surface enums and min-height tokens. CMS-serializable.
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