Components

Accordion

Alert

Success! Your changes have been saved

This is an alert with icon, title and description.

This one has an icon and a description only. 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.

Unable to process your payment.

Please verify your billing information and try again.

Check your card details
Ensure sufficient funds
Verify billing address

The selected emails have been marked as spam.

Plot Twist: This Alert is Actually Amber!

This one has custom colors for light and dark mode.

Alert Dialog

Aspect Ratio

Avatar

CFLRER

Badge

Secondary

Destructive

Outline

Badge

Alert

20+

Link

Button

Button Group

Status

Calendar

December 2025

Su	Mo	Tu	We	Th	Fr	Sa
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3

	Su	Mo	Tu	We	Th	Fr	Sa
49	30	1	2	3	4	5	6
50	7	8	9	10	11	12	13
51	14	15	16	17	18	19	20
52	21	22	23	24	25	26	27
01	28	29	30	31	1	2	3

December 2025

January 2025

February 2025

January 2025

	Su	Mo	Tu	We	Th	Fr	Sa
01
02
03
04
05

January 2025

February 2025

March 2025

Card

Meeting Notes

Transcript from the meeting with the client.

Client requested dashboard redesign with focus on mobile responsiveness.

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

CNLRER

Is this an image?

This is a card with an image.

4 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

Footer Only

Header + Footer

This is a card with a header and a footer.

Footer

Content

Footer

Header + Footer

This is a card with a header and a footer.

Content

Footer

Carousel

Chart

Area Chart

Showing total visitors for the last 6 months

Trending up by 5.2% this month

January - June 2024

Bar Chart - Multiple

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

Bar Chart - Mixed

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

Line Chart - Multiple

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

Checkbox

Accept terms and conditions

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

Enable notifications

You can enable or disable notifications at any time.

Checkbox Cards

Enable notifications

You can enable or disable notifications at any time.

Dark mode

Switch between light and dark mode preferences.

Automatic updates

Keep your system up to date with latest features.

Data analytics

Help us improve by sharing anonymous usage data.

Cloud sync

Synchronize your settings across multiple devices.

Remember sessions

Resume your work exactly where you left off.

Checkbox Group

Standard

Enhanced

Optimized

Inactive

Starter Plan

Perfect for small businesses getting started with our platform

Pro Plan

Advanced features for growing businesses with higher demands

Business Plan

Comprehensive solution for medium-sized businesses

Collapsible

@peduarte starred 3 repositories

@radix-ui/primitives

Combobox

Command

Press ⌘J

Date Picker

Dialog

Drawer

Empty

No projects yet

You haven't created any projects yet. Get started by creating your first project.

Learn more

No results found

Your search didn't return any results. Try adjusting your filters or updating your query.

Press/to focus search

Nothing to see here

No posts have been published yet. Kick things off by creating your first post.

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

Need help? Contact support

Field

Security options

Control how your organisation protects sessions and invites.

Require session re-auth

Ask members to sign in again every 30 days.

Restrict invites to verified domains

Members can only invite collaborators with company email addresses.

Require admin approval

New members remain pending until an admin approves them.

Recommended

Require 2-step verification

Usage intent

Choose what fits best so we can tailor onboarding.

Team collaboration

Coordinate projects, share documents, and manage feedback loops.

Client delivery

Invite clients to review progress and sign off on milestones.

Community programs

Manage volunteers, track participation, and share updates.

Input

Input Date

Coming soon

Input Group

Default

Disabled

Invalid

Icon (left)

Icon (right)

Button

Dropdown

Results

12 results

⌘K

Actions

Comment

Input Number

Input Otp

Simple

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Digits Only

With Separator

With Spacing

Input Password

Input Search

Input Time

Coming soon

Item

Item Title

Used to group related content with optional actions.

Item Title

Stack multiple items together for list layouts.

Design Review

Tomorrow · 10:00 AM – 12:00 PM

Design system sync is in progress.

Downloading UI Kit

129 MB of 512 MB

shadcn

Just shipped a component update for docs

pranathip

Working on the new design tokens release

evilrabbit

Shipping improvements to our accessibility pass

maxleiter

Polishing dashboards and performance metrics

CNMLER

Design Department

Meet the design, engineering, and research teams working on the system.

Midnight City Lights · Electric Nights

Neon Dreams

3:45

Coffee Shop Conversations · Urban Stories

The Morning Brew

4:05

Digital Rain · Binary Beats

Cyber Symphony

3:30

Sunset Boulevard · California Dreams

Golden Hour

3:55

Form validation messages overlap with floating labels

Form validation helper text overlaps with floating labels.

#1389

April 2, 2024

Button component ignores disabled state when variant is applied

Button disabled state does not respect custom variants.

#1247

March 15, 2024

Dialog component causes scroll lock on mobile devices

Scroll lock is not restored on mobile after closing dialog.

#892

February 8, 2024

Kbd

Common actions

Reload page

⌘R

Open command palette

⌘K

Toggle sidebar

⌘B

Format document

Shift⌥F

Single keys

EscTabEnterSpace↑↓←→

With tooltip

Label

Accept terms and conditions

Username

Disabled

Message

Menubar

Native Select

Basic Select

With Groups

Disabled State

Error State

Pagination

Progress

Progress Circle

0%Complete

20%

60%

90%

Radio

Default

Comfortable

Compact

Disabled

Radio Cards

Starter Plan

Perfect for small businesses getting started with our platform

Professional Plan

Advanced features for growing businesses with more demanding needs

Enterprise Plan

Comprehensive solution for large organizations with custom requirements

Team Plan

Collaborative features for teams up to 10 members with shared resources

Growth Plan

Scalable solution for businesses in rapid expansion phases

Premium Plan

Our most exclusive offering with priority support and advanced analytics

Radio Group

Default

Comfortable

Compact

Disabled

Starter Plan

Perfect for small businesses getting started with our platform

Pro Plan

Advanced features for growing businesses with higher demands

Business Plan

Comprehensive solution for medium-sized businesses

Resizable

One

Two

Three

Sidebar

Content

Header

Content

Scroll Area

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
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00