palette

Every component, one page

All 32 components rendered together. Switch the palette above and watch the whole set follow — this page is the fastest way to see whether a theme holds up before you commit to it.

32 components · 6 palettes · 0 dependencies

Forms

Label

label.js

Form label with an optional required marker.

Input

input.js

Single-line text field with an invalid state.

Textarea

textarea.js

Multi-line text field with an invalid state.

Select

select.js

Native dropdown with the platform arrow replaced.

Checkbox

checkbox.js

Native checkbox with the box painted over.

Radio

radio.js

Native radio with the dot painted over.

Deploy on push to

Switch

switch.js

On/off control built on a hidden checkbox.

Slider

slider.js

Native range input with the track and thumb restyled.

Combobox

combobox.js

Searchable select built on the combobox primitive.

Selected: none

Select Menu

select-menu.js

Custom select with styled options, built on the listbox primitive.

Submitted as: —

Display

Badge

badge.js

Compact label for status and metadata.

DefaultOutlineAccentPassingDegradedFailed
SmallMedium

Avatar

avatar.js

Circular user image with a text fallback behind it.

BKAYMD
AB+3

Card

card.js

Composable surface with header, content, and footer slots.

Deploy to production

This will push the current branch to your live environment. The change is visible to all users immediately.

Table

table.js

Data table composed from the real table elements.

DeployBranchStatusWhen
4f2a1cmainReady2 hours ago
9b7e30fix/loginBuilding5 hours ago
1d8c55mainFailedyesterday

Progress

progress.js

Determinate progress bar in three sizes.

Storage4.2 of 10 GB

Skeleton

skeleton.js

Placeholder block for content that hasn't arrived.

Separator

separator.js

Dividing line, horizontal or vertical.

Danger zone

Actions here cannot be undone.

Docs
API
Support

Kbd

kbd.js

A keyboard key, for shortcuts written into prose.

Open the palette with ⌘ K

Move with ↑ ↓, confirm with Enter

Navigation

Tabs

tabs.js

Tabbed panels with arrow-key navigation.

Three projects, one of them archived. Last deploy 2 hours ago.
Three projects, one of them archived. Last deploy 2 hours ago.

Accordion

accordion.js

Collapsible sections built on native details elements.

When am I billed?
On the first of each month, for the month ahead. Changing plans mid-month is prorated to the day.
What counts as a seat?
Anyone who can open a project. People with view-only links are free.
Can I cancel any time?
Yes. Your workspace stays readable until the end of the period you've paid for.

Feedback and actions

Button

button.js

Clickable action element with four variants and three sizes.

Alert

alert.js

Short message set apart from the surrounding text.

Scheduled maintenance

The workspace will be read-only on Sunday from 02:00 to 04:00 UTC.

New in this release

You can now invite teammates directly from a project.

Deploy finished

Version 4.2.0 is live for everyone.

Approaching your limit

You've used 9.1 GB of the 10 GB included in this plan.

Payment failed

We couldn't charge your card. Update it to keep the workspace active.

Dialog

dialog.js

Modal built on the native dialog element.

Delete this project?

Everything in it — deployments, logs, and environment variables — is removed immediately. This cannot be undone.

Sheet

sheet.js

Edge panel built on the dialog primitive.

Edit profile

Changes apply the next time the page loads.

Popover

popover.js

Floating panel anchored to a trigger, built on the popover primitive.

Toast

toast.js

Notification queue built on the toast primitive.

Tooltip

tooltip.js

Hover and focus label, positioned with CSS alone.

Runs the last successful build againCopied to your clipboard as JSONThis cannot be undone, and the domain is released immediately.

Tooltip (JS)

tooltip-js.js

Viewport-aware, Escape-dismissable tooltip on the tooltip primitive.

Spinner

spinner.js

Indeterminate loading indicator in three sizes.