GitHub

Typography

Previous

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.

Loading
Loading...

h1

Taxing Laughter: The Joke Tax Chronicles

export function TypographyH1() {
  return (
    <h1 className="scroll-m-20 text-balance text-center font-extrabold text-4xl tracking-tight">
      Taxing Laughter: The Joke Tax Chronicles
    </h1>
  );
}

h2

The People of the Kingdom

export function TypographyH2() {
  return (
    <h2 className="scroll-m-20 border-b pb-2 font-semibold text-3xl tracking-tight first:mt-0">
      The People of the Kingdom
    </h2>
  );
}

h3

The Joke Tax

export function TypographyH3() {
  return (
    <h3 className="scroll-m-20 font-semibold text-2xl tracking-tight">
      The Joke Tax
    </h3>
  );
}

h4

People stopped telling jokes

export function TypographyH4() {
  return (
    <h4 className="scroll-m-20 font-semibold text-xl tracking-tight">
      People stopped telling jokes
    </h4>
  );
}

p

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

export function TypographyP() {
  return (
    <p className="leading-7 [&:not(:first-child)]:mt-6">
      The king, seeing how much happier his subjects were, realized the error of
      his ways and repealed the joke tax.
    </p>
  );
}

blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
export function TypographyBlockquote() {
  return (
    <blockquote className="mt-6 border-l-2 pl-6 italic">
      &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so
      it&apos;s only fair that they should pay for the privilege.&quot;
    </blockquote>
  );
}

table

Loading
Loading...
export function TypographyTable() {
  return (
    <div className="my-6 w-full overflow-y-auto">
      <table className="w-full">
        <thead>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
              King&apos;s Treasury
            </th>
            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
              People&apos;s happiness
            </th>
          </tr>
        </thead>
        <tbody>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Empty
            </td>
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Overflowing
            </td>
          </tr>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Modest
            </td>
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Satisfied
            </td>
          </tr>
          <tr className="m-0 border-t p-0 even:bg-muted">
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Full
            </td>
            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
              Ecstatic
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

list

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins
export function TypographyList() {
  return (
    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
      <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>
  );
}

Inline code

@base-ui/react/alert-dialog
export function TypographyInlineCode() {
  return (
    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold text-sm">
      @base-ui/react/alert-dialog
    </code>
  );
}

Lead

A modal dialog that interrupts the user with important content and expects a response.

export function TypographyLead() {
  return (
    <p className="text-muted-foreground text-xl">
      A modal dialog that interrupts the user with important content and expects
      a response.
    </p>
  );
}

Large

Are you absolutely sure?
export function TypographyLarge() {
  return <div className="font-semibold text-lg">Are you absolutely sure?</div>;
}

Small

Email address
export function TypographySmall() {
  return (
    <small className="font-medium text-sm leading-none">Email address</small>
  );
}

Muted

Enter your email address.

export function TypographyMuted() {
  return (
    <p className="text-muted-foreground text-sm">Enter your email address.</p>
  );
}