Sections

Components

Composables

Animations

Soon

Typography

Styles for headings, paragraphs, lists...etc

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.

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;
  }
}

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>

Phone Input Code Block

On This Page

Installation h1 h2 h3 h4 h5 h6 p blockquote table list Inline code Lead Large Small Muted