Kitchen Sink

A collection of all the components available in Basecoat.

Accordion

Is it accessible?

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

Is it styled?

Yes. It comes with default styles that match the other components' aesthetics.

Is it animated?

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

What are the key considerations when implementing a comprehensive enterprise-level authentication system?

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.

How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?

Modern distributed systems use techniques like conflict-free replicated data types (CRDTs), vector clocks, and distributed consensus algorithms to handle eventual consistency.

Alert

Alert Dialog

Are you absolutely sure?

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

Avatar

@hunvreus CN @shadcn @adamwathan
@hunvreus @shadcn @adamwathan

Badge

Primary Secondary Outline Destructive Badge 8 99 20+

Breadcrumb

  1. Home
  3. Components
  5. Breadcrumb

Button

Button Group

Card

Login to your account

Enter your details below to login to your account

Forgot your password?

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
@hunvreus @shadcn @adamwathan

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

Checkbox

You can enable or disable notifications at any time.

Combobox

Dialog

Edit profile

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

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.

Dropdown Menu

Form

This is your public display name.

You can manage email addresses in your email settings.

You can @mention other users and organizations.

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

Select the items you want to display in the sidebar.

Your date of birth is used to calculate your age.

Email Notifications

Input

Input Group

https://

Label

Pagination

Popover

Radio Group

Select

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

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

Textarea

Your message will be copied to the support team.

Toast

Tooltip