@lib/ui

Shared component library.

Form

Button

SolidSoftSurfaceOutlineGhostDefaultDisabled

Checkbox

ClassicSurfaceSoftDefaultDisabled

CheckboxCards

SurfaceClassicDefault
Disabled

IconButton

SolidSoftSurfaceOutlineGhostDefaultDisabled

RadioCards

SurfaceClassicDefault
Disabled

RadioGroup

ClassicSurfaceSoftDefault
Disabled

SegmentedControl

SurfaceClassic1
2
3

Slider

ClassicSurfaceSoft

Switch

ClassicSurfaceSoftDefaultDisabled

TextArea

DefaultDisabledRead-onlyClassic
Surface
Soft

TextField

NoneSmallMediumLargeFullClassic
Surface
Soft

Navigation

Link

AutoAlwaysHoverNoneLearn moreLearn moreLearn moreLearn more

LinkButton

NoneSmallMediumLargeFullSolidContinueContinueContinueContinueContinueSoftContinueContinueContinueContinueContinueSurfaceContinueContinueContinueContinueContinueOutlineContinueContinueContinueContinueContinueGhostContinueContinueContinueContinueContinue

TabNav

AccentNeutral

Tabs

AccentNeutral

Layout

Container

1
2
3
4

Flex

RowColumnRow reverseColumn reverse
123
123
123
123

Grid

1234
123456
123456
123456
123456

Inset

XY

Section

1234

Display

AlertDialog

AccentNeutralDangerWarningSuccess

Avatar

NoneSmallMediumLargeFullSolidSoft

Badge

NoneSmallMediumLargeFullSolidActiveActiveActiveActiveActiveSoftActiveActiveActiveActiveActiveSurfaceActiveActiveActiveActiveActiveOutlineActiveActiveActiveActiveActive

Callout

SoftSurfaceOutlineDefault

Your changes have been saved.

Your changes have been saved.

Your changes have been saved.

High contrast

Your changes have been saved.

Your changes have been saved.

Your changes have been saved.

Card

Surface

Getting started

Cards group related content into a single surface.

Classic

Getting started

Cards group related content into a single surface.

Ghost

Getting started

Cards group related content into a single surface.

DataList

VerticalHorizontal
Name
Gill Bates
Email
gill@macrohard.example
Reports to
Bob Robertson
Status
Active
Name
Gill Bates
Email
gill@macrohard.example
Reports to
Bob Robertson
Status
Active

Dialog

CenterStart

Progress

ClassicSurfaceSoft

ScrollArea

AutoAlwaysHoverScroll

Line 1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 2 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 3 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 4 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 5 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 6 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 7 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 8 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 9 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 10 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 11 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 12 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 13 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 14 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 15 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 16 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 17 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 18 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 19 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 20 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 2 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 3 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 4 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 5 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 6 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 7 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 8 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 9 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 10 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 11 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 12 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 13 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 14 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 15 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 16 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 17 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 18 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 19 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 20 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 2 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 3 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 4 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 5 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 6 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 7 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 8 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 9 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 10 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 11 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 12 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 13 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 14 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 15 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 16 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 17 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 18 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 19 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 20 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 2 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 3 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 4 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 5 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 6 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 7 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 8 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 9 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 10 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 11 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 12 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 13 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 14 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 15 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 16 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 17 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 18 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 19 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 20 — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Separator

HorizontalVertical
Above
Below
Left
Right

Table

SurfaceGhost
Full nameEmailRoleStatus
Gill Batesgill@macrohard.exampleAdminActive
Thomas Hawkingthomas@axis.exampleEditorInvited
Anna Grahamanna@boardgames.exampleViewerActive
Paige Turnerpaige@publishing.exampleOwnerActive
Bob Robertsonbob@robertson.exampleEditorActive
Jonathan Johnsonjonathan@johnson.exampleViewerInvited
Full nameEmailRoleStatus
Gill Batesgill@macrohard.exampleAdminActive
Thomas Hawkingthomas@axis.exampleEditorInvited
Anna Grahamanna@boardgames.exampleViewerActive
Paige Turnerpaige@publishing.exampleOwnerActive
Bob Robertsonbob@robertson.exampleEditorActive
Jonathan Johnsonjonathan@johnson.exampleViewerInvited

Typography

Blockquote

Accent
The unexamined life is not worth living.
Neutral
The unexamined life is not worth living.
Danger
The unexamined life is not worth living.
Warning
The unexamined life is not worth living.
Success
The unexamined life is not worth living.

Code

SolidSoftOutlineGhostcargo buildcargo buildcargo buildcargo build

Em

Quick brown fox.

Heading

High contrastLow contrast

Account settings

Account settings

Kbd

ClassicSoftEscEsc

Quote

Twain wrote: cat by the tail.

Strong

Quick brown fox.

Text

High contrastLow contrast

Manage your account settings and preferences.

Manage your account settings and preferences.

Patterns

Skeleton

LoadingLoaded

The skeleton prop

Pass skeleton on any component to render it as while the data behind it loads. Layout, margin, and corner shape survive — only the variant background and text color step out of the way.

Color variants collapse to the same neutral pulse, so a skeleton row reads as one loading region instead of three styled chips.

Inputs and buttons are individually skeletonized. While loading, focus, pointer events, and form submission are all suppressed.

The skeleton prop

Pass skeleton on any component to render it as a pulsing placeholder while the data behind it loads. Layout, margin, and corner shape survive — only the variant background and text color step out of the way.

accentsuccesswarning

Color variants collapse to the same neutral pulse, so a skeleton row reads as one loading region instead of three styled chips.

Inputs and buttons are individually skeletonized. While loading, focus, pointer events, and form submission are all suppressed.