Basecoat UI Kitchen Sink

Comprehensive showcase of all Basecoat components with live examples and code snippets. This page demonstrates every component in the Basecoat UI library.

Accordion

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled?

Yes. It comes with default styles that matches the other components' aesthetic.

Is it animated?

Yes. It's animated by default, but you can disable it if you prefer.

Alert Dialog

Delete Item?

This action cannot be undone

Are you sure you want to delete this item? This will permanently remove it from your account.

Avatar

@hunvreus @shadcn
@hunvreus @shadcn @adamwathan

Badge

Badge

Button

Button Group

Card

Create an account

Enter your details below to create your account

Checkbox

Combobox

Type to search and select a framework

Dialog

Edit Profile

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

Field

Choose a unique username for your account.

Form

This is your public display name.

You can manage email addresses in your email settings.

You can @mention other users and organizations.

Your date of birth is used to calculate your age.

Email Notifications

Receive emails about new products, features, and more.

Receive emails about your account security.

Input

Input Group

https://
USD

Item

Profile
View your profile settings
Settings
Manage your preferences
Billing
Payment and invoices

Label

Pagination

Popover

Progress

Progress 60%
Loading 33%
Complete 100%

Radio Group

Select

Skeleton

Basic Shapes

Card Skeleton

Slider

Spinner

Switch

Table

Name Email Role Actions
John Doe john@example.com Admin
Jane Smith jane@example.com Editor
Bob Johnson bob@example.com Viewer

Tabs

Account

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

Textarea

Theme Switcher

Tooltip