Layout

16 pieces

One dimension, two dimensions, or something else?

One dimension (a row or a column)

How much control do you need?

A stack with a gap (usually vertical)Stack Full flexbox control (direction / justify / align)Flex A horizontal cluster (buttons, chips) that wrapsGroup

Two dimensions (a grid)

How much grid control?

Equal-width columns, responsive countSimpleGrid Full grid control (spans, start, order)Grid

Centering one thingCenter Lock a child to a fixed width:height ratioAspectRatio User-draggable split panelsResizable A zero-opinion wrapper (would otherwise be a naked <div>)Box A spacer between thingsSpace A page-level width + horizontal-padding wrapperContainer A page vertical-rhythm sectionSection A whole-page frame (sidebar / header / scroll regions)The page frame itself — full-page arrangements (sidebar shell, fixed-height dashboard, auth split, minimal) are curated as recipes; see Templates.AppShell

Compare

Component	Axis	Use for
Box	—	zero-opinion wrapper — the sanctioned naked-element escape hatch
Flex	1D	explicit flexbox (direction / justify / align / wrap)
Stack	1D	gapped stack (HStack / VStack variants)
Group	1D	horizontal cluster with wrap / position
Center	—	center a single child
Grid	2D	full grid (spans, start, order)
SimpleGrid	2D	equal columns, responsive cols
Container	page	max-width + inset wrapper
Section	page	vertical page rhythm

Rules of thumb

All layout primitives take responsive props (gap={{ base, md, … }}) and are RSC-safe — no "use client".
Box vs Container: Container injects mx-auto + a max-width + the page gutter; Box is the neutral one (zero classes of its own).

16 : 9

Zero-opinion wrapper

Centered

Page shell

Logo

Account

Flex

Red

Amber

Green

Teal

Blue

Violet

Grid

ConcreteTerrazzoOakBrassLinen

Group

object-cover

MediaFrame

Sidebar

Canvas

ResizablePanelGroup

Alabaster

Bone

Chalk

Dune

Ecru

Flax

Greige

Ivory

Khaki

Linen

ScrollArea

Materials

Vertical rhythm between grouped blocks.

Section

Catalog

Porcelain & Stone

Rectified porcelain and honed stone, filtered to in-stock finishes.

SectionHeader

Overview

Specifications

Availability

Separator

SimpleGrid

Header

Footer

Space

First

Second

Third

Stack

Typography

5 pieces

import { Code } from
  "@desk/ui/components/code";

Code

The library of materials

Heading

⌘K

Kbd

High-quality materials sourced from sustainable suppliers, each documented with finishes, dimensions, and availability.

Text

Search the material library

VisuallyHidden

Actions

6 pieces

Forms

29 pieces

Free-text entry, or choosing from options?

Free-text entry

What surrounds the field?

A plain single valueInput Addons / icons / buttons wrap it (currency, prefix / suffix, inline button)InputGroup A search field (icon + clear button + shortcut)SearchInput

Choosing from options

What kind of chooser?

Type-to-filter, large or async lists, virtualizedCombobox Styled dropdown (groups, separators, icons)Select The real native <select> (mobile, minimal)NativeSelect 2–5 mutually exclusive options, all visible (mode / view switcher)Content panels → Tabs; URL navigation → TabNavigation; multi-select or deselectable chips → ToggleGroup.SegmentedControl

Compare

Component	Kind	Reach for it when
Input	text	a plain single-line value
InputGroup	text	addons / icons / buttons wrap the field
SearchInput	text	search with icon + clear + shortcut
Combobox	choice	searchable / filterable, big or async lists
Select	choice	styled dropdown, grouped options
NativeSelect	choice	native select semantics / simplest case
SegmentedControl	choice	always-one-selected visible mode switcher

Rules of thumb

For discrete controls reach for Checkbox / Radio / RadioGroup / Switch / Toggle / Slider / SegmentedControl instead.
Wrap any labelled control in Field to wire up its label, description and error.

July 2026

Calendar

In-stock only

Checkbox

Matte finish

Non-reflective, fingerprint-resistant.

CheckboxCardGroup

Notify me on restock

Get an alert when this material is back in stock.

🌐

Terrazzo — Veneto

Marble — Carrara

InputCard

per m²

InputGroup

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

InputOTP

Lead time (weeks)

Label

LocationInput

Available from

Delivery year

🌐

Matte finish

Sample swatch

A5 card, ships in 2 days.

Full sheet

1.2 × 2.4 m, made to order.

RadioCardGroup

Standard shipping

Express shipping

Freight

⌘K

Only show in-stock

12 pieces

Compare the terracotta finishes, then read the care guide before ordering samples.

Anchor

Glazed terracotta with a matte, hand-finished surface.

200 × 200 mm · 10 mm thick · PEI III wear rating.

Three verified suppliers across the EU and UK.

Tabs

Overlays

13 pieces

Is it triggered by hover, or by click / programmatically?

Hover

How much content does it carry?

Just a short text labelTooltip Rich content (card, preview, stats)HoverCard

Click / programmatic

How does it sit on the page?

Anchored to its trigger — dismiss on outside-click / EscMenus → DropdownMenu; command palette → Command.Popover

A centered modal that blocks the page until dismissed

What kind of modal?

Confirm / warn / destructive decision (Cancel + Action)AlertDialog General modal (form, details, footer actions)Dialog Should animate out of its trigger elementMorphDialog

Slides in from an edge of the screen

Which edge behaviour?

Bottom sheet, gesture / drag to dismiss (mobile-ish)Drawer Generic edge panel with nested panels + controlled state, modal or non-modalSidepanel A simpler edge overlay for a focused form / settingsSheet

Compare

Component	Trigger	Blocks page	Best for
Tooltip	hover / focus	no	one-line hint on an icon / control
HoverCard	hover	no	rich preview on hover
Popover	click	no	anchored floating panel, dismiss on outside
Dialog	click / prog	yes	modal form / details with header + footer
AlertDialog	click / prog	yes	confirmations, warnings, destructive actions
MorphDialog	click	yes	modal that morphs from its trigger (shared-layout)
Sheet	click / prog	yes	edge panel for a focused form / settings
Drawer	click / prog	yes	bottom sheet with gesture / drag dismissal
Sidepanel	click / prog	either	side panel with nesting + modal / non-modal modes

Rules of thumb

Destructive confirmations should always be an AlertDialog with a destructive action — never a plain Dialog.

AlertDialog

ContextMenu

Dialog

Filter materials

Narrow the catalog by finish and origin.

DrawerPrimitive

Material

DropdownMenu

Terrazzo Bianco

Fibonacci Stone

Recycled marble aggregate in a warm white matrix — matte honed finish.

HoverCard

MenuItem

Sample request

A cut sample of Terrazzo Bianco ships to your studio in 3–5 days.

MorphDialog

Finish

Applies to every swatch in this palette.

Popover

Terrazzo Bianco

Scrim

Material details

Specification, finish, and availability for the selected swatch.

Origin · Italy

Sheet

Palette

Coastal Kitchen

12 materials · updated today

Sidepanel

Copy hex · #E8E4DA

Tooltip

Feedback

13 pieces

Is it a transient notification (appears, then auto-dismisses)?

Yes — transientToast notifications.Sonner

No — persistent and inline

What is it, exactly?

A tiny coloured dot, no text (presence / status marker)Dot

A short label chip

Does it do anything when clicked?

No — display-only metadata (status / category / count)Badge Yes — interactive (click, dismiss ×, select / filter)Tag

A full inline message blockDefault or destructive, optional icon. A richer contextual message with actions / progress / dismiss (a Banner) is in the guide but not yet a shipped unit — use Alert today.Alert

Compare

Component	Text?	Interactive	Use for
Dot	no	no	status / presence marker
Badge	short	no	display-only status / category / count
Tag	short	yes	selectable / removable / filter chip (dismiss, click)
Pill	—	—	internal primitive behind Badge / Tag — don't use directly
Alert	block	no	inline important notice (default / destructive)
Banner	block	optional	contextual message with actions / progress / dismiss
Sonner	block	—	transient toast notifications

Rules of thumb

Badge vs Tag: if the chip does nothing when clicked, it's a Badge. The moment it needs a dismiss ×, a click handler, or selection state, it's a Tag.
Pill is the internal primitive behind Badge and Tag — never reach for it directly.
Banner is documented above but is not yet a shipped unit; use Alert for an inline notice until it lands.

What are you loading?

Blocking a whole region / page while it loadsLoadingState

An in-place placeholder that mirrors the final layout

What shape is the placeholder?

A generic blockSkeleton Lines of textSkeletonText is specced (A6) but not yet shipped — use Skeleton until it lands.Skeleton A row with an avatar / tile + linesSkeletonRow is specced (A6) but not yet shipped — use Skeleton until it lands.Skeleton

A small inline spinner (button, inline action)Spinner

Rules of thumb

Prefer Skeleton (a layout-stable placeholder) over a spinner for content areas.
Reserve LoadingState for genuinely blocking, full-region loads; reserve Spinner for small inline / action loading.

What's the situation?

No data / nothing to showPair with EmptyActions for a call-to-action.Empty Something failed and the user can retryErrorState A full-page error boundaryErrorState

Compare

Situation	Component
No data / nothing to show	Empty (with EmptyActions)
Something failed + retry	ErrorState — composes Empty
Full-page error boundary	ErrorState / boundary

Rules of thumb

ErrorState now ships and composes Empty, so you no longer need to hand-roll a retry Empty for failures.

Sample request sent

We'll email you when your Terrazzo Bianco sample ships.

Alert

New

Badge

No materials match

Try widening your finish or colour filters.

Empty

No saved materials yet

Materials you save collect here for quick comparison later.

EmptyState

Something went wrong

The material panel hit an unexpected error.

ErrorBoundary

Search failed

We couldn't reach the materials index.

ErrorState

Loading materials…

LoadingState

Uploading swatches

64%

Progress

ProgressDots

Skeleton

Palette saved to Coastal Kitchen

Toaster

Spinner

SuccessTickRipple

Data

25 pieces

Do you need sorting / filtering / column visibility / pagination / row selection?

YesHeadless, @tanstack/react-table; the DataGrid* parts frame it.DataGrid NoSemantic Table / TableHeader / TableRow / TableCell primitives.Table

Compare

Component	Use for
Table	static / semantic tables — full control, no data-grid machinery
DataGrid	interactive grids: sort, filter, paginate, select, column config

Rules of thumb

Reach for DataGrid only when you need its machinery — a static Table is lighter and gives you full markup control.

300 × 600 mm field tile, 10 mm thick, with book-matched veining.

Seal on installation; clean with pH-neutral stone soap.

Typically stocked; 3–5 day lead time.

Accordion

Avatar

Calacatta Oro

Natural marble field tile, polished, with warm gold veining.

In stock

Card

Terracotta

Clay

Sand

Slate

Carousel

Chart

Finish options

Honed

Polished

Brushed

Collapsible

Material	Substrate	Finish
Carrara Marble	Stone	Honed
White Oak Plank	Wood	Matte
Basalt Slab	Stone	Polished

DataGrid

DataGridColumnFilter

DataGridColumnHeader

DataGridColumnVisibility

Rows per page

1 - 5 of 23

DataGridPagination

Material	Substrate	Finish
Carrara Marble	Stone	Honed
White Oak Plank	Wood	Matte
Basalt Slab	Stone	Polished

DataGridTable

Material: Natural marble
Finish: Polished
Origin: Carrara, Italy
Lead time: 3–5 business days

DescriptionList

Technical Specification.pdf
2.4mb
Care & Maintenance.pdf
1.2mb
Warranty.pdf
340kb

DocumentList

In stock

Low stock

Discontinued

Dot

This porcelain tile pairs a honed limestone visual with a through-body composition, giving it depth that survives edge chips and daily wear. It is rated for high-traffic commercial floors, resists staining and frost, and reads calm underfoot while subtle vein movement keeps large installations from looking flat.

Carrara Marble

Stone · Honed

Item

Honed limestone porcelain — a category label that overflows its column

MarqueeText

HonedPolishedIn stock

Pill

Material	Substrate	Finish	Price
Carrara Marble	Stone	Honed	$18.50
White Oak Plank	Wood	Matte	$9.20
Brass Sheet	Metal	Brushed	$31.75
Linen Weave	Textile	Woven	$6.40

Table

FeaturedHoned

Polished

Tag

Thumbnail

Color

8 pieces

Motion

14 pieces

materials indexed

New arrival

Sample selected

Motion honours your OS setting

ReducedMotionProvider

Calacatta Gold marble

Reclaimed oak plank

Brushed stainless steel

Terracotta hex tile

Sage linen weave

Board-formed concrete

Honed basalt

Cane webbing

ScrollFade

Indexing materials…

Shimmer

Ready to specify

Shine

Terracotta

Oak

Brushed steel

Sage linen

Stagger

SwatchFan

LiveWaveform

Agent UX

7 pieces

What kind of signal is it?

Status orb by agent state (64 avatar / 20 inline)ThinkingOrb 24×24 intent glyph (prompt-bar / op slot)Pick from DOT_MATRIX_LOADERS.DotMatrixLoader Narrated labor-illusion step conveyorCompose with ThinkingOrb or DotMatrixLoader via `loader`.ThinkingLoader

Rules of thumb

ThinkingOrb = state; DotMatrixLoader = intent; ThinkingLoader = narrated progress.
Compose ThinkingLoader with an orb or glyph — don't invent a fourth loader.