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.

h1

Taxing Laughter: The Joke Tax Chronicles

@react.component
let make = () =>
  <h1 className="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">

h2

The People of the Kingdom

@react.component
let make = () =>
  <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">

h3

The Joke Tax

@react.component
let make = () =>
  <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">

h4

People stopped telling jokes

@react.component
let make = () =>
  <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">

p

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

@react.component
let make = () =>
  <p className="leading-7 [&:not(:first-child)]:mt-6">

blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
@react.component
let make = () =>
  <blockquote className="mt-6 border-l-2 pl-6 italic">

table

@react.component
let make = () =>
  <div className="my-6 w-full overflow-y-auto">

list

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins
@react.component
let make = () =>
  <ul className="my-6 ml-6 list-disc [&>li]:mt-2">

Inline code

@radix-ui/react-alert-dialog
@react.component
let make = () =>
  <code

Lead

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

@react.component
let make = () =>
  <p className="text-muted-foreground text-xl">

Large

Are you absolutely sure?
@react.component
let make = () =>
  <div className="text-lg font-semibold"> {"Are you absolutely sure?"->React.string} </div>

Small

Email address
@react.component
let make = () =>
  <small className="text-sm leading-none font-medium"> {"Email address"->React.string} </small>

Muted

Enter your email address.

@react.component
let make = () =>
  <p className="text-muted-foreground text-sm"> {"Enter your email address."->React.string} </p>