Components

Figma Storybook

Every building block in one place

Each component is built on the colour, spacing, and typography tokens from the foundations pages. They all share the same padding rules, focus styles, and sizing conventions so they feel consistent when combined, and because every colour and shape is a token, each one renders correctly in all of the shipped themes, light and dark included. Click into any component to see its variants, states, and sizing options.

Featured

How did the trial go?

Sign-ups rose five weeks out of six, and most of the lift came from the new onboarding.

AI chat

The whole AI chat: the panel, or the page itself in an app shell mode, the streaming replies, the history, the cards and questions a reply can carry and the server handlers, set up with props.

Customers
		Status	Price
	Aspen Lubin	Shipped	$1,899
	John Clarkson	Waiting	$3,412
	Kianna Vaccaro	Shipped	$145
	Livia Saris	Failed	$708
	Omar Vetrovs	Waiting	$1,747

Data table

The wired table: typed columns, sorting, filters, editing, grouping with totals, row details, saved views, thousands of rows, and rows from a server.

Shader scene

A WebGL2 scene, a night horizon or a glowing rift, in the theme's field colours, with fades, a vignette and grain.

Actions

9

Button

Button group

Circular button

Command palette trigger

Segmented control

Split button

Theme picker

Theme toggle

Toggle group

AI

37

Action card

Action readout

Agent plan

Agent rail

Agent status

AI button

Up five of six weeks.

AI chat

Artifact card

Artifact panel

Drop files to attach

Attachment drop zone

Attachment group

Attachment tile

receipt.jpg2 of 5

Attachment viewer

Chat header

Conversation resumed

Chat marker

Ready to review?

Yes, the queue is clear.

Chat message

Where do the fades come from?

A CSS mask at either end. Content scrolls out through it, and the scrollbar only appears while scrolling.

Chat thread

Code diff

Message the agent

addarrow_upward

Composer

brief.pdf1.2 MB

Document chip

Interrupt card

Mention

Message actions

Harbour timetable

harbourline.example

Message card

Model picker

Prompt suggestions

Release notes

Rendered markdown picks up the token scale, down to inline code.

Prose

Next.js (chosen)
Vite

Question card

Reasoning

1Design tokens quarterly2Theming layered systems

Source chip

Source trail

Tokens landing one chunk at a

Streaming text

Thread panel

Thread tabs

Tool call

Resets Tue 3:00 pm

Usage card

Waveform

Charts

16

Area chart

Bar chart

Combo chart

Contribution graph

Funnel chart

Gantt chart

Gauge

Legend tile

Line chart

Pie chart

Radar chart

Radial chart

Scatter chart

Sparkline

Stacked bar chart

Treemap

Data display

32

Section 1expand_more

Section 2expand_more

Accordion

Animated number

Avatar

Avatar group

InfoSuccessError

Badge

Bento tile

Card

Card stack

Carousel

Chip

--radius-pill: 999px;

Code block

mailEmailopen_in_new

personLinkedInopen_in_new

Contact card

Data table

Due in 5 daysDue in 2 daysOverdue

Deadline

Subtotal: $1,084.00
Delivery: $200.00
Total: $1,284.00

Description list

statement.pdfdownload

Document viewer

Entity card

Event calendar

Figure

Colour landscape

Greyscale landscape

Image compare

Instructions

Kbd

Storybookopen_in_new

GitHubopen_in_new

Link list

Pixel avatar

Systems are coordination problems.

Quote

Selection card

~900%Successful generations+clash view

Stat

Table

Table toolbar

Discover
Design
Ship

Timeline

Tree view

Widget

Effects

4

Bento tile art

Progressive blur

Shader field

Shader scene

Feedback

11

Heads up

Alert

Banner

inboxNo messagesNothing to show yet

Empty state

There are 2 problemsEnter your business name.Enter an email address.

Error summary

Meter

Notification centre

Progress bar

Skeleton

Spinner

OperationalRecordingOffline

Status dot

check_circleSaved

Toast

Inspector

7

Inspector colour picker

Inspector dropdown

Inspector input

Inspector section

Inspector segments

Inspector slider

Inspector toggle switch

Layout

8

dashboardanalyticssettings

App layout

dashboardDashboard

analyticsAnalytics

settingsSettings

App sidebar

Divider

RevenueThe plain surface a dashboard builds on.

Panel

Section title

Standard reports

Planningexpand_more

BudgetsForecasts

Sidebar panel

Split pane

Toolbar

Maps

4

Globe

Santiago, CLCobalt17.73 / 64 arcs

Map callout

: Listening point
: Fixed witness
: Signal route

Map legend

World map

Overlays

10

Alert dialog

searchType a command…

Command palette

open_in_newOpen

Context menu

Edit profileclose

Dialog

Drawer

settingsSettings

Dropdown menu

Hover card

chevron_leftchevron_rightclose

Lightbox

Popover

Tooltip

Typography

4

Statements

October 2026

Heading

Update your card in billing settings before the next invoice.

Link

Unlimited invoices
Card payments
Reminders

List

Balance

$12,950.75

Up 4% this month

Text