Typography

Sizes

The quick brown fox jumps over the lazy dog. 4xl - 36px

The quick brown fox jumps over the lazy dog. 3xl - 30px

The quick brown fox jumps over the lazy dog. 2xl - 24px

The quick brown fox jumps over the lazy dog. xl - 20px

The quick brown fox jumps over the lazy dog. lg - 18px

The quick brown fox jumps over the lazy dog. md - 16px

The quick brown fox jumps over the lazy dog. sm - 14px

The quick brown fox jumps over the lazy dog. xs - 12px

Font wheight

The quick brown fox jumps over the lazy dog. font-normal - 400

The quick brown fox jumps over the lazy dog. font-medium - 500

The quick brown fox jumps over the lazy dog. font-semibold - 550 (Edit to variable)

The quick brown fox jumps over the lazy dog. font-bold - 700

Leading

The quick brown fox jumps over the lazy dog. leading-none 1 - 100%

The quick brown fox jumps over the lazy dog. leading-tight 1.25 - 125%

The quick brown fox jumps over the lazy dog. leading-snug 1.375 - 137,5%

The quick brown fox jumps over the lazy dog. leading-normal 1.5 - 150%

The quick brown fox jumps over the lazy dog. leading-relaxed 1.625 - 162,5%

The quick brown fox jumps over the lazy dog. leading-loose 2 - 200%

Tracking

The quick brown fox jumps over the lazy dog. tracking-tighter -5%

The quick brown fox jumps over the lazy dog. tracking-tight -2,5%

The quick brown fox jumps over the lazy dog. tracking-normal

The quick brown fox jumps over the lazy dog. tracking-wide 2,5%

The quick brown fox jumps over the lazy dog. tracking-wider 5%

The quick brown fox jumps over the lazy dog. tracking-widest 10%

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 Treasury	People's happiness
Empty	Overflowing
Modest	Satisfied
Full	Ecstatic

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.

Shadow

shadow-2xs

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Accordion

Alert

Success! Your changes have been saved

This is an alert with icon, title and description.

This one has an icon and a description only. No title.

This one has a description only. No title. No icon.

Let's try one with icon and title.

This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines

This is a very long alert description that demonstrates how the component handles extended text content and potentially wraps across multiple lines

This is an extremely long alert title that spans multiple lines to demonstrate how the component handles very lengthy headings while maintaining readability and proper text wrapping behavior

This is an equally long description that contains detailed information about the alert. It shows how the component can accommodate extensive content while preserving proper spacing, alignment, and readability across different screen sizes and viewport widths. This helps ensure the user experience remains consistent regardless of the content length.

Unable to process your payment.

Please verify your billing information and try again.

Check your card details
Ensure sufficient funds
Verify billing address

A positive message!

Your session has expired. Please log in again.

A positive message!

Your session has expired. Please log in again.

The selected emails have been marked as spam.

Alert Dialog

Aspect Ratio

Avatar

CNCNCNER

CNLRER

Badge

BadgeSecondaryDestructiveOutlinePositiveInfoBadgeAlert89920+

Link Link Link Link

Button

Calendar

August 2025

January 2025

February 2025

Card

Enter your email below to login to your account

Don't have an account? Sign up

Meeting Notes

Transcript from the meeting with the client.

Client requested dashboard redesign with focus on mobile responsiveness.

New analytics widgets for daily/weekly metrics
Simplified navigation menu
Dark mode support
Timeline: 6 weeks
Follow-up meeting scheduled for next Tuesday

CNLRER

Is this an image?

This is a card with an image.

4 2 350m²

$135,000

Content Only

Header Only

This is a card with a header and a description.

Header and Content

This is a card with a header and a content.

Content

Footer Only

Header + Footer

This is a card with a header and a footer.

Footer

Content

Footer

Header + Footer

This is a card with a header and a footer.

Content

Footer

Carousel

Checkbox

Accept terms and conditions

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

Enable notifications

Enable notificationsss

You can enable or disable notifications at any time.

Option 1

Option 2

Option 3

Collapsible

@peduarte starred 3 repositories

@radix-ui/primitives

Combobox

Command

Press ⌘J

Date Picker

Dialog

Drawer

Input

Input Otp

Simple

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Digits Only

With Separator

With Spacing

Label

Accept terms and conditions

Username

Disabled

Message

Menubar

Pagination

Progress

Resizable

One

Two

Three

Sidebar

Content

Header

Content

Scroll Area

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00

The Joke Tax Chronicles