Accordion

Alert
Alert Dialog
Aspect Ratio
Photo by Drew Beamer
Photo by Drew Beamer
Avatar
CNCNCNER
CNLRER
CNLRER
CNLRER
Badge
BadgeSecondaryDestructiveOutlineBadgeAlert89920+
Button
Button Group
Text
Prefix
Suffix
W
px
%
1.2K
Calendar
Single Selection
October 2025
Multiple Selection
October 2025
Range Selection
January 2025
February 2025
With booked dates
February 2025
Range Selection + Locale
abril 2025
mayo 2025
junio 2025
With Time Input
October 2025
With Presets
October 2025
With Custom Days and Formatters
December 2025
Card
Login to your account
Enter your email 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
CNLRER
Is this an image?
This is a card with an image.
Photo by Drew Beamer
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
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

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

Collapsible

@peduarte starred 3 repositories

@radix-ui/primitives
Combobox
Command

Press J

Command Palette

Search for a command to run...

Context Menu
Right click here
Date Picker
Dialog
Drawer
Empty
No projects yet
You haven't created any projects yet. Get started by creating your first project.
No results found
No results found for your search. Try adjusting your search terms.
Learn more
404 - Not Found
The page you're looking for doesn't exist. Try searching for what you need below.
/
Need help? Contact support
Nothing to see here
No posts have been created yet. Get started by creating your first post to share with the community.
404 - Not Found
The page you're looking for doesn't exist. Try searching for what you need below.
/
Need help? Contact support
No projects yet
You haven't created any projects yet. Get started by creating your first project.
Field

Enter your name so it is long enough to test the layout.

Enter your message so it is long enough to test the layout.

Enter your message so it is long enough to test the layout.

Enter your name so it is long enough to test the layout.

Enable Touch ID to quickly unlock your device.

Enable Touch ID to quickly unlock your device.

Enable Touch ID to quickly unlock your device.

Enable Touch ID to quickly unlock your device.

Battery Level

Choose your preferred battery level.

Search Results Search Results

Only selected categories will appear in search results.

Measurement System

Select your preferred measurement system.

Privacy Settings
Choose who can see your profile and what they can see.
Privacy Settings
Choose who can see your profile and what they can see.
Privacy Settings
Choose who can see your profile and what they can see.
How did you hear about us?

Select the option that best describes how you heard about us.

Buy your cluster
Need a custom setup? Contact us.
GPU Type

Select the GPU type for your cluster.

Buy a single node with 8 GPUs or many interconnected nodes. You can add more GPUs later.

Starting date

You can add more time later.

Shipping Method

Select the shipping method for your order.

GPU Type

Select the GPU type for your cluster.

Compute Environment

Select the compute environment for your cluster.

Starting date

When you want to start your cluster.

Subscription Plan

Choose your subscription plan.

Display Settings

Manage your display settings.

Display Resolution

Select your preferred display resolution.

Input Fields
Different input field configurations

Choose a unique username for your account.

We'll never share your email with anyone.

This field must be filled out.

This field is currently disabled.

Text Input Types
Text-based HTML input variations

Standard text input field.

Email address with validation.

Password field with hidden text.

Telephone number input.

Website URL with validation.

Search field with clear button.

Numeric input (0-100).

Feedback Form
Help us improve by sharing your experience

Your name is optional.

Poor (1) / Rating: 5 / Excellent (10)

Please share your thoughts, suggestions, or report any issues...

Job Application
Apply for a position at our company

Optional: Share your portfolio or professional profile.

Upload your resume in PDF, DOC, or DOCX format (max 5MB).

Date Picker Fields
Different date picker configurations

We use this to calculate your age and provide age-appropriate content.

Select a date for your appointment (weekdays only).

Select start and end dates for your report.

Choose your vacation period. Quick presets available.

This field is currently disabled.

Sign in to your account
Enter your credentials to access your account
New to our platform?

Don't have an account? Create an account

Special Input Types
Date, time, file and other special inputs

Native date picker.

Time selection (24-hour format).

Combined date and time picker.

Month and year selector.

Week number selector.

Upload images or PDF files.

Upload multiple image files.

Textarea Fields
Different textarea field configurations

Maximum 500 characters allowed.

Tell us about yourself in a few sentences.

Select Fields
Different select field configurations

Select the country where you currently reside.

Choose your local timezone for accurate scheduling.

Profile Settings
Update your profile information and preferences
JD
Notification Preferences

Manage your notification preferences.

Receive emails about new products, features, and more. If you don't want to receive these emails, you can turn them off.

Notification Settings

Configure how and when you receive notifications

Receive updates via email about your account activity

Get instant notifications on your device

Receive text messages for important updates

Get a summary of your activity every week

Privacy Settings

Control your privacy and data sharing preferences

Show these items on the desktop:

Select the items you want to show on the desktop.

Make your profile visible to everyone

Help improve our services by sharing anonymous usage data. This data helps us understand how our product is used and how we can improve it.

Customer Survey
Help us understand your needs better (5 minutes)
Create an account
Enter your information below to create your account

We'll use this to contact you. We will not share your email with anyone else.

Must be at least 8 characters long.

Please confirm your password.

Already have an account? Sign in

Radio Fields
Different radio field configurations
Subscription Plan
Size

Select your preferred size.

Notification Preferences

Choose how you want to receive notifications.

Delivery Speed

Get your order quickly.

Get your order in a few days.

Get your order in a few days.

Checkbox Fields
Different checkbox field configurations

Receive weekly updates about new features and promotions.

Preferences

Select all that apply to customize your experience.

Skills

Select all technologies you are proficient with.

Slider Fields
Different slider field configurations

Current brightness: 75%

Higher quality uses more bandwidth.

Newsletter Signup
Stay updated with our latest news and updates

We'll send our newsletter to this email address.

Interests (Select all that apply)
Payment Information
Enter your payment details to complete your purchase

3 or 4 digit security code.

Billing Address

Please enter your billing address.

Contact Us
Get in touch with our team for any questions or support

We'll use this to contact you. We will not share your email with anyone else.

Please provide as much detail as possible to help us assist you better.

Job Application Form
Complete all sections to submit your application
Personal Information

Your basic contact information.

We'll use this for all communications.

Professional Background

Years of experience

Additional Information

Optional: Share your portfolio or GitHub profile

Briefly describe your interest and qualifications (500 words max)

PDF or Word document (max 5MB)

Verification

Enter the 6-digit code sent to your email

Receive updates about your application status

Personal Information

Your basic contact information.

We'll use this for all communications.

Briefly describe your interest and qualifications (500 words max)

PDF or Word document (max 5MB)

Professional Background

3 years of experience

Technical Skills

Select all that apply

Verification

Enter the 6-digit code sent to your email

Receive updates about your application status

Checkout
Complete your order by filling in the details below
Shipping Information

Enter your shipping address where we'll deliver your order

We'll send your receipt to this email

Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

Additional Options

Choose how you'd like us to stay in touch

Switch Fields
Different switch field configurations

Turn on airplane mode to disable all connections.

Receive notifications about updates and new features.

Receive emails about new products, features, and more.

Automatically save your work every 5 minutes.

Manage your privacy preferences.

This feature is currently unavailable.

Toggle Group Fields
Different toggle group configurations

Filter by multiple statuses.

Select the subscription plan that you want to subscribe to.

This toggle group is disabled.

OTP Input Fields
Different OTP input configurations

Enter the 6-digit code sent to your email.

Enter the code from your authenticator app.

Enter your 4-digit PIN (numbers only).

Enter your 8-character license key.

Enter the security code to continue.

FieldSet & FieldLegend
Different fieldset configurations
Basic FieldSet
FieldSet with Description

This fieldset includes a description to provide context.

Communication Preferences

Choose how you'd like us to keep in touch with you.

Preferred Contact Method

Choose how you'd like us to keep in touch with you.

Notification Types

Choose which notifications you'd like to receive.

Account Settings

Add an extra layer of security to your account.

Make your profile visible to other users.

Let others see when you're online.

Emergency Contact

Provide emergency contact information for safety purposes.

Full name of your emergency contact.

Best number to reach your emergency contact.

Additional Information
Field Separator
Different ways to use the FieldSeparator component

This is the first section of the form.

A simple separator line appears above this section.

Or continue with
Additional Options
Or choose a different path
Account Settings

Receive updates about your account activity.

Allow others to view your profile information.

Finder Preferences
Configure what items appear on your desktop

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.

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 your account security.

Hover Card
Input
Input Group

This is a description of the input group.

(optional)
https://
First Name
20/240 characters
⌘K
⌘K
Ask AI
Tab
CtrlC

This username is available.

12 results
Disabled
https://
.com

This is a description of the input group.

This is a description of the input group.

script.js
Line 1, Column 1JavaScript

This is a description of the input group.

This is a description of the input group.

This is a description of the input group.

0/280 characters
12 messages left

This is a description of the input group.

Input Otp
1
2
3
4
5
6
Item
Item Title
Item Title
Item Title

Item Description

Item Title

Item Description

Item Title

Item Description

Item Title

Item Description

Item Title
Item Title

Item Description

s
shadcn

Just shipped a component that fixes itself

p
pranathip

My code is so clean, it does its own laundry

e
evilrabbit

Debugging is like being a detective in a crime movie where you're also the murderer

m
maxleiter

I don't always test my code, but when I do, I test it in production

CNLRER
Design Department

Meet our team of designers, engineers, and researchers.

Your download has started.
Downloading...

129 MB / 1000 MB

Kbd
Ctrl⌘KCtrl + B
C
CtrlShiftP
LeftVoice Enabled
Space
File
Label
Native Select
Basic Select
With Groups
Disabled State
Error State
Popover
Progress
Radio Group
Resizable
One
Two
Three
Sidebar
Content
Header
Content
Scroll Area

Tags

v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
v1.2.0-beta.37
v1.2.0-beta.36
v1.2.0-beta.35
v1.2.0-beta.34
v1.2.0-beta.33
v1.2.0-beta.32
v1.2.0-beta.31
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1
Photo by Ornella Binni
Photo by Ornella Binni
Photo by Tom Byrom
Photo by Tom Byrom
Photo by Vladimir Malyav
Photo by Vladimir Malyav
Select
Separator
Tailwind CSS
A utility-first CSS framework.
Blog
Docs
Source
Sheet
Skeleton
Slider
0.3, 0.7
Sonner
Spinner
BadgeBadgeBadgeBadge
No projects yet
You haven't created any projects yet. Get started by creating your first project.
Switch
Table
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$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.
Textarea
Type your message and press enter to send.
Toggle
Toggle Group
Tooltip