shadcn-lab

UI playground

Button

Displays a button or a component that looks like a button.

Variants


Size


Icon


Spinner

Input

A text input component for forms and user data entry with built-in styling and accessibility features.

Variants

This field is currently disabled.

This field contains validation errors.

Accordion

A vertically stacked set of interactive headings that reveal or hide associated sections of content.

Basic

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.


Multiple

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.

Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.


Disabled

Alert

A component used to display important messages or notifications to users, often requiring their attention.

Basic


Destructive

Alert Dialog

A modal dialog that interrupts the user's workflow to communicate an important message and requires a response.

Avatar

A graphical representation of a user or entity, often displayed as a profile picture or icon.

Basic

CN

Avatar Badge

CN

Badge with Icon

PP

Avatar Group

CNLRER

Avatar Group with Count

CNLRER
+3

Avatar Group with Icon

CNLRER

Avatar Sizes

CNCNCN

Dropdown

Badge

A small visual indicator used to display status, counts, or labels associated with an item or component.

Variants

DefaultSuccessWarningDangerInfoActiveSecondaryDestructiveOutlineGhost

Shape

DefaultPillDefaultPill

With Icon

VerifiedBookmarkSuccessWarningDangerInfoActive

With Spinner

DeletingGenerating

Link

Open Link Open Link Open Link Open Link Open Link Open Link

Custom Colors

BlueGreenSkyPurpleRed

Card

Displays content and actions in a bordered container with an optional header and footer.

Variant

Default
Default description.
Success
Success description.
Warning
Warning description.
Danger
Danger description.
Info
Info description.
Active
Active description.

Basic

Create Project
Deploy your new project in one-click.

Size

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.


Image

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

Tabs

Organizes related content into separate views where only one panel is visible at a time.

Basic

Team workspace status is healthy. 12 projects and 4 active deployments.

Line


Vertical

Manage your account profile and workspace identity settings.

Disabled


Icons

Live preview of UI output with your theme and spacing scale.

Dialog

A modal dialog that interrupts the user with important content and expects a response.

Basic


With Form


Scrollable Content


No Close Button

Select

Displays a list of options for the user to pick from, triggered by a button.

Basic


Grouped


Small


Disabled


With Disabled Items

Switch

A toggle control that allows the user to switch between two states like on and off.

Basic


With Label


Small


Disabled


Settings List

Tooltip

A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.

Basic


Sides


Icon Buttons


With Delay

Checkbox

A control that allows the user to toggle between checked and unchecked states.

Basic


With Label


Disabled


Group

Select your interests


With Description

Receive email notifications when someone mentions you.

Get push notifications on your mobile device.

Area Graphs

Description

Area Chart - Interactive
Showing total visitors for the last 3 months
Area Chart
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
Area Chart - Linear
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
Area Chart - Step
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
Area Chart - Legend
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
Area Chart - Stacked
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
Area Chart - Stacked Expanded
Showing total visitors for the last 6months
Trending up by 5.2% this month
January - June 2024
Area Chart - Icons
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
Area Chart - Gradient
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
Area Chart - Axes
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Bar Graphs

Description

Bar Chart - Interactive
Showing total visitors for the last 3 months
Bar Chart
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Bar Chart - Horizontal
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Bar Chart - Multiple
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Bar Chart - Stacked + Legend
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Bar Chart - Label
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Bar Chart - Custom Label
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
Bar Chart - Active
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Bar Chart - Negative
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Pie Graphs

Description

Pie Chart
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart - Separator None
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart - Label
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart - Custom Label
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart - Label List
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart - Legend
January - June 2024
Pie Chart - Donut
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart - Donut Active
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart - Donut with Text
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart - Stacked
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart - Interactive
January - June 2024

Line Graphs

Description

Line Chart - Interactive
Showing total visitors for the last 3 months
Line Chart
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Line Chart - Linear
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Line Chart - Step
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
Line Chart - Dots
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Line Chart - Custom Dots
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Line Chart - Dots Colors
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Line Chart - Label
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Line Chart - Custom Label
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Radial Graphs

Description

Radial Chart
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Radial Chart - Label
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
Radial Chart - Text
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Radial Chart - Shape
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Radial Chart - Stacked
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Tooltip Graphs

Description

Tooltip - Default
Default tooltip with ChartTooltipContent.
Tooltip - Line Indicator
Tooltip with line indicator.
Tooltip - No Indicator
Tooltip with no indicator.
Tooltip - Custom label
Tooltip with custom label from chartConfig.
Tooltip - Label Formatter
Tooltip with label formatter.
Tooltip - No Label
Tooltip with no label.
Tooltip - Formatter
Tooltip with custom formatter .
Tooltip - Icons
Tooltip with icons.
Tooltip - Advanced
Tooltip with custom formatter and total.

© 2026 RM GASTRO, s.r.o.

PLACEHOLDER HLÁŠKA