Starwind UI is now available! Get started

Popover

Basic and nested

Align: start, center, end

Side, sideOffset, and animationDuration

Dropdown

Card

Create project
Deploy your new project in one-click.

Small Size

Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.

Small Card
This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

With Image

Add an image before the card header to create a card with an image.

Event cover
Featured
Design systems meetup
A practical talk on component APIs, accessibility, and shipping faster.

Collapsible

@boston343 starred 3 repositories

@radix-ui/primitives

Default Open

@shadcn starred 2 repositories

astro

Theme Toggle Component

Theme Toggles

Badge

Default
Primary
Secondary
Outline
Info
Success
Warning
Error
Ghost
Primary sm
Primary md
Primary lg

Button

Button

Button Group Demo

Horizontal

Horizontal with Separator

Vertical

Vertical with Separator

Different Variants

With Text Label

Format:

Nested Button Groups

With Input

With Dropdown

With Select

Input OTP

Input Group

Basic Addon

With Button

Multiple Addons

$
.00

Copy Link Example

Block Alignments (Vertical Stack)

Top Label
Bottom Label

Text Addons

$
USD
https://
.com
@company.com
120 characters left

With Kbd

⌘K

With Spinner

Saving...

Dialog

Edit profile

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

This button is outside the Dialog component but opens the same dialog:

Nested Dialog Demo

Parent Dialog

This is the parent dialog. You can open a nested dialog from here.

Nested Dialog (Level 1)

This is the first nested dialog. You can open another nested dialog.

Nested Dialog (Level 2)

This is the second level nested dialog.

Toast Demo

Basic Variants

Promise Toast (simulates async operation)

Toast Management

Stress Test

Video Demo

Imported Video

YouTube Video

YouTube Shorts

Slider Demo

Default Slider

Range Slider

With Step (10)

Variants

Disabled

Vertical

Form Submission Test

Submit the form to see values

Image Demo

Imported Image

Pricing illustration

Remote URL

Gray concrete building

Accordion

Astro is an web framework for building fast, scalable, and secure websites.
Astro provides a set of features that make it an ideal choice for building fast, scalable, and secure websites.
To get started with Astro, follow the instructions in the documentation.
Astro is an web framework for building fast, scalable, and secure websites.
Astro provides a set of features that make it an ideal choice for building fast, scalable, and secure websites.
To get started with Astro, follow the instructions in the documentation.

Sheet Demo

Top Sheet

This sheet opens from the top of the screen.

Right Sheet

This sheet opens from the right side of the screen.

Bottom Sheet

This sheet opens from the bottom of the screen.

Left Sheet

This sheet opens from the left side of the screen.

Menu

Navigate through our site

Aspect Ratio Demo

Gray concrete building with windows

Spinner Demo

Default

Large

Custom Color

Separator Demo

Radix Primitives

An open-source UI component library.

Blog
Docs
Source

Item Demo

Basic Item

A simple item with title and description.

Your profile has been verified.

Item with Icon

Security Alert

New login detected from unknown device.

Item Variants

Default Variant

Standard styling with subtle background and borders.

Outline Variant

Outlined style with clear borders and transparent background.

Muted Variant

Subdued appearance with muted colors for secondary content.

Carousel

Basic Horizontal Carousel

Vertical Carousel

Multiple Items (Basis 1/3)

1
2
3
4
5

Looping Carousel

∞
Loop
∞

Plugin Autoplay Carousel

Variant Usage Example

File Input

Progress

Primary:
Secondary:
Default:
Info:
Success:
Warning:
Error:

Interactive Progress Example

Skeleton

Radio Group

Favorite Fruit

Favorite Fruit

Subscription Plan

Select your subscription plan

Breadcrumb

Alert Dialog

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

Tabs

Nested Tabs

Form

Select

Native Select

Pagination

Switch

Switch Event Test

Switch is currently: off

Toggle Component

Basic Toggles

With Icons

Sizes

Variants

Event Listener Example

Status: off

Avatar

John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD

Checkbox

Tooltip

Alert

Heads up!

A simple alert with an AlertTitle and an AlertDescription.

Heads up!

A simple alert with an AlertTitle and an AlertDescription.

Heads up!

A simple alert with an AlertTitle and an AlertDescription.

Heads up!

An alert with an AlertTitle and an AlertDescription and icon.

Heads up!

A simple alert with an AlertTitle and an AlertDescription.

Table

A list of your recent invoices
InvoiceStatusMethodAmount
INV001
Paid
Credit Card$250.00
INV002
Pending
PayPal$150.00
INV003
Overdue
Bank Transfer$350.00
Total$750.00

Keyboard Shortcuts

Single key: ⌘
Key combinations: ⌘ K
Multiple combinations:
⌘ K or Ctrl K
With modifiers:
⌘ Shift P
In a Button:
With tooltip: