System

Components from @delphi/ui. Every page is built from itself.

Tokens

Colors

Glass

Glass

AaAaAa

Typography

Display

Heads up

Your changes have been saved.

Alert

Hayden preview

AudioPlayer

ASJKMR

Avatar

NewActivePending

Badge

Notifications

Three new this morning.

Card

Chart

Chart Bars

alpha

beta

gamma

Chart Diverging Bar

A

B

C

rule one

100%

75%

92%

rule two

83%

100%

50%

rule three

100%

92%

100%

Chart Heatmap

const greet = (name: string) => {
  return `Hello, ${name}!`;
};

CodeBlock

No items yet

Add your first item to get started.

Empty

Icons

Inbox

12 unread

Item

⌘K

Kbd

Email address

Label

LiveWaveform

Logo

JS

Joe Sobrero

MindIsland

MindScoreIcon

Narrow

List

Page Shells

Page content

PageContainer

Progress

1

Typography

Blur should soften type without erasing its rhythm

This card mixes crisp lettering, rounded geometry, and saturated color so every part of the progressive blur remains visible while scrolling.

2

Vectors

Sharp shapes reveal stepping and hard mask boundaries

This card mixes crisp lettering, rounded geometry, and saturated color so every part of the progressive blur remains visible while scrolling.

3

Contrast

Dense color makes the fade curve easier to judge

This card mixes crisp lettering, rounded geometry, and saturated color so every part of the progressive blur remains visible while scrolling.

4

Motion

Scroll slowly through both edges to inspect the handoff

This card mixes crisp lettering, rounded geometry, and saturated color so every part of the progressive blur remains visible while scrolling.

5

Typography

Blur should soften type without erasing its rhythm

This card mixes crisp lettering, rounded geometry, and saturated color so every part of the progressive blur remains visible while scrolling.

6

Vectors

Sharp shapes reveal stepping and hard mask boundaries

This card mixes crisp lettering, rounded geometry, and saturated color so every part of the progressive blur remains visible while scrolling.

7

Contrast

Dense color makes the fade curve easier to judge

This card mixes crisp lettering, rounded geometry, and saturated color so every part of the progressive blur remains visible while scrolling.

8

Motion

Scroll slowly through both edges to inspect the handoff

This card mixes crisp lettering, rounded geometry, and saturated color so every part of the progressive blur remains visible while scrolling.

Progressive Blur

Above

Below

Separator

Skeleton

Spinner

Name	Email	Role	Status
Alice Chen	alice@example.com	Owner	Active
Ben Patel	ben@example.com	Editor	Active
Casey Wu	casey@example.com	Editor	Pending
Devi Rao	devi@example.com	Viewer	Active

Table

Interactive

You're billed monthly on the day you signed up. Plans renew automatically — cancel any time from Settings.

Accordion

Delete this item?

This action cannot be undone.

CancelDelete

AlertDialog

Breadcrumb

Button

ButtonGroup

August 2026

Calendar

Mountain landscape with lake

Sunlit valley with mountains

Scenic lake at sunset

Misty forest path

Autumn forest trail

Waterfall in tropical forest

Green hills at golden hour

Tropical beach with clear water

Starry night over snowy mountains

Person standing on cliff at sunrise

Card swipe carousel

1 / 3

Add a knowledge source

2 / 3

Train your responses

3 / 3

Publish your mind

Carousel

Checkbox

Collapsible

Combobox

Search…

Suggestions

New file

Open folder

Settings

Command

Archive conversation?

This removes it from your history.

CancelArchive

ConfirmDialog

Copy

Duplicate

Delete

ContextMenu

CopiableUrl

Date Picker

Edit profile

Make changes and save when you're done.

Detached Sheet

Edit profile

Make changes and save when you're done.

Dialog

Delete project

Permanently removes the project.

Drawer

Profile

Settings

Sign out

DropdownMenu

Field

Filters on

FilterBar

FilterChip

Alice joined Delphi in March 2026.

HoverCard

Input

$

USD

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

Menubar

NativeSelect

NavigationMenu

Pagination

Floating panel with arbitrary content.

Popover

QRCode

RadioCard

Option A Option B

RadioGroup

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Line 11

Line 12

ScrollArea

United States

Canada

United Kingdom

Select

Sidebar example pending — see @delphi/ui/components/sidebar.

Sidebar

Slider

Switch

Overview content.

Tabs

DesignEngineeringRead only

Tag

Textarea

SavedYour changes are live.

Toaster

Toggle

ToggleGroup

Helpful hint

Tooltip

Animation

1,234

AnimatedNumber

One

Two

Three

AnimatedSections

AnimateHeight

Dots