# Typography

Semantic, responsive type variants with explicit visual controls.

> For the complete documentation index, see [llms.txt](/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](/.well-known/agent-skills/site-skill.md).





## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    <CodeBlockCommand __bun__="bunx --bun shadcn@latest add https://lab.pratikthapw.dev/r/typography.json" __npm__="npx shadcn@latest add https://lab.pratikthapw.dev/r/typography.json" __pnpm__="pnpm dlx shadcn@latest add https://lab.pratikthapw.dev/r/typography.json" __yarn__="npx shadcn@latest add https://lab.pratikthapw.dev/r/typography.json" />
  </TabsContent>

  <TabsContent value="manual">
    <Steps className="mb-0 pt-2">
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install class-variance-authority clsx tailwind-merge
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="typography" title="components/ui/typography.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

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

```tsx
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 [#examples]

### Article hierarchy [#article-hierarchy]

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

<ComponentPreview name="typography-article">
  <TypographyArticleExample />
</ComponentPreview>

### Intentional element overrides [#intentional-element-overrides]

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

<ComponentPreview name="typography-overrides">
  <TypographyOverridesExample />
</ComponentPreview>

## API [#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.