{% load static %} Kitchen Sink - Basecoat Component Library

Kitchen Sink

A collection of all the components available in Basecoat.

Accordion

 Yes. It adheres to the WAI-ARIA design pattern. Yes. It comes with default styles that match the other components' aesthetics. Yes. It's animated by default, but you can disable it if you prefer. When implementing an enterprise-level authentication system, consider multi-factor authentication, role-based access control, session management, password policies, OAuth integration, audit logging, and compliance with security standards. Modern distributed systems use techniques like conflict-free replicated data types (CRDTs), vector clocks, and distributed consensus algorithms to handle eventual consistency.

Alert

Success! Your changes have been saved

This is an alert with icon, title and description.
This is an alert with description and no title.

This one has a title only. No description. No icon.

Let's try one with icon and title.

Something went wrong!

Your session has expired. Please log in again.

Plot Twist: This Alert is Actually Amber!

This one has custom colors for light and dark mode.

Alert Dialog

 Open dialog

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

Cancel Continue

Avatar
CN

Badge
Primary Secondary Outline Destructive Badge 8 99 20+

Breadcrumb

 Home Components Breadcrumb

Button
Primary Outline Ghost Danger Secondary Link
Send Learn more
Loading
Primary Outline Ghost Danger Secondary Link
Send Learn more
Loading
Primary Outline Ghost Danger Secondary Link
Send Learn more
Loading

Button Group

 Left Center Right

Card

Login to your account

Enter your details below to login to your account
Email
Password
Forgot your password?
Login Login with Google

Don't have an account? Sign up

Meeting Notes

Transcript from the meeting with the client.

Client requested dashboard redesign with focus on mobile responsiveness.

  1. New analytics widgets for daily/weekly metrics
  2. Simplified navigation menu
  3. Dark mode support
  4. Timeline: 6 weeks
  5. Follow-up meeting scheduled for next Tuesday

Is this an image?

This is a card with an image.

 Photo by Drew Beamer
1
2
350m²
$135,000
Content Only

Header Only

This is a card with a header and a description.

Header and Content

This is a card with a header and a content.

 Content only. Footer Only

Header + Footer

This is a card with a header and a footer.

 Footer Content Content Footer

Header + Content + Footer

This is a card with a header, content and footer.

 Content Footer

Checkbox

You can enable or disable notifications at any time.

Combobox
Next.js SvelteKit Nuxt.js Remix Astro New York (GMT-5) Los Angeles (GMT-8) London (GMT+0) Paris (GMT+1) Tokyo (GMT+9)

Dialog
Edit Profile Scrollable Content

Edit profile

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

Scrollable Content

This dialog demonstrates scrollable content when it exceeds the viewport height.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 Close

Dropdown Menu
Profile Billing Team Subscription Logout
hunvreus
hunvreus@example.com
Profile Settings Logout

Form
Username

This is your public display name.

Email user@example.com personal@example.com

You can manage email addresses in your email settings.

Bio

You can @mention other users and organizations.

Notify me about...

You can manage your mobile notifications in the mobile settings page.

Sidebar

Select the items you want to display in the sidebar.

Date of birth

Your date of birth is used to calculate your age.

Email Notifications

Submit

Input

Input Group
Search https://

Label
Username
Disabled
Message

Pagination

 Previous 1 2 3
Next

Popover

Dimensions

Width
Height

Radio Group

Select
Apple Banana Blueberry Grapes Pineapple Item 0 Item 1 Item 2 Option 1 Foo Bar Baz Qux

Separator

Radix Primitives

An open-source UI component library.

Blog
Docs
Source

Skeleton

Slider

Spinner

Switch

Table

 Invoice Status Method Amount INV001 Paid Credit Card $250.00 INV002 Pending PayPal $150.00 INV003 Unpaid Bank Transfer $350.00 INV004 Paid Credit Card $450.00

Tabs

 Account Password

Account

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

Textarea
Your message

Your message will be copied to the support team.

Disabled

Toast
Success Error With Description

Tooltip
Hover me (top) Hover me (right) Hover me (bottom) Hover me (left)