Examples

Focused, copy-pasteable scenarios for every component — variants, controlled state, keyboard behavior, and more.

ButtonVariantsSolid, outline, soft, ghost, link and destructive.
ButtonSizesExtra-small through large on the default scale.
ButtonIconsLeading, trailing and icon-only buttons.
ButtonLoadingStatic and interactive loading states.
ButtonDisabledDisabled state across variants.
Getting startedBrowse componentsView examples
ButtonAs linkStyled anchors via `buttonVariants` for navigation.
ButtonLayoutFull width, pill shape, and icon size scale.

Choose the reporting period for the chart.

Toggle one or more formatting styles.

ButtonGroupOptions APISingle-select time range and multi-select formatting toolbar with a separator.

Adjust the canvas magnification.

ButtonGroupVerticalStacked zoom controls with label and help text.
SolidSoftOutlineNeutralSuccessWarningDestructive
BadgeVariantsSolid, soft, outline, neutral and semantic tones.
Extra smallSmallDefaultLarge
BadgeSizesExtra small through large at a consistent variant.
LiveLiveLivePendingOfflineDraft
BadgeStatus dotLive indicators with the `dot` prop.
Invoice #1042Paid
Invoice #1043Paid
Invoice #1044Paid
Invoice #1045Paid
BadgeLayout useBadges paired with labels at different sizes.
ComponentsExamples
BadgeAs linkStyled anchors via `badgeVariants` for tag navigation.
Rose gradientSunset gradientCandy gradientMono gradient
GradientTextGradientsAll four gradient presets.

Build interfaces, faster.

GradientTextHero headingUsed as a large page heading via the `as` prop.
IconSizes & colorThe size scale and color inheritance.
Search
Settings
Account
Alerts
IconIcon gridIcons used inside a responsive action grid.
LoadingLoadingLoadingLoading
LoaderSizes & tonesSize scale and tone options.
LoadingLoading account details…
LoadingUploading — 64%
LoaderInline with textIndeterminate and determinate loaders next to status text.
BreadcrumbBasic trailHome → Docs → current page.
BreadcrumbCollapsed segmentsEllipsis for skipped hierarchy levels.
SkeletonBlocksText lines and avatar placeholders.

Loading profile

SkeletonCard loadingSkeleton inside a Panel while data fetches.
ALJD+3
AvatarSizes & fallbackImage, initials, and compact count badge.
GH

Grace Hopper

grace@example.com

AvatarProfile rowAvatar beside name and email.
Storage used32%
ProgressAnimated valueLive updating storage meter.

Deploying release

Building assets and uploading to the edge network…

ProgressDeploy statusProgress inside a Panel with context.
1
2
3
4
5
6
7
8
GridFixed columnsAn 8-item, 4-column grid.

Main content

Spans 2 of 3 columns from md up.

Sidebar

Stacks on mobile, 1 column on md+.

GridResponsive layoutA content + sidebar layout that stacks on mobile.

Shown on your public profile.

InputLabels & help textLabel, help text, and required fields.
InputValidationControlled field with a live error message.
InputIcons & clearLeading/trailing icons and a clearable search field.
InputSizesSmall, medium and large field heights.

Minimum 8 characters.

InputInput typesEmail, password and search field types.

Use readOnly when the value should remain visible but not editable.

InputDisabled & read-onlyNon-editable field states.

Markdown is supported.

TextareaSizes & help textDefault and large textarea with helper text.

Tell us what you think.

TextareaValidationLive character-count validation.

You agree to our Terms of Service and Privacy Policy.

Can't toggle this option.

CheckboxLabeled fieldsStandalone checkbox with top label, inline text, and disabled states.

Checkbox appears before the label text in LTR.

Checkbox appears after the label text in LTR.

CheckboxControl positionInline-start vs inline-end checkbox placement.

Product updates and account alerts.

Security codes and urgent messages.

Mobile alerts when you're away from email.

A summary every Monday morning.

Choose every channel you want to hear from us on.

CheckboxGroupOptions APINotification channels with four options and controlled value.

Receive product updates and release notes.

This setting is locked.

SwitchLabeled fieldsStandalone switch with top label and disabled states.

Control at inline-start.

Control at inline-end (default for settings rows).

SwitchControl positionInline-start vs inline-end switch placement.

Toggle to preview the setting — does not change site theme here.

SwitchControlledExternal state with conditional feedback.

Let teammates find you by name.

Display when you were last active.

Help improve the product with anonymous data.

Occasional emails from trusted partners.

Toggle each setting on or off independently.

SwitchGroupOptions APIPrivacy settings with four independent toggles.

One email every morning.

Highlights once a week.

Only account notifications.

RadioLabeled optionsThree newsletter options composed with Radio inside RadioGroup.

For personal projects and experiments.

For teams shipping production apps.

Custom limits, SSO, and dedicated support.

Select the plan that fits your team.

RadioGroupOptions APIPlan picker with label, help text, and per-option descriptions.
RadioGroupHorizontal optionsTheme preference rendered inline from the options array.
DropdownSingle selectBasic single-selection dropdown.
DropdownMultiple selectMulti-select with a clear button.
DropdownSearchableFilter a long option list by typing.
DropdownFilter in triggerSingle-select combobox with beginning-of-label filtering and highlighted matches.
DropdownFilter + Select AllMulti-select with panel filter and Select All row.

Selected: medium

DropdownControlledValue driven from external buttons.
DatePickerSingle datePick a single date.
DatePickerDate rangePick a start and end date across two months.
DatePickerDisabled datesBounded range with specific dates disabled.

FAQ-style (single open)

Multiple open sections

Keyboard navigation, animated panels, and accessible trigger semantics.
AccordionDefault stylingFAQ-style single mode and multi-open layout.
Manage your plan and invoices.
AccordionControlledOpen state driven by external buttons.

Focus a trigger, then use Arrow Up/Down to move, Home/End to jump, and Enter or Space to toggle.

First panel content.
AccordionKeyboard behaviorMultiple-open accordion for exploring keyboard navigation.
AlertInline alertsAll tones and variants, including dismissible.
AlertWith actionsInline alert with a call-to-action button.
AlertLive regionsPolite vs assertive announcement modes.
AlertDismissible toast stackImperative toast() and declarative Alert toast prop.
AlertControlled toastOpen/close a toast alert with external state.

General settings

Update your workspace name and timezone.

Form fields would go here.
PanelHeaderLeading visual, title and description.
main branch
2 minutes ago
Success

Deploy #4821

Build completed in 46s with 0 warnings.
PanelMetadataA metadata row combining text and a badge.

API keys

Manage keys used to authenticate API requests.
PanelActionsHeader and footer action buttons.

Default

Border + soft shadow.

Elevated

Stronger shadow for emphasis.

Borderless

No border or shadow — blends into the page.
PanelVisual variantsDefault, elevated and borderless.

In a narrow container, use the chevron buttons to scroll the tab strip. The double-chevron buttons jump to the first or last tab.

Overview

Shorter panel content to show height transitions when switching tabs.

TabsScroll & first/last navOverflow tab strip with scroll chevrons and jump buttons.
Underline variant panel.
Pill variant panel.
TabsVisual variantsUnderline and pill tab strips.
Profile settings and avatar.
TabsVertical layoutSide navigation with a disabled tab.
Account overview content.
TabsControlledActive tab driven by an external button.

Focus the tab list, then use Arrow Left/Right to move between tabs and Home/End to jump to the first or last tab. Press Enter to activate the focused tab.

Panel one.
TabsKeyboard behaviorThree tabs for exploring arrow-key navigation.
PaginationPage linksPrevious, numbered pages, ellipsis, and next.

Page 1 of 5

PaginationControlledClient-side page state with disabled bounds.
PopoverInline triggerWrap any trigger element as a child of Popover.
PopoverWith formCompound PopoverRoot example with inputs and PopoverClose.
PopoverPlacementOpen from top, right, bottom, or left.
PopoverDetached data triggerOpen a popover from a separate element using popupTrigger and data-popup.
TooltipPlacementTop, right, bottom and left.
TooltipTrigger modesDefault hover/focus vs. explicit click control.
TooltipContent lengthShort vs. wrapped long content.
ModalSizessm through xl size variants.
ModalTrigger & footer actionsA confirmation dialog with cancel/confirm actions.
ModalScrollable contentLong body with Accept/Decline footer actions.
ModalBlocking dialogNo close button; overlay and Escape disabled.

Open the dialog, then close it with Escape or the overlay. Focus returns to the button that opened it.

ModalFocus restorationFocus returns to the trigger after closing.
ModalPlacement overrideCentered vs. a top-anchored panel via className.

Design system

Active

Manage project actions

DropMenuAction menuBasic trigger with icons and grouped items.
DropMenuProfile menuAvatar trigger with account header and sign-out.

Menu open: false · Compact: false

Standard mode
DropMenuControlledExternal open state and a checkbox-style item.
SideMenuVariantsBadges, icons, child values and a disabled row.

Selected: overview

SideMenuControlledExternal buttons drive the active selection.