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, description and no title.
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

@hunvreusCN@hunvreus@hunvreus
@hunvreus@shadcn@adamwathan
@hunvreus@shadcn@adamwathan

Badge

PrimarySecondaryOutlineDestructiveBadgeAlert89920+

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
12350m2$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.

Command

Combobox

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.

Empty

No Projects Yet

Create your first project to get started.

Nothing to review

You're all caught up. Check back later.

Field

We'll never share it.

That username is already taken.

Write a short bio.

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.

Icon

Lucide icons rendered via `glaze_basecoat/icon`.

Searchsearch
Settingssettings
Plusplus
Mailmail
Calendarcalendar
GitHubgithub
Alertcircle-alert
Checkcheck
Xx
Arrowarrow-right
Starstar
Heartheart

Input

Item

Inbox

All notifications and messages in one place.

@hunvreus

Ronan Berder

hunvreus@example.com

Photo

Design system

A link item with an image and a trailing action.

Kbd

Press Ctrl + K to open search.

ShortcutCtrl + K
SequenceShift + Ctrl + P

Label

Pagination

Popover

Progress

Upload - 60%
Indexing - 25%

Radio Group

Select

Skeleton

Slider

Spinner

Small
Default
Large

Loading state

This card is dimmed and blocked while loading.

Fetching data...

Please wait.

Switch

Table

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidPaypal$450.00
INV005PaidCredit Card$550.00
INV006PendingBank Transfer$200.00
INV007UnpaidCredit Card$300.00
Total$2,500.00

Tabs

Account

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

Preview

Theme Switcher

Theme

Swatches are rendered from Basecoat CSS variables (e.g. --primary).

Background--background
Foreground--foreground
Primary--primary
Secondary--secondary
Accent--accent
Destructive--destructive
Border--border
Ring--ring
Card--card

Textarea

Type your message and press enter to send.

Toast

Tooltip