The Joke Tax Chronicles

Once upon a time, in a far-off land, a king levied a tax on the jokes told in his kingdom.

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

1st level of puns: 5 gold coins
2nd level of jokes: 10 gold coins
3rd level of one-liners: 20 gold coins

{{-- A prose sample combining the core variants. --}}
<div class="w-full max-w-2xl">
    <x-ui.typography variant="h1">The Joke Tax Chronicles</x-ui.typography>
    <x-ui.typography variant="lead" class="mt-4">Once upon a time, in a far-off land, a king levied a tax on the jokes told in his kingdom.</x-ui.typography>

    <x-ui.typography variant="h2" class="mt-10">The King's Plan</x-ui.typography>
    <x-ui.typography variant="p">The king thought long and hard, and finally came up with <x-ui.typography variant="inline-code" as="code">a brilliant plan</x-ui.typography>: he would tax the jokes in the kingdom.</x-ui.typography>

    <x-ui.typography variant="blockquote">"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."</x-ui.typography>

    <x-ui.typography variant="h3" class="mt-8">The Joke Tax</x-ui.typography>
    <x-ui.typography variant="list">
        <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>
    </x-ui.typography>
</div>

Blockquote

"In the quiet after repeal, the streets filled with unexpected laughter — small rebellions of joy," she recalled.

{{-- A bordered, italic blockquote. --}}
<x-ui.typography variant="blockquote" class="mt-0 w-full max-w-2xl">
    "In the quiet after repeal, the streets filled with unexpected laughter — small rebellions of joy," she recalled.
</x-ui.typography>

Gradient

Dawn light in a single line

{{-- A gradient-filled heading via bg-clip-text. --}}
<x-ui.typography variant="gradient">Dawn light in a single line</x-ui.typography>

Headings

Heading 1 — Taxing Laughter

Heading 2 — The King's Decree

Heading 3 — A Quiet Revolt

Heading 4 — Brighter Mornings

{{-- The four heading levels. --}}
<div class="flex w-full max-w-2xl flex-col gap-4">
    <x-ui.typography variant="h1">Heading 1 — Taxing Laughter</x-ui.typography>
    <x-ui.typography variant="h2" class="border-0 pb-0">Heading 2 — The King's Decree</x-ui.typography>
    <x-ui.typography variant="h3">Heading 3 — A Quiet Revolt</x-ui.typography>
    <x-ui.typography variant="h4">Heading 4 — Brighter Mornings</x-ui.typography>
</div>

List

A single troubadour's chuckle
Morning whispers in the bazaar
Nightly lantern laughter

{{-- A bulleted list. --}}
<x-ui.typography variant="list" class="my-0 w-full max-w-2xl">
    <li>A single troubadour's chuckle</li>
    <li>Morning whispers in the bazaar</li>
    <li>Nightly lantern laughter</li>
</x-ui.typography>

Text Styles

A modal dialog that interrupts the user with important content.

Are you absolutely sure?

Email address

Enter your email address.

Install the package with npm i blatui and you're ready.

{{-- Inline / utility text variants: lead, large, small, muted, inline code. --}}
<div class="flex w-full max-w-2xl flex-col gap-4">
    <x-ui.typography variant="lead">A modal dialog that interrupts the user with important content.</x-ui.typography>
    <x-ui.typography variant="large">Are you absolutely sure?</x-ui.typography>
    <x-ui.typography variant="small">Email address</x-ui.typography>
    <x-ui.typography variant="muted">Enter your email address.</x-ui.typography>
    <p class="leading-7">Install the package with <x-ui.typography variant="inline-code" as="code">npm i blatui</x-ui.typography> and you're ready.</p>
</div>

Customize

blatui

Typography