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 matches the other components' aesthetic.

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?

Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.

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

Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.

Alert

Success! Your changes have been saved

This is an alert with icon, title and description.
This is an alert with icon, title and description.
This one has a description only. No title. No icon.

Let's try one with icon and title.

This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines

This is a very long alert description that demonstrates how the component handles extended text content and potentially wraps across multiple lines

This is an extremely long alert title that spans multiple lines to demonstrate how the component handles very lengthy headings while maintaining readability and proper text wrapping behavior

This is an equally long description that contains detailed information about the alert. It shows how the component can accommodate extensive content while preserving proper spacing, alignment, and readability across different screen sizes and viewport widths. This helps ensure the user experience remains consistent regardless of the content length.

Something went wrong!

Your session has expired. Please log in again.

Something went wrong!

Please verify your billing information and try again.

  • Check your card details
  • Ensure sufficient funds
  • Verify billing address

Plot Twist: This Alert is Actually Amber!

This one has custom colors for light and dark mode.

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

Badge

Primary Secondary Outline Destructive Badge Alert 8 99 20+

Button

Card

Login to your account

Enter your details below to login to your account

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
Footer

Header + Content + Footer

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

Content
Footer

Checkbox

By clicking this checkbox, you agree to the terms and conditions.

Combobox

Next.js
SvelteKit
Nuxt.js
Remix
Astro
Americas
(GMT-5) New York
(GMT-8) Los Angeles
(GMT-6) Chicago
(GMT-5) Toronto
(GMT-8) Vancouver
(GMT-3) São Paulo
Europe
(GMT+0) London
(GMT+1) Paris
(GMT+1) Berlin
(GMT+1) Rome
(GMT+1) Madrid
(GMT+1) Amsterdam
Asia/Pacific
(GMT+9) Tokyo
(GMT+8) Shanghai
(GMT+8) Singapore
(GMT+4) Dubai
(GMT+11) Sydney
(GMT+9) Seoul

Create timezone

Dialog

Edit profile

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

Scrollable Content

This is a dialog with scrollable content.

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. 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. 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. 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. 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.

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

Receive emails about new products, features, and more.

Receive emails about new products, features, and more.

Input

Label

Pagination

Popover

Dimensions

Set the dimensions for the layer.

Radio Group

Select

Fruits
Apple
Banana
Blueberry Blueberry Blueberry Blueberry Blueberry
Grapes
Pineapple
Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Item 33
Item 34
Item 35
Item 36
Item 37
Item 38
Item 39
Item 40
Item 41
Item 42
Item 43
Item 44
Item 45
Item 46
Item 47
Item 48
Item 49
Item 50
Item 51
Item 52
Item 53
Item 54
Item 55
Item 56
Item 57
Item 58
Item 59
Item 60
Item 61
Item 62
Item 63
Item 64
Item 65
Item 66
Item 67
Item 68
Item 69
Item 70
Item 71
Item 72
Item 73
Item 74
Item 75
Item 76
Item 77
Item 78
Item 79
Item 80
Item 81
Item 82
Item 83
Item 84
Item 85
Item 86
Item 87
Item 88
Item 89
Item 90
Item 91
Item 92
Item 93
Item 94
Item 95
Item 96
Item 97
Item 98
Disabled
Bar
Line
Pie

Skeleton

Slider

Switch

Table

A list of your recent invoices.
Invoice Status Method Amount
INV001 Paid Credit Card $250.00
INV002 Pending PayPal $150.00
INV003 Unpaid Bank Transfer $350.00
INV004 Paid Paypal $450.00
INV005 Paid Credit Card $550.00
INV006 Pending Bank Transfer $200.00
INV007 Unpaid Credit Card $300.00
Total $2,500.00

Tabs

Account

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

Textarea

Type your message and press enter to send.

Toast

Tooltip