Kitchen Sink

Accordion

Single, multiple, open, and disabled items.

Can I use native details?

Yes. Basecoat enhances semantic details and summary elements.

Does it support keyboard input?

The native controls retain their built-in keyboard behavior.

Unavailable question

This item cannot be opened.

Multiple item one

More than one item may remain open.

Multiple item two

This one starts open as well.

Alert

Default, destructive, action, and custom-color treatments.

Saved successfully

Your changes are now live.

Heads up

A new version is available.

Payment failed

Check your card details and try again.

Custom warning

This uses utility colors on the standard alert.

Alert Dialog

Explicit decisions in default and compact sizes.

Delete project?

This action cannot be undone. Choose carefully before continuing.

Discard draft?

This action cannot be undone. Choose carefully before continuing.

Avatar

Fallbacks, sizes, status badges, and groups.

GSAMRD
GSAMRD+8

Badge

All variants, links, icons, and compact counters.

primarysecondaryoutlineghostdestructive VerifiedLinked 99+

Button

Every variant across text and icon sizes, plus disabled/loading states.

xs
sm
default
lg

Button Group

Horizontal, vertical, segmented, and split actions.

Card

Full composition, dense size, media, and partial structures.

Deploy application

Push the current release to production.

All checks passed. Version 1.8.0 is ready for deployment.

Dense card

Reduced spacing for compact interfaces.

This card uses data-size=sm.

Compact

Media card

Cards can include rich visual content.

Content only

Header only

Description without content.

Footer only

Checkbox

Checked, unchecked, disabled, invalid, and rich choice cards.

Control helper text.

Control helper text.

Control helper text.

Combobox

Single, clearable, multiple, selected, and auto-highlight modes.

Command

Standalone filtering and native command dialog.

Dialog

Standard and compact-width compositions, including a surface without an implicit close button.

Edit profile

Update your public profile details.

Quick note

Empty

Icon, avatar, action, bordered, and muted empty states.

No messages

New conversations will appear here.

GS

Invite your team

Collaboration works better with company.

Field

Vertical, horizontal, responsive, invalid, disabled, and grouped controls.

Account details

Fields provide consistent labels, controls, help, and errors.

Used for account notifications.

Input

Text, email, password, number, date, file, disabled, and invalid inputs.

Input Group

Prefixes, suffixes, actions, textarea, and vertical composition.

https://
€EUR
Message
0 / 240

Item

Default, outlined, muted, compact, linked, grouped, and aside content.

Default item

A flexible row for settings and lists.

Outlined item

Carries its own visible boundary.

Muted compact item

Dense secondary information.

Linked item

The entire row is navigable.

Kbd

Single keys, shortcuts, and inline command hints.

Esc⌘K

Label

Associated, wrapping, required, and disabled labels.

Native Select

Default, small, grouped, disabled, and invalid native controls.

Pagination

Previous, numbered, current, ellipsis, and next controls.

Popover

Placement and alignment around composed content.

Progress

Empty, partial, near-complete, and complete determinate states.

Upload0%
Upload28%
Upload64%
Upload100%

Radio Group

Basic, selected, disabled, invalid, and rich-card radio choices.

Deployment region

Deploy services in Europe.

Deploy services in United States.

Deploy services in Asia Pacific.

Select

Single, placeholder, grouped, disabled option, searchable, and multiple selection.

Scroll Area

Native overflow with standard and compact scrollbar styling.

Scrollable row 1
Scrollable row 2
Scrollable row 3
Scrollable row 4
Scrollable row 5
Scrollable row 6
Scrollable row 7
Scrollable row 8
Scrollable row 9
Scrollable row 10
Scrollable row 11
Scrollable row 12
Scrollable row 13
Scrollable row 14
Scrollable row 1
Scrollable row 2
Scrollable row 3
Scrollable row 4
Scrollable row 5
Scrollable row 6
Scrollable row 7
Scrollable row 8
Scrollable row 9
Scrollable row 10
Scrollable row 11
Scrollable row 12
Scrollable row 13
Scrollable row 14

Skeleton

Text, avatar, card, and table loading placeholders.

Slider

Default, stepped, disabled, and boundary values.

Spinner

Lucide-based indicators at several sizes and inside composed controls.

Syncing

Switch

Default, small, checked, disabled, invalid, and descriptive switches.

Toggle this setting at any time.

Toggle this setting at any time.

Toggle this setting at any time.

Toggle this setting at any time.

Table

Semantic headers, numeric alignment, status badges, and horizontal overflow.

InvoiceStatusMethodAmount
INV-001PaidCard€250.00
INV-002PendingTransfer€125.00
INV-003FailedCard€480.00
Total€855.00

Tabs

Default, line, vertical, selected, and disabled tabs.

Account

Make changes to your account here. Click save when you're done.

Overview content.
Password content.
Preview content.
Home content.

Textarea

Default, fixed-height, disabled, invalid, and field-integrated textareas.

Maximum 500 characters.

Theme Switcher

Theme API composed with standard icon buttons.

Toast

Success, info, warning, error, action, persistent, and close-all examples.

Tooltip

Every side, alignment, keyboard focus, and disabled-control wrapper.