saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Typography

Typography

Typography components for consistent text styling.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/typography

Usage

import {
  H1,
  H2,
  H3,
  H4,
  P,
  Lead,
  Large,
  Small,
  Muted,
} from "@/components/ui/typography"
<H1>Heading 1</H1>
<P>Paragraph text...</P>
<Muted>Muted text</Muted>

Examples

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

H1 through H4.

Paragraph

Loading...
Paragraph styling.

Blockquote

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

Lists

Loading...
Ordered and unordered lists.

Inline Code

Loading...
Inline code styling.

Lead

A production-grade design system built on shadcn/ui, providing finance-focused components for modern web applications.

Lead text.

Large

Are you absolutely sure you want to proceed?
Large text.

Small & Muted

Small text for labels, captions, and secondary information.

Muted text is used for descriptions, hints, and supplementary content that should not compete for attention with the primary content.

Small and muted text.

API Reference

PropTypeDefaultDescription
childrenReact.ReactNode—Text content.
classNamestring—Additional CSS classes.

On This Page

  • Installation
  • Usage
  • Examples
  • Headings
  • Paragraph
  • Blockquote
  • Lists
  • Inline Code
  • Lead
  • Large
  • Small & Muted
  • API Reference

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.

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

People stopped telling jokes

The people of the kingdom realized that @tax-evasion was not worth the risk.

This is smaller muted text for captions and labels.

This is a lead paragraph with larger text.

The king, seeing how much happier his subjects were, googled a bit, and found a solution. He would tax the jokes based on how long they were. Short jokes got off easy, while longer ones had to pay more.

As a result, people started telling shorter and shorter jokes, which made the kingdom not just more prosperous, but also more efficient. The king was so pleased that he created a national holiday dedicated to the art of brevity.

Unordered List

  • First item in the unordered list
  • Second item with more detail to describe
  • Third item with a nested list:
    • Nested item one
    • Nested item two

Ordered List

  1. Clone the repository from GitHub
  2. Install the required dependencies
  3. Run the development server

Install the component using the npx shadcn add command, or copy the button.tsx file directly into your components/ui directory.