Each preview renders directly from the package registry and links to URL-backed props, states, and render surfaces.

Implemented atoms

Primitives own reusable HTML/UI vocabulary: DOM anatomy, ARIA, data attributes, stable classes, schemas, examples, metadata, render input, and local token-backed styles.
111 registered
atomic

Primitive catalog

Button

Tight command control with loading, icon, shortcut, and semantic states.
control
Open

Toolbar Control

Atomic toolbar control with quiet icon controls, optional chip appearance, tooltip shortcuts, roving arrow-key focus, selected state, and pressed feedback.
control
Open

Input

Single-line field with label, help, leading icon, disabled, and error states.
form
Used for review notifications.
Open

Field

Form chrome primitive for label, description, helper, validation, and counts.
form
Canonical field hierarchy for dense product forms.
Use lowercase letters and hyphens.
Open

Stack

Vertical rhythm primitive for dense groups, forms, traces, and editorial blocks.
layout
Open

Inline

Single-line alignment primitive for labels, metadata, controls, and actions.
layout
LiveAgentNeeds review
Open

Cluster

Wrapping inline group for chips, tags, actions, filters, and token sets.
layout
ProductEditorialGenerativeEducational
Open

Container

Tokenized page-width wrapper with responsive inline padding.
layout

Registry

Foundations, primitives, components.

Render

DOM, JPEG, and deterministic states.
Open

Grid

Tokenized responsive grid primitive for repeated cards, controls, and specimens.
layout
Open

Split

Two-region layout primitive for title/actions, body/aside, and inspector patterns.
layout
Ready
Open

Scroll Area

Bounded overflow primitive for tables, menus, traces, and upload lists.
layout
Open

Dock

Attached command dock for panel footers, composer actions, and overlay controls.
layout
Open

Rail

Generic rail primitive for vertical tools, side navigation, and token strips.
layout
Open

PageSection

Page-level rhythm primitive for hero, chapter, and standard content bands.
layout

Registry band

PageSection owns rhythm before content chooses its own layout.
Open

Surface

Base Concrete surface with tokenized depth, intent, density, and state.
surface
Run summary3 files changed.
Open

Panel

Grouped surface with header, body, and footer anatomy.
surface

Runtime

Connected workspace controls.
Tools, memory, and model routing are available.
Open

Section

Titled section primitive for content groups inside panels, pages, and docs.
layout

Inputs

Local grouping inside a panel.
The section owns hierarchy, not chrome.
Open

Header

Title, description, meta, and action header anatomy.
typography

Overview

Compact hierarchy for a product region.
Open

Text

Body, lead, meta, caption, mono, numeric, and prose text primitive.
typography
Concrete text stays compact and readable.
Open

Heading

Semantic heading primitive with Concrete hierarchy roles.
typography

Workspace

Open

Label

Passive label primitive for compact metadata, field labels, and status text.
typography
Ready
Open

IconButton

Square icon command primitive backed by Button semantics.
control
Open

ControlGroup

Grouped control primitive for segmented commands and compact tool sets.
control
Open

FieldRow

Dense label, description, meta, and control row for forms and settings.
form
Agent toolsAllow model tool calls.
MemoryPersist preferences.
On
Open

Token

Generic compact token for selected values, scopes, mentions, and attachments.
control
Workspace
Open

SearchInput

Search input anatomy with icon, token, shortcut, action, and trailing slots.
control
Open

PickerButton

Generic disclosure button for picker workflows.
control
Open

PickerSurface

Relative or floating surface for picker content.
surface
Open

MenuSurface

Generic menu surface for command, suggestion, and option workflows.
navigation
Open

MenuGroup

Labeled group region for menu, command, and listbox surfaces.
navigation
Commands
Open

Listbox

Selectable option listbox surface for picker, menu, and select workflows.
control
Open

Overlay

Generic overlay stack for dialog, drawer, and popover presentation.
surface

Inline overlay

Overlay children own their surface.
Ready
Open

DialogSurface

Dialog panel sizing and dialog semantics for overlay workflows.
surface
Open

DrawerSurface

Drawer panel sizing and dialog semantics for side-panel workflows.
surface
Open

Alert

Inline or panel-level status message with icon, copy, and action slot.
feedback
ReadyAll required fields are complete.
Draft savedLocal changes are ready to review.
Open

ValidationList

Structured validation issue list for forms, settings, and generated panels.
feedback
  • EmailEnter a work email.
  • RoleChoose at least one role.
  • SchemaBoundary parsed.
Open

DisclosurePanel

Generic details/summary disclosure panel for trace and inspection content.
surface
Trace details
Loaded files, parsed registry metadata, and rendered examples.
Open

Data Surface

Data and generated-output surface for metrics, charts, and tables.
data

Run quality

Validated against the active schema.

97.2
Open

Transcript item

Transcript item anatomy for agent, tool, system, and user transcript surfaces.
feedback
A
Assistantcomplete
Here is the compact result.
Open

Message Bubble

Compact conversational message surface.
surface
Concrete keeps conversational UI crisp.
Ship the primitive set.
Open

Option row

Reusable button row for command menus and selectable listbox options.
control
Open

Calendar panel

Calendar picker panel with month navigation, weekdays, range, and disabled states.
form
April 2026
MonTueWedThuFriSatSun
Open

Dropzone

Dashed upload target primitive with active, disabled, icon, and descriptive states.
form
Upload filesDrag or choose a research artifact.Choose files
Open

Upload field

Upload stack primitive for drop targets, queued rows, and media width kinds.
form
Upload filesDrop files or choose from disk.Choose files
Q2_report.pdf2.4 MB - PDF
source_packet.csv64%
Open

Upload item

Single uploaded-file row with thumbnail, progress, status, and remove affordance.
media
Q2_report.pdfQueued - 2.4 MB PDF
Open

Caret

Disclosure chevron with open, directional, and scale states.
control
Open

Textarea

Multi-line prompt and prose input with validation support.
form
Keep the instruction specific and inspectable.
Open

Select

Native option picker styled to the Concrete field rhythm.
form
Choose a workspace.
Open

Checkbox

Binary selection primitive with compact row alignment.
form
Open

Radio

Exclusive choice primitive with the same row rhythm as checkbox.
form
Open

Stepper

Compact numeric control group with decrement and increment actions.
form
Caps parallel tool calls.
Open

Range

Two-thumb range control anatomy with filled rail and value row.
form
2080
Filter generated runs by model confidence.
Open

Trace panel

Disclosure panel for agent trace summaries and step traces.
feedback
Thinking3 stepsInspecting context and selecting the next action.
  1. Context loaded
  2. Plan selected

    Focused primitives and component boundaries.

  3. Running action

    Applying the current migration slice.

Open

Switch

Binary setting control for product preferences and modes.
form
Open

Slider

Range input for scalar tuning without custom interaction code.
form
Open

Card

Hairline surface primitive with raised, sunken, and interactive variants.
surface
Default

Border only. The canonical surface.

Raised

One step of elevation over canvas.

Sunken

Recessed. Code, quotes, wells.

Open

Chart Frame

Framed chart output region with surface state, chart-kind hooks, and state messages.
data
Open

Plot

SVG plot root with accessibility title and Concrete sizing contract.
data
Open

Chart Grid

SVG chart gridline group and plot background anatomy.
data
Open

Axis

Chart axis, baseline, tick label, axis label, row label, value label, and end label marks.
data
Open

Target Line

Chart target or threshold marker group.
data
Open

Series Line

SVG line and area path marks for trend series.
data
Open

Series Point

SVG point and endpoint marks for line and scatter-like chart series.
data
Open

Series Bar

SVG bar, track, comparison, and stack segment marks.
data
Open

Donut Ring

Donut chart ring, track, segment, and centered value anatomy.
data
72%accepted
Open

Heatmap Grid

Heatmap grid, labels, corner, and intensity cells.
data
MonTueWedAPI12188
Open

Legend

Compact indicator legend for chart and diagram surfaces.
data
Accepted64Review18Blocked4
Open

Table

Dense table anatomy: viewport, table element, rows, cells, selection, sort, and empty state.
data
Status
router-contractaccepted$0.42
policy-reviewreview$0.31
trace-summarizerblocked$0.18
Open

Pagination

Compact pagination footer with page, selection, and next/previous controls.
data
Page 2 / 63 selected
Open

Pill

Quiet inline metadata label.
status
inkqueuedpointer
Open

Chip

Selectable inline filter or segmented choice atom.
control
Open

Badge

Status-leading signal label using terminal, ultra, or error only.
status
LiveFeaturedBlocked
Open

Tag

Closeable filter or entity label.
status
AgentsDocsconcrete
Open

Avatar

Initials or image identity marker.
media
AKRLC
Open

Code

Mono code block and inline code treatment.
typography
ConcretePressure
TypeScript
const state = concreteRegistry.find(item => item.slug === "transcript-item")
Open

Composer Surface

Rich composer shell anatomy for editor surface, footer rail, toolbar, and submit dock.
control
Open

Token Rail

Compact token rail for mentions, commands, attachments, and scoped context.
control
Arihan V.Summarizeresearch-brief.pdf · PDF
Open

Concept frame

Symbolic currentColor SVG frame for editorial and educational explainers.
diagram
Open

Concept connector

Small relation glyphs for flow, sync, branch, loop, and callout diagrams.
diagram
Open

Diagram Viewport

Diagram canvas and flow viewport shell anatomy.
diagram

Agent canvas

Pan and zoom across agent workflow topology.

Open

Diagram Controls

Compact zoom and viewport controls for diagram surfaces.
control
Open

Diagram Rail

Passive tool rail for diagram canvas surfaces.
diagram
Open

Diagram Edge

SVG edge anatomy for diagram canvas and flow graphs.
diagram
Open

Diagram MiniMap

Compact minimap overlay for diagram canvas nodes.
diagram
Open

Diagram Legend

Diagram-specific legend marks for node and edge vocabularies.
diagram
Open

Diagram node

Compact typed node for concept graphs, architecture sketches, and agent explainers.
diagram
Open

Diagram item

Supporting evidence item for metrics, notes, code, documents, charts, tables, and status.
diagram
metricTrace184msp95
codeHydratets
statusReadylive
noteConstraintpolicy
Open

Flow Node

SVG node primitive for compact flow diagrams.
diagram
Model stepValidation
Open

Kbd

Keyboard shortcut keycap.
typography
⌘K↵
Open

Spinner

Small loading indicator for command and inline pending states.
feedback
Open

Link

Ink-first text link with restrained underline treatment.
navigation
Open research note
Open

Divider

Hairline separator with optional mono label.
layout
Open

Empty state

Blank-slate composition with dashed glyph tile and terse copy.
feedback

No matches

Try a broader keyword, or clear the filters applied to this view.

Open

Tooltip

Dark inverse hint surface for focused labels.
feedback
Use one short sentence.
Open

Progress

Linear completion primitive with bounded and indeterminate states.
data
Open

ProgressRing

Circular progress primitive for compact generated summaries and meters.
data
Open

SegmentedProgress

Segmented completion primitive for discrete steps.
data
Open

Stat

KPI number lockup for dense dashboards.
data
Runs14.8k18.6% last 7d
Open

Delta

Compact change indicator using terminal, error, or neutral ink.
data
+18.6%-2.4%0.0%
Open

Sparkline

Tiny trend primitive rendered as line or bar SVG.
data
SparklineSparklineSparkline
Open

Distribution

Part-to-whole bar list for dense summary data.
data
Direct routing
47%
Review queue
28%
Autonomous handoff
18%
Open

Indicator

Dot, legend, and series key punctuation for data surfaces and live rows.
data
RunningQueuedFailed
Open

Skeleton

Structural loading atom for educational and product placeholders.
feedback
Open

Frame

Single-border content frame with optional texture ground.
layout
Generated UIcompact
schema validDense preview frame.
Previewready
Open

Time list

Scrollable time option listbox for compact picker workflows.
form
Open

Tool-call panel

Disclosure panel for agent tool-call status, input code, and output.
feedback
searchFilesrunning1.2s
ts
await searchFiles({ query: 'trace-panel' })
Found 4 matching files.
Open

TiltFrame

Pointer-aware depth container for one highlighted surface.
surface
Open

ScaleFrame

Fixed-bounds preview container for scaled product surfaces.
surface
Open

Brand mark

Concrete C-glyph in a compact mark tile.
brand
Open

Wordmark

Rubric wordmark text treatment for docs and product chrome.
brand
Open

Icon

Lucide-compatible currentColor icon surface.
foundation
Open