Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Typography

Typography

Styles for headings, paragraphs, lists...etc

Preview

Taxing Laughter: The Joke Tax Chronicles

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

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

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

Installation

Typography styles are not shipped as a component. Use Tailwind CSS utility classes to style your text.

Usage

Apply typography styles using Tailwind CSS utility classes directly to your HTML elements.

Examples

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph

The king, seeing how much money he was making, decided to tax the jokes in the kingdom even more. He raised the prices so high that only the richest people could afford to tell jokes.

Blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

Lists

Unordered List:

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

Ordered List:

  1. First item
  2. Second item
  3. Third item

Inline Code

You can use the @radix-ui/react-alert-dialog component to create alert dialogs.

Lead

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

Large

Are you absolutely sure?

Small

Email address

Muted

Enter your email address.

On This Page

  • Preview
  • Installation
  • Usage
  • Examples

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.