← Home

Components

Live examples of the shared @workspace/ui components. Press d to toggle dark mode.

Card

Header, action slot, content, and footer. The second card uses the compact size.

Project settings
Manage how this project is built and deployed.
Usage
Requests this billing period.

12,480

of 50,000 included

Input

Default, controlled with validation, disabled, and file inputs.

Type without an @ to see the invalid state.

Dialog

A modal with a form and a footer. Press Escape or click outside to close.

Dropdown menu

Groups, shortcuts, a submenu, checkbox items, and a radio group.

status bar · comfortable

Select

Controlled, grouped with a label, small size, and disabled.

value: next

Tabs

Default and line variants, plus a vertical layout.

Account
Update your display name and handle.
Rendered output goes here.
General workspace settings.

Badge

Every variant, with icons, and rendered as a link.

DefaultSecondaryDestructiveOutlineGhostLinkVerified3 failingAnchor badge