saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Typography

Typography

Typography primitives (T1-T4, P, Lead, Large, Small, Muted, Blockquote, InlineCode, UL, OL) with tone and weight props.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/typography.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import {
  T1,
  T2,
  T3,
  T4,
  P,
  Lead,
  Large,
  Small,
  Muted,
  Blockquote,
  InlineCode,
  UL,
  OL,
} from "@/components/ui/typography"
<T1>Heading 1</T1>
<P>Paragraph text with <InlineCode>inline code</InlineCode>.</P>
<Muted>Muted caption text</Muted>

Examples

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

T1 through T4.

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
mutedboolean—Apply muted-foreground color.
brandboolean—Apply primary color.
dangerboolean—Apply destructive color.
monoboolean—Use monospace font.
weight"regular" | "medium" | "semibold" | "bold" | "extrabold"—Font weight override.
classNamestring—Additional CSS classes.
PreviousTreeNextVersion Selector

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.