Components and examples

Theme studio

Open Customize in the top bar to pick a preset or fine-tune colors, fonts, radius, and spacing. Every component below — and the whole app — re-themes live. Your choice persists across pages.

5 presets24 color themes8 blocks59 componentsLive preview

Blocks

Claimable Balance
$0.00
Pending Setup
Net Royalties$0.00
Processing Fee-$0.00
Total Ready to Claim$0.00 USD
Once your bank is connected, balances over $10.00 are automatically eligible for monthly distribution on the 15th of each month.
Set a new milestone
Define your financial target and we'll help you pace your savings.
Savings Targets
Active milestones for 2024
Retirement
$420,000
65% achieved
Real Estate
$85,000
32% achieved

You have not met your targets for this year.

Payout Threshold
Set the minimum balance required before a payout is triggered.
$2500.00
$50 (MIN)$10,000 (MAX)
Transfer Funds
Move money between your connected accounts.
Estimated arrivalToday, Apr 14
Transaction fee$0.00
Total amount$1,200.00
Recent Transactions
Your latest account activity.
Blue Bottle Coffee
Food & Drink
-$8.50
Whole Foods Market
Groceries
-$124.20
Stripe Payout
Income
+$2,400.00
Uber Technologies
Transport
-$18.75
Netflix Subscription
Entertainment
-$15.99
Preferences
Manage your account settings and notifications.

Receive product news and offers.

Get notified about new sign-ins.

Mentions, follows and replies.

A summary of your activity.

Social Links
Connect your profiles to your public page.

Components

Button
Button Group
Input
Input Group
12 results
https://
52% used
Input OTP
Textarea
Label
Select
Native Select
Combobox
Checkbox

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

Radio Group
Switch
Slider
Toggle
Toggle Group
Field
Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

Form
Bug Report
Help us improve by reporting bugs you encounter.
0/100 characters

Include steps to reproduce, expected behavior, and what actually happened.

Calendar
June 2025
Date Picker
Card
Login to your account
Enter your email below to login to your account
Avatar
CNER
CNLRER
Badge
BadgeSecondaryDestructiveOutline
Verified89920+
Kbd
Ctrl+B
Chart
Progress
Spinner
Processing payment...
$100.00
Skeleton
Item
Basic Item

A simple item with title and description.

Your profile has been verified.
Empty
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
Learn More
Aspect Ratio
Photo by Drew Beamer
Typography

Taxing Laughter: 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.

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
Data Table
Status
Amount
success
ken99@example.com
$316.00
success
Abe45@example.com
$242.00
processing
Monserrat44@example.com
$837.00
success
Silas22@example.com
$874.00
failed
carmella@example.com
$721.00
0 of 5 row(s) selected.
Table / Status labels
ProjectStatusLabelsPriorityDue
Atlas redesign
Design
On track
WebQ3
HighJun 24
Billing migration
Platform
At risk
StripeInfra
CriticalJul 2
Docs refresh
Growth
Review
Content
MediumJul 12
Mobile QA
Product
Blocked
iOSAndroid
LowJul 18
Table / KPI summary
ChannelVisitorsConversionRevenueTrend
Organic24,8926.8%$42,820+12%
Paid search18,2404.1%$31,044+4%
Referral8,1207.4%$19,870-2%
Total51,2525.9%$93,734+8%
Dialog
Alert Dialog
Sheet
Drawer
Popover
Hover Card
Tooltip
Dropdown Menu
Context Menu
Right click here
Menubar
Command
Tabs
Account
Make changes to your account here. Click save when you're done.
Navigation Menu
Breadcrumb
Pagination
Alert
Sonner
Accordion

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.

Collapsible

@peduarte starred 3 repositories

@radix-ui/primitives
Separator

Radix Primitives

An open-source UI component library.

Blog
Docs
Source
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
Resizable
One
Two
Three
Carousel
1
2
3
4
5