For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.

Typography

PreviousNext

Semantic, responsive type variants with explicit visual controls.

Installation

$ pnpm dlx shadcn@latest add https://lab.pratikthapw.dev/r/typography.json

Usage

Heading variants render their matching heading element by default. Text and lead variants render paragraphs.

import { Typography } from "@/components/ui/typography";
 
export function Introduction() {
  return (
    <header className="flex flex-col gap-4">
      <Typography variant="h1" weight="semibold">
        Build the boundary first.
      </Typography>
      <Typography variant="lead">
        Keep visual hierarchy and document structure aligned.
      </Typography>
    </header>
  );
}

Examples

Article hierarchy

This composition keeps the document outline and visual hierarchy aligned while scaling type responsively.

Architecture note

Make the boundary visible.

A semantic hierarchy gives readers a stable outline while responsive variants preserve the intended visual rhythm.

Keep heading levels aligned with the document structure. Use visual overrides only when the surrounding composition genuinely needs them.

import { Typography } from "@/components/ui/typography";

export const TypographyArticleExample = () => (
  <article className="border-border bg-card rounded-xl border p-6 sm:p-8">
    <Typography
      variant="text-xs"
      textColor="muted"
      transform="uppercase"
      weight="semibold"
    >
      Architecture note
    </Typography>
    <Typography className="mt-3" variant="h2" weight="semibold">
      Make the boundary visible.
    </Typography>
    <Typography className="mt-4 max-w-2xl" variant="lead">
      A semantic hierarchy gives readers a stable outline while responsive
      variants preserve the intended visual rhythm.
    </Typography>
    <Typography className="mt-6 max-w-2xl" textColor="muted">
      Keep heading levels aligned with the document structure. Use visual
      overrides only when the surrounding composition genuinely needs them.
    </Typography>
  </article>
);

Intentional element overrides

Use as only when the document structure and visual treatment intentionally differ.

Semantic default

Rendered as an h4

Intentional override

h4 styling on an h2

import { Typography } from "@/components/ui/typography";

export const TypographyOverridesExample = () => (
  <div className="border-border bg-card grid gap-6 rounded-xl border p-6 md:grid-cols-2">
    <div>
      <Typography
        variant="text-xs"
        textColor="muted"
        transform="uppercase"
        weight="medium"
      >
        Semantic default
      </Typography>
      <Typography className="mt-2" variant="h4" weight="semibold">
        Rendered as an h4
      </Typography>
    </div>
    <div>
      <Typography
        variant="text-xs"
        textColor="muted"
        transform="uppercase"
        weight="medium"
      >
        Intentional override
      </Typography>
      <Typography as="h2" className="mt-2" variant="h4" weight="semibold">
        h4 styling on an h2
      </Typography>
    </div>
  </div>
);

API

The visual variants are h1 through h6, lead, and text-xs through text-xl. Controls include weight, align, transform, and semantic textColor.

Prefer the default semantic mapping. An h4 variant renders an h4; as="h2" deliberately keeps h4 styling while changing the document element to h2.