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

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

Dialog

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

Radio Group

Select

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