Accordion

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Alert

BRAND-MASTODON

Information

Your session will expire in 5 minutes.

Error

Something went wrong. Please try again.

BRAND-ALM

Information

Your session will expire in 5 minutes.

Error

Something went wrong. Please try again.

BRAND-ZIPQUOTE

Information

Your session will expire in 5 minutes.

Error

Something went wrong. Please try again.

Alert Dialog

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Aspect Ratio

BRAND-MASTODON

16 / 9

BRAND-ALM

16 / 9

BRAND-ZIPQUOTE

16 / 9

Avatar

BRAND-MASTODON

ABCDEF

BRAND-ALM

ABCDEF

BRAND-ZIPQUOTE

ABCDEF

Badge

BRAND-MASTODON

DefaultSecondaryOutlineDestructiveGhost

SuccessWarningErrorTagged

ReactTypeScriptNext.js

BRAND-ALM

DefaultSecondaryOutlineDestructiveGhost

SuccessWarningErrorTagged

ReactTypeScriptNext.js

BRAND-ZIPQUOTE

DefaultSecondaryOutlineDestructiveGhost

SuccessWarningErrorTagged

ReactTypeScriptNext.js

Breadcrumb

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Button

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Button Group

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Calendar

BRAND-MASTODON

April 2026

BRAND-ALM

April 2026

BRAND-ZIPQUOTE

April 2026

Card

BRAND-MASTODON

Card Title

Card description goes here.

Card content area.

BRAND-ALM

Card Title

Card description goes here.

Card content area.

BRAND-ZIPQUOTE

Card Title

Card description goes here.

Card content area.

Carousel

BRAND-MASTODON

Slide 1

Slide 2

Slide 3

BRAND-ALM

Slide 1

Slide 2

Slide 3

BRAND-ZIPQUOTE

Slide 1

Slide 2

Slide 3

Checkbox

Collapsible

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Combobox

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Command

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Context Menu

BRAND-MASTODON

Right-click here

BRAND-ALM

Right-click here

BRAND-ZIPQUOTE

Right-click here

Data Table

BRAND-MASTODON

Name	Role	Status
Alice	Admin	Active
Bob	Editor	Inactive
Carol	Viewer	Active

BRAND-ALM

Name	Role	Status
Alice	Admin	Active
Bob	Editor	Inactive
Carol	Viewer	Active

BRAND-ZIPQUOTE

Name	Role	Status
Alice	Admin	Active
Bob	Editor	Inactive
Carol	Viewer	Active

Date Picker

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Dialog

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Drawer

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Dropdown Menu

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Empty State

BRAND-MASTODON

No messages

When you receive messages, they'll appear here.

BRAND-ALM

No messages

When you receive messages, they'll appear here.

BRAND-ZIPQUOTE

No messages

When you receive messages, they'll appear here.

Field

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Form Field

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Hover Card

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Input

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Input Group

BRAND-MASTODON

https://

BRAND-ALM

https://

BRAND-ZIPQUOTE

https://

Input OTP

BRAND-MASTODON

[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; } }

BRAND-ALM

[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; } }

BRAND-ZIPQUOTE

[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; } }

Item

BRAND-MASTODON

Alice Johnsonalice@example.com

Admin

Messages3 unread messages

3

SettingsManage your preferences

BRAND-ALM

Alice Johnsonalice@example.com

Admin

Messages3 unread messages

3

SettingsManage your preferences

BRAND-ZIPQUOTE

Alice Johnsonalice@example.com

Admin

Messages3 unread messages

3

SettingsManage your preferences

Kbd

BRAND-MASTODON

⌘KOpen command palette

⌃SSave file

EscClose dialog

BRAND-ALM

⌘KOpen command palette

⌃SSave file

EscClose dialog

BRAND-ZIPQUOTE

⌘KOpen command palette

⌃SSave file

EscClose dialog

Label

BRAND-MASTODON

Email address

Accept terms and conditions

BRAND-ALM

Email address

Accept terms and conditions

BRAND-ZIPQUOTE

Email address

Accept terms and conditions

Menubar

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Native Select

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Pagination

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Popover

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Progress

BRAND-MASTODON

Loading…

x

Uploading

x

Complete

x

BRAND-ALM

Loading…

x

Uploading

x

Complete

x

BRAND-ZIPQUOTE

Loading…

x

Uploading

x

Complete

x

Radio Group

Resizable

BRAND-MASTODON

Left

Right

BRAND-ALM

Left

Right

BRAND-ZIPQUOTE

Left

Right

Scroll Area

BRAND-MASTODON

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

BRAND-ALM

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

BRAND-ZIPQUOTE

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Select

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Separator

BRAND-MASTODON

Above

Below

Left

Middle

Right

BRAND-ALM

Above

Below

Left

Middle

Right

BRAND-ZIPQUOTE

Above

Below

Left

Middle

Right

Sheet

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Skeleton

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Slider

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Sonner

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Spinner

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Switch

Table

BRAND-MASTODON

Name	Role	Status
Alice	Admin	Active
Bob	Editor	Inactive
Carol	Viewer	Active

BRAND-ALM

Name	Role	Status
Alice	Admin	Active
Bob	Editor	Inactive
Carol	Viewer	Active

BRAND-ZIPQUOTE

Name	Role	Status
Alice	Admin	Active
Bob	Editor	Inactive
Carol	Viewer	Active

Tabs

BRAND-MASTODON

Content 1

BRAND-ALM

Content 1

BRAND-ZIPQUOTE

Content 1

Textarea

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Toggle

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Toggle Group

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Tooltip

BRAND-MASTODON

BRAND-ALM

BRAND-ZIPQUOTE

Typography

BRAND-MASTODON

Heading 1

Heading 2

Heading 3

Heading 4

Regular paragraph with body text.

Lead paragraph text goes here.

Large emphasis text.

Small fine print text.

Muted helper or caption text.

This is a blockquote example.

const x = 42

First list item
Second list item
Third list item

BRAND-ALM

Heading 1

Heading 2

Heading 3

Heading 4

Regular paragraph with body text.

Lead paragraph text goes here.

Large emphasis text.

Small fine print text.

Muted helper or caption text.

This is a blockquote example.

const x = 42

First list item
Second list item
Third list item

BRAND-ZIPQUOTE

Heading 1

Heading 2

Heading 3

Heading 4

Regular paragraph with body text.

Lead paragraph text goes here.

Large emphasis text.

Small fine print text.

Muted helper or caption text.

This is a blockquote example.

const x = 42

First list item
Second list item
Third list item

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Theme Matrix

Accordion

Item one

Item two

Item one

Item two

Item one

Item two

Alert

Alert Dialog

Aspect Ratio

Avatar

Badge

Breadcrumb

Button

Button Group

Calendar

Card

Carousel

Checkbox

Collapsible

Combobox

Command

Context Menu

Data Table

Date Picker

Dialog

Drawer

Dropdown Menu

Empty State

Field

Form Field

Hover Card

Input

Input Group

Input OTP

Item

Kbd

Label

Menubar

Native Select

Navigation Menu

Pagination

Popover

Progress

Radio Group

Resizable

Scroll Area

Select

Separator

Sheet

Skeleton

Slider

Sonner

Spinner

Switch

Table

Tabs

Textarea

Toggle

Toggle Group

Tooltip

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 1

Heading 2

Heading 3

Heading 4

Heading 1

Heading 2

Heading 3

Heading 4