16 : 9
Components
Layout
17
One dimension, two dimensions, or something else?
One dimension (a row or a column)
Two dimensions (a grid)
Centering one thing
Center
Lock a child to a fixed width:height ratio
AspectRatio
User-draggable split panels
Resizable
A zero-opinion wrapper (would otherwise be a naked <div>)
Box
A spacer between things
Space
A page-level width + horizontal-padding wrapper
Container
A page vertical-rhythm section
Section
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.
Sidebar
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).
Zero-opinion wrapper
Centered
Page shell
Logo
Search
Account
Red
Amber
Green
Teal
Blue
Violet
ConcreteTerrazzoOakBrassLinen
object-cover
Sidebar
Canvas
Materials
Vertical rhythm between grouped blocks.
Overview
Specifications
Availability
01
02
03
04
Header
Footer
First
Second
Third
Calacatta Oro
Typography
5
import { Code } from
"@instruments/materia-ui/components/code";The library of materials
⌘K
KbdHigh-quality materials sourced from sustainable suppliers, each documented with finishes, dimensions, and availability.
Search the material library
Actions
6
Forms
27
Free-text entry, or choosing from options?
Free-text entry
Choosing from options
Type-to-filter, large or async lists, virtualized
Combobox
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.
October 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Matte finish
Non-reflective, fingerprint-resistant.
Get an alert when this material is back in stock.
Primary distributor for this finish.
Terrazzo - Veneto
Marble - Carrara
$
per m²
Available from
Delivery year
Sample swatch
A5 card, ships in 2 days.
Full sheet
1.2 × 2.4 m, made to order.
Navigation
10
Compare the terracotta finishes, then read the care guide before ordering samples.
Terracotta tile
Carrara marble
Request a sample
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.
Overlays
13
Is it triggered by hover, or by click / programmatically?
Click / programmatic
A centered modal that blocks the page until dismissed
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.
Remove this material?
Terrazzo Bianco will be taken off your Coastal Kitchen board. This can't be undone.
Add to palette
Choose a palette to file Terrazzo Bianco under, or start a new one.
Coastal Kitchen · 12 materials
Filter materials
Narrow the catalog by finish and origin.
Material
TB
Terrazzo Bianco
Fibonacci Stone
Recycled marble aggregate in a warm white matrix - matte honed finish.
Sample request
A cut sample of Terrazzo Bianco ships to your studio in 3–5 days.
Finish
Applies to every swatch in this palette.
Terrazzo Bianco
Material details
Specification, finish, and availability for the selected swatch.
Origin · Italy
Palette
Coastal Kitchen
12 materials · updated today
Copy hex · #E8E4DA
Feedback
15
Status & feedback
Is it a transient notification (appears, then auto-dismisses)?
No - persistent and inline
A short label chip
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.
Loading & async
What are you loading?
An in-place placeholder that mirrors the final layout
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.
Empty & error
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 composes Empty, so don't hand-roll a retry Empty for failures.
Sample request sent
We'll email you when your Terrazzo Bianco sample ships.
New
BadgeUploading swatches
64%
Oak is the fastest-growing finish this quarter - orders are up 23% and returns are down 8 points. Warm mid-tone woods are trending in the same range.
Follow-ups
Palette saved to Coastal Kitchen
Data
16
Do you need sorting / filtering / column visibility / pagination / row selection?
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.
MR
Avatar%22%2F%3E%3Crect%20width%3D%22320%22%20height%3D%22320%22%20fill%3D%22url(%23d)%22%2F%3E%3C%2Fsvg%3E)
Terracotta
%22%2F%3E%3Crect%20width%3D%22320%22%20height%3D%22320%22%20fill%3D%22url(%23d)%22%2F%3E%3C%2Fsvg%3E)
Sage
%22%2F%3E%3Crect%20width%3D%22320%22%20height%3D%22320%22%20fill%3D%22url(%23d)%22%2F%3E%3C%2Fsvg%3E)
Sand
%22%2F%3E%3Crect%20width%3D%22320%22%20height%3D%22320%22%20fill%3D%22url(%23d)%22%2F%3E%3C%2Fsvg%3E)
Slate
Finish options
Honed
Polished
Brushed
- Material
- Natural marble
- Finish
- Polished
- Origin
- Carrara, Italy
- Lead time
- 3–5 business days
In stock
Low stock
Discontinued
Carrara Marble
Stone · Honed
Honed limestone porcelain - a category label that overflows its column
HonedPolishedIn stock
| 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 |
FeaturedHoned
Polished
Color
8
Motion
12
0
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
Indexing materials…
ShimmerReady to specify
Terracotta
Oak
Brushed steel
Sage linen
Composites
2
Identified surfaceA-12
In stock
Rectified edges
Sample available