UI Components

Browse 50+ shadcn/ui primitives and custom components with variants, sizes, and interactive states.

Actions

Buttons, toggles, and grouped actions.

Button

Variants

Sizes

States

Button Group

Horizontal

With text addon

https://

Vertical

Toggle

Variants

Sizes

Toggle Group

Single

Multiple

Forms

Inputs, pickers, and validated forms.

Form

Used for account notifications.

Input

States

Textarea

States

Select
Combobox
Checkbox
Radio Group
Switch

Sizes

With Icons

States

Input Group

Start addon

End addon

Textarea

Password Input

Default

With error

Password is required

Input OTP
Calendar

Single date

Label
Input Error

This field is required

Data & Charts

Charts, data tables, and stat cards.

Chart

Loading

Data Table
Email
Ava Thompsonava@example.comProActive
Liam Carterliam@example.comFreeInactive
Noah Patelnoah@example.comTeamActive
Mia Rossimia@example.comProActive
Ethan Kimethan@example.comFreeActive

Showing 1-5 of 7

1 / 2

Loading

Loading...

Empty

No data found
Table
Team members and their roles.
NameStatusRole
AliceActiveAdmin
BobAwayUser
Total2 members
Stat Card

1,240

Active users

86

Inactive users

312/400

Active subscriptions

4

Subscriptions due

Loading

Data Display

Cards, avatars, badges, and status indicators.

Card

Glass

Card title
Card description text.

Premium glass card with glow.

Notifications
Manage your alerts.

Glass card with a header action slot.

Flat

Card title
Card description text.

Simple bordered card without shadow.

Notifications
Manage your alerts.

Flat card with a header action slot.

Avatar

With image

CN

Fallback

NE
Badge

Variants

defaultsecondarysuccesswarningdestructiveoutlinesuccessSubtleprimaryOutlinesuccessOutlinewarningOutlinedestructiveOutline
Status Indicator

Variants

successwarningdestructivemuted

Sizes

Pulse
Icon

Phosphor icons

Feedback

Alerts, toasts, progress, and loading states.

Alert

Interactive

Variants

Toast

Types

With description

Loading

Progress

Variants

Interactive

Spinner
Skeleton

Profile placeholder

Overlays

Dialogs, sheets, popovers, menus, and tooltips.

Dialog
Sheet
Popover
Dropdown Menu
Tooltip

Layout

Accordions, collapsibles, carousels, and separators.

Accordion

Single collapsible

Collapsible

3 starred repositories

Separator

Above separator

Below separator

Placeholder Pattern