shadcn-preact

Components

Accordion

Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.

We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.

Subscription & Billing
Common questions about your account, plans, payments and cancellations.

We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.

We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.

Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.

Alert

Alert Dialog

Aspect Ratio

Photo
Photo
Photo

Avatar

PPCNCN
CNER
CNLRER
+3
CNLRER
CNLRER
+3
CNLRER
CNCNCN

Badge

BlueGreenSkyPurpleRed
BadgeSecondaryDestructiveOutline
VerifiedBookmark
Open Link
DeletingGenerating
DefaultSecondaryDestructiveOutlineGhost

Button

Login

Button Group

Calendar

October 2026
October 2026
January 2026
February 2026
October 2026

Card

Login to your account
Enter your email below to login to your account
Forgot your password?
Terms of Service
Review the terms before accepting the agreement.

These terms govern your use of the workspace, including access to shared documents, project files, and collaboration tools.

You are responsible for the content you upload and for ensuring that your team has the appropriate permissions to view or edit it.

We may update features or limits as the service evolves. When those changes materially affect your workflow, we will notify your workspace administrators.

By continuing, you agree to keep your account credentials secure and to follow your organization's acceptable use policies.

Event cover
Featured
Design systems meetup
A practical talk on component APIs, accessibility, and shipping faster.
Scheduled reports
Weekly snapshots. No more manual exports.
  • Choose a schedule (daily, or weekly).
  • Send to channels or specific teammates.
  • Include charts, tables, and key metrics.

Chart

Bar Chart - Interactive
Showing total visitors for the last 3 months
Pie Chart - Donut with Text
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Radial Chart - Grid
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.

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

Show these items on the desktop:

Select the items you want to show on the desktop.

NameEmailRole
Sarah Chensarah.chen@example.comAdmin
Marcus Rodriguezmarcus.rodriguez@example.comUser
Priya Patelpriya.patel@example.comUser
David Kimdavid.kim@example.comEditor

Collapsible

Order #4189

StatusShipped
Radius
Set the corner radius of the element.

Combobox

Context Menu

Dialog

Drawer

Empty

CNLRER
No Team Members
Invite your team to collaborate on this project.
LR
User Offline
This user is currently offline. You can leave a message to notify them or try again later.
No Notifications
You're all caught up. New notifications will appear here.
No projects yet
You haven't created any projects yet. Get started by creating your first project.
Create project
Learn more
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
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
Cloud Storage Empty
Upload files to your cloud storage to access them anywhere.

Field

Address Information

We need your address to deliver your order.

Choose a unique username for your account.

Must be at least 8 characters long.

Profile

Fill in your profile information.

Provide your full name for identification

Share your thoughts about our service.

Hover Card

Input

Your API key is encrypted and stored securely.

This field is currently disabled.

Choose a unique username for your account.

We'll send updates to this address.

Select a picture to upload.

https://

This field contains validation errors.

This field must be filled out.

Input Group

USD

Footer positioned below the input.

0/280

Footer positioned below the textarea.

Full Name

Header positioned above the input.

script.js

Header positioned above the textarea.

.com
12 results
Card with Input Group
This is a card with an input group.
https://
0/500 characters

Icon positioned at the end.

Icon positioned at the start.

⌘K
Saving...
Please wait...
$
USD
https://
.com
@company.com
120 characters left

This is a description of the input group.

This is a description of the input group.

This is a description of the input group.

Ask, Search or Chat...

This is a description of the input group.

0/280 characters
script.js
Line 1, Column 1JavaScript
Line 1, Column 1
script.js
⌘K
⌘K
Ask AI
Tab
CtrlC

This username is available.

12 results
Disabled

This is a description of the input group.

Item

ER
Evil Rabbit

Last seen 5 months ago

ER
No Team Members

Invite your team to collaborate on this project.

Basic Item

A simple item with title and description.

Your profile has been verified.
s
shadcn

shadcn@vercel.com

m
maxleiter

maxleiter@vercel.com

e
evilrabbit

evilrabbit@vercel.com

v0-1.5-sm
v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg
v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini
v0-2.0-mini

Open Source model for everyone.

Security Alert

New login detected from unknown device.

Midnight City Lights
Midnight City Lights - Electric Nights

Neon Dreams

3:45

Coffee Shop Conversations
Coffee Shop Conversations - Urban Stories

The Morning Brew

4:05

Digital Rain
Digital Rain - Binary Beats

Cyber Symphony

3:30

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

Default Size

The standard size for most use cases.

Small Size

A compact size for dense layouts.

Extra Small Size

The most compact size available.

Default Variant

Transparent background with no border.

Outline Variant

Outlined style with a visible border.

Muted Variant

Muted background for secondary content.

Kbd

⌘⇧⌥⌃Ctrl+B

Use Ctrl + BCtrl + K to open the command palette

⌘K

Label

Native Select

Pagination

Popover

Progress

x
Upload progress
x

Radio Group

Standard spacing for most use cases.

More space between elements.

Minimal spacing for dense layouts.

Subscription Plan

Yearly and lifetime plans offer significant savings.

Notification Preferences

Choose how you want to receive notifications.

Scroll Area

Select

Toggle to align the item with the trigger.

Separator

shadcn/ui
The Foundation for your Design System
A set of beautifully designed components that you can customize, extend, and build on.
Item 1
Value 1
Item 2
Value 2
Item 3
Value 3
SettingsManage preferences
AccountProfile & security
Blog
Docs
Source

Sheet

Skeleton

Slider

0.3, 0.7

Spinner

SyncingUpdatingProcessing
Processing payment...
$100.00
Processing your request
Please wait while we process your request. Do not refresh the page.
Validating...

Switch

Focus is shared across devices, and turns off when you leave the app.

You must accept the terms and conditions to continue.

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
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
Total$2,500.00

Tabs

Overview
View your key metrics and recent project activity. Track progress across all your active projects.
You have 12 active projects and 3 pending tasks.

Textarea

Enter your message below.

Please enter a valid message.

Toggle

Toggle Group

Use font-normal to set the font weight.

Tooltip