Sections
Components
Animations
Soon
We do not ship any typography styles by default. This page is an example of how you can use utility classes to style your text.
The Joke Tax Chronicles — A Tale of Laughter and Revenue
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 — A Royal Decision
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 — Public Reaction
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
People stopped telling jokes — The Great Silence
| King's Treasury | People's happiness |
|---|---|
| Empty | Overflowing |
| Modest | Satisfied |
| Full | Ecstatic |
Sub-section heading with muted text — Last 30 days
Jokester began sneaking into the castle, using stealth-mode to leave jokes all over the place.
Small heading with muted text — Updated 2 hours ago
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.
h1
The Joke Tax Chronicles — A Tale of Laughter and Revenue
<template>
<h1 class="scroll-m-20 text-4xl leading-[1.1] tracking-[-0.03em] font-bold sm:text-5xl">
The Joke Tax Chronicles
<span class="text-muted-foreground font-medium">— A Tale of Laughter and Revenue</span>
</h1>
</template>h2
The King's Plan — A Royal Decision
<template>
<h2
class="scroll-m-20 border-b pb-2 text-3xl leading-[1.2] tracking-[-0.02em] font-bold transition-colors first:mt-0 sm:text-[32px] md:text-4xl"
>
The King's Plan
<span class="text-muted-foreground font-medium">— A Royal Decision</span>
</h2>
</template>h3
The Joke Tax — Public Reaction
<template>
<h3 class="scroll-m-20 text-[22px] leading-[1.2] tracking-[-0.02em] font-bold sm:text-2xl">
The Joke Tax
<span class="text-muted-foreground font-medium">— Public Reaction</span>
</h3>
</template>h4
People stopped telling jokes — The Great Silence
<template>
<h4 class="scroll-m-20 text-xl leading-[1.3] tracking-[-0.01em] font-bold sm:text-[22px]">
People stopped telling jokes
<span class="text-muted-foreground font-medium">— The Great Silence</span>
</h4>
</template>h5
Sub-section heading with muted text — Last 30 days
<template>
<h5 class="scroll-m-20 text-[18px] leading-[1.3] tracking-[-0.01em] font-bold sm:text-xl">
Sub-section heading with muted text
<span class="text-muted-foreground font-medium">— Last 30 days</span>
</h5>
</template>h6
Small heading with muted text — Updated 2 hours ago
<template>
<h6 class="scroll-m-20 text-[14px] leading-[1.3] tracking-[-0.01em] font-bold sm:text-base">
Small heading with muted text
<span class="text-muted-foreground font-medium">— Updated 2 hours ago</span>
</h6>
</template>p
The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
<template>
<p class="leading-7 not-first:mt-6">
The king, seeing how much happier his subjects were, realized the error of his ways and repealed
the joke tax.
</p>
</template>blockquote
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
<template>
<blockquote class="mt-4 border-l-2 pl-4 text-base italic sm:mt-6 sm:pl-6">
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for
the privilege."
</blockquote>
</template>table
| King's Treasury | People's happiness |
|---|---|
| Empty | Overflowing |
| Modest | Satisfied |
| Full | Ecstatic |
<template>
<div class="my-4 w-full overflow-x-auto sm:my-6">
<table class="w-full min-w-[320px]">
<thead>
<tr class="m-0 border-t p-0 even:bg-muted">
<th
class="whitespace-nowrap border px-3 py-2 text-left font-bold sm:px-4 [[align=center]]:text-center [[align=right]]:text-right"
>
King's Treasury
</th>
<th
class="whitespace-nowrap border px-3 py-2 text-left font-bold sm:px-4 [[align=center]]:text-center [[align=right]]:text-right"
>
People's happiness
</th>
</tr>
</thead>
<tbody>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-3 py-2 text-left sm:px-4 [[align=center]]:text-center [[align=right]]:text-right"
>
Empty
</td>
<td
class="border px-3 py-2 text-left sm:px-4 [[align=center]]:text-center [[align=right]]:text-right"
>
Overflowing
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-3 py-2 text-left sm:px-4 [[align=center]]:text-center [[align=right]]:text-right"
>
Modest
</td>
<td
class="border px-3 py-2 text-left sm:px-4 [[align=center]]:text-center [[align=right]]:text-right"
>
Satisfied
</td>
</tr>
<tr class="m-0 border-t p-0 even:bg-muted">
<td
class="border px-3 py-2 text-left sm:px-4 [[align=center]]:text-center [[align=right]]:text-right"
>
Full
</td>
<td
class="border px-3 py-2 text-left sm:px-4 [[align=center]]:text-center [[align=right]]:text-right"
>
Ecstatic
</td>
</tr>
</tbody>
</table>
</div>
</template>list
- 1st level of puns: 5 gold coins
- 2nd level of jokes: 10 gold coins
- 3rd level of one-liners: 20 gold coins
<template>
<ul class="my-4 ml-4 list-disc text-base [&>li]:mt-2 sm:my-6 sm:ml-6 sm:text-lg">
<li>1st level of puns: 5 gold coins</li>
<li>2nd level of jokes: 10 gold coins</li>
<li>3rd level of one-liners: 20 gold coins</li>
</ul>
</template>Inline code
reka-ui <template>
<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold">
reka-ui
</code>
</template>Lead
A modal dialog that interrupts the user with important content and expects a response.
<template>
<p class="text-lg text-muted-foreground sm:text-xl md:text-2xl">
A modal dialog that interrupts the user with important content and expects a response.
</p>
</template>Large
Are you absolutely sure?
<template>
<div class="text-lg font-semibold sm:text-xl md:text-2xl">Are you absolutely sure?</div>
</template>Small
Email address
<template>
<small class="text-sm font-medium leading-none sm:text-base md:text-lg"> Email address </small>
</template>Muted
Enter your email address.
<template>
<p class="text-muted-foreground">Enter your email address.</p>
</template>Typography Scale
Use these raw text sizing utilities anywhere you need them. They only define font-size, line-height, letter-spacing, and font-weight.
| Size | Classes | Use Case |
|---|---|---|
| 48px | text-[32px] leading-[1.1] tracking-[-0.03em] font-bold (sm: text-[40px], md: text-[48px]) | Main page titles |
| 36px | text-[28px] leading-[1.2] tracking-[-0.02em] font-bold (sm: text-[32px], md: text-[36px]) | Section headers |
| 24px | text-[22px] leading-[1.2] tracking-[-0.02em] font-bold (sm: text-2xl) | Card titles |
| 22px | text-xl leading-[1.3] tracking-[-0.01em] font-bold (sm: text-[22px]) | Sub-sections |
| 20px | text-[18px] leading-[1.3] tracking-[-0.01em] font-bold (sm: text-xl) | Sub-sub-sections |
| 16px | text-[14px] leading-[1.3] tracking-[-0.01em] font-bold (sm: text-base) | Small headings |
| Base | text-sm leading-7 (sm: text-base) | Body text |
| Small | text-xs (sm: text-sm) | Labels, captions |
Installation
Want automatic styling on native HTML elements? Add these styles to your global CSS. This applies the scale classes above plus structural styles like spacing, borders, and transitions.
@layer components {
h1 {
@apply scroll-m-20 text-4xl leading-[1.1] tracking-[-0.03em] font-bold sm:text-5xl;
}
h2 {
@apply scroll-m-20 border-b pb-2 text-3xl leading-[1.2] tracking-[-0.02em] font-bold transition-colors first:mt-0 sm:text-[32px] md:text-4xl;
}
h3 {
@apply scroll-m-20 text-[22px] leading-[1.2] tracking-[-0.02em] font-bold sm:text-2xl;
}
h4 {
@apply scroll-m-20 text-xl leading-[1.3] tracking-[-0.01em] font-bold sm:text-[22px];
}
h5 {
@apply scroll-m-20 text-[18px] leading-[1.3] tracking-[-0.01em] font-bold sm:text-xl;
}
h6 {
@apply scroll-m-20 text-[14px] leading-[1.3] tracking-[-0.01em] font-bold sm:text-base;
}
p {
@apply leading-7 not-first:mt-6;
}
blockquote {
@apply mt-4 border-l-2 pl-4 text-base italic sm:mt-6 sm:pl-6;
}
ul {
@apply my-4 ml-4 list-disc text-base [&>li]:mt-2 sm:my-6 sm:ml-6 sm:text-lg;
}
table {
@apply w-full min-w-[320px];
}
thead {
@apply [&>tr]:border-b;
}
th {
@apply whitespace-nowrap border px-3 py-2 text-left font-bold sm:px-4 [[align=center]]:text-center [[align=right]]:text-right;
}
td {
@apply border px-3 py-2 text-left sm:px-4 [[align=center]]:text-center [[align=right]]:text-right;
}
tbody tr {
@apply m-0 border-t p-0 even:bg-muted;
}
code {
@apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold;
}
.lead {
@apply text-lg text-muted-foreground sm:text-xl md:text-2xl;
}
.large {
@apply text-lg font-semibold sm:text-xl md:text-2xl;
}
.small {
@apply text-sm font-medium leading-none sm:text-base md:text-lg;
}
.muted {
@apply text-muted-foreground;
}
}Last updated on April 14, 2026