Component Explorer Shadcn UI, themed with Shipixen ⋅ 103 demos

Accordion

Alert

Alert Destructive

Alert Dialog

Aspect Ratio

Photo by Drew Beamer

Avatar

AV

Badge

Badge

Badge Secondary

Secondary

Badge Destructive

Destructive

Badge Outline

Outline

Button

Button Destructive

Button Ghost

Button Icon

Button Link

Button Loading

Button Outline

Button Secondary

Button With Icon

Button CTA

Calendar

SuMoTuWeThFrSa

Cards: Activity Goal

Move Goal

Set your daily activity goal.

350
Calories/day

Cards: Calendar

SuMoTuWeThFrSa

Card: Notifications

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

Cards: Chat

OM

Sofia Davis

m@example.com

Hi, how can I help you today?
Hey, I'm having trouble with my account.
What seems to be the problem?
I can't log in.

Cards: Create Account

Create an account

Enter your email below to create your account

Or continue with

Cards: Payment Method

Payment Method

Add a new payment method to your account.

Cards: Report Issue

Report an issue

What area are you having problems with?

Cards: Share

Share this document

Anyone with the link can view this document.

People with access

OM

Olivia Martin

m@example.com

IN

Isabella Nguyen

b@example.com

SD

Sofia Davis

p@example.com

Cards: Team Members

Team Members

Invite your team members to collaborate.

OM

Sofia Davis

m@example.com

JL

Jackson Lee

p@example.com

IN

Isabella Nguyen

i@example.com

Card With Form

Create project

Deploy your new project in one-click.

Cards: Stats

Total Revenue

$15,231.89

+20.1% from last month

Subscriptions

+2350

+180.1% from last month

Cards: Metric

Exercise Minutes

Your exercise minutes are ahead of where you normally are.

Checkbox

Carousel

1
2
3
4
5

Collapsible

@shipixen starred 3 repositories

@radix-ui/primitives

Combobox

Combobox Dropdown Menu

featureCreate a new project

Combobox Popover

Status

Combobox Responsive

Command

Command Dialog

Press J

Context Menu

Right click here

Data Table

Status
Amount
success
ken99@yahoo.com
$316.00
success
Abe45@gmail.com
$242.00
processing
Monserrat44@gmail.com
$837.00
success
Silas22@gmail.com
$874.00
failed
carmella@hotmail.com
$721.00
0 of 5 row(s) selected.

Date Picker

Date Picker With Presets

Date Picker With Range

Dialog

Drawer

Drawer Dialog

Dropdown Menu

Dropdown Menu Checkboxes

Dropdown Menu Radio Group

Hover Card

Input

Input Disabled

Input File

Input With Button

Input With Label

Input With Text

Enter your email address.

Menubar

Mode Toggle

Navigation Menu

Popover

Pagination

Progress

Radio Group

Resizable

One
Two
Three

Resizable Handle

Sidebar
Content

Resizable Vertical

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

Scroll Area Horizontal

Photo by Ornella Binni
Photo by Ornella Binni
Photo by Tom Byrom
Photo by Tom Byrom
Photo by Vladimir Malyavko
Photo by Vladimir Malyavko

Select

Select Form

You can manage email addresses in your email settings.

Select Scrollable

Separator

Radix Primitives

An open-source UI component library.

Blog
Docs
Source

Sheet

Sheet Side

Skeleton

Slider

Switch

Switch Form

Email Notifications

Receive emails about new products, features, and more.

Receive emails about your account security.

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

Textarea Disabled

Textarea With Button

Textarea With Label

Textarea With Text

Your message will be copied to the support team.

Toast

Toast Destructive

Toast With Action

Toast With Title

Toggle

Toggle Disabled

Toggle Group

Toggle Group Sm

Toggle Group Lg

Toggle Group Disabled

Toggle Group Outline

Toggle Group Single

Tooltip

Typography

The Joke Tax Chronicles

Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.

The King's Plan

The king thought long and hard, and finally came up with a brilliant plan: he would tax the jokes in the kingdom.

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

The Joke Tax

The king's subjects were not amused. They grumbled and complained, but the king was firm:

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins

As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.

Jokester's Revolt

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.

And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.

The People's Rebellion

The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.

King's TreasuryPeople's happiness
EmptyOverflowing
ModestSatisfied
FullEcstatic

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after.

The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.