Typography

A flexible typography component with variant-based styling powered by CSS custom properties.

Powered by

Installation


pnpm dlx pitsi@latest add typography

Usage

Tooltip Unicorn Wrapper

import Typography from "@/components/ui/typography"

<Typography variant="h1">Welcome to our platform</Typography>

Examples

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

Paragraph XL - Large introductory text that draws attention.

Paragraph LG - Default body text for articles and main content.

Paragraph MD - Component descriptions for cards and dialogs.

Paragraph SM - Small text for captions.

Labels

Label XL - Lead text and feature introductionsLabel LG - Important form labels and emphasisLabel MD - Standard form labels and UI labelsLabel SM - Small labels, badges, and metadataLabel XS - Tiny indicators and micro copy

Polymorphic

This is a paragraph rendered as a link

Email Address

Variants

The Typography component supports the following variants:

Headings

h1 - Main page heading
h2 - Section heading
h3 - Subsection heading
h4 - Minor heading
h5 - Smaller heading
h6 - Smallest heading

Labels

label-xl - Extra large label
label-lg - Large label
label-md - Medium label (default)
label-sm - Small label
label-xs - Extra small label

Paragraphs

paragraph-xl - Extra large paragraph
paragraph-lg - Large paragraph
paragraph-md - Medium paragraph (default)
paragraph-sm - Small paragraph
paragraph-xs - Extra small paragraph

Subheadings

subheading-md - Medium subheading (uppercase)
subheading-sm - Small subheading (uppercase)
subheading-xs - Extra small subheading (uppercase)
subheading-2xs - Tiny subheading (uppercase)

Documentation

doc-label - Documentation label text
doc-paragraph - Documentation paragraph text

Props

Prop	Type	Default	Description
`as`	`React.ElementType`	varies by variant	The element to render as
`variant`	`TypographyVariant`	`"paragraph-md"`	The typography style to apply
`className`	`string`	-	Additional classes
`style`	`React.CSSProperties`	-	Additional inline styles

Polymorphic Rendering

The Typography component is polymorphic and can be rendered as any HTML element:

// Render as a different element
<Typography variant="h1" as="div">
  This is a div with h1 styling
</Typography>
 
// Use with semantic HTML
<Typography variant="label-md" as="label" htmlFor="input">
  Form Label
</Typography>
 
// Render as a link
<Typography variant="paragraph-md" as="a" href="/about">
  Learn more
</Typography>

CSS Custom Properties

The Typography component uses CSS custom properties (CSS variables) for all typography styles. This allows for easy theming and customization across your entire application.

Each variant uses the following CSS variables:

--text-{variant} - Font size
--text-{variant}--line-height - Line height
--text-{variant}--letter-spacing - Letter spacing
--text-{variant}--font-weight - Font weight

Examples

Hero Section

<Typography variant="h1">
  Build faster with our design system
</Typography>
<Typography variant="paragraph-lg">
  A comprehensive collection of components built with React and Tailwind CSS.
</Typography>

Card Component

<div className="card">
  <Typography variant="subheading-xs">Features</Typography>
  <Typography variant="h3">Everything you need</Typography>
  <Typography variant="paragraph-md">
    All the tools you need to build modern web applications.
  </Typography>
</div>

Form Label

<Typography variant="label-sm" as="label" htmlFor="email">
  Email Address
</Typography>
<input id="email" type="email" />

Pricing Card

<div className="pricing-card">
  <Typography variant="subheading-sm">Pro Plan</Typography>
  <Typography variant="h2">
    $29
    <Typography variant="paragraph-sm" as="span">
      /month
    </Typography>
  </Typography>
  <Typography variant="paragraph-sm">Perfect for growing teams</Typography>
</div>

Default Elements

Each variant has a default HTML element it renders as:

Heading variants (h1-h6) → corresponding heading tags
Label variants → 
Paragraph variants → 
Subheading variants → 
Doc variants →  or

You can override these with the as prop for semantic flexibility while maintaining consistent styling.

Heading 1

Heading 2

Heading 3

This is a paragraph with the paragraph-lg variant. It uses CSS custom properties for consistent typography across your application.

This is a label with label-md variant

import Typography from "@/components/ui/typography"

export function TypographyComponentDemo() {
  return (
    <div className="space-y-6">
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="h2">Heading 2</Typography>
      <Typography variant="h3">Heading 3</Typography>
      <Typography variant="paragraph-lg">
        This is a paragraph with the paragraph-lg variant. It uses CSS custom
        properties for consistent typography across your application.
      </Typography>
      <Typography variant="label-md">
        This is a label with label-md variant
      </Typography>
    </div>
  )
}

import Typography from "@/components/ui/typography"

export function TypographyHeadings() {
  return (
    <div className="space-y-3">
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="h2">Heading 2</Typography>
      <Typography variant="h3">Heading 3</Typography>
      <Typography variant="h4">Heading 4</Typography>
      <Typography variant="h5">Heading 5</Typography>
      <Typography variant="h6">Heading 6</Typography>
    </div>
  )
}

import Typography from "@/components/ui/typography"

export function TypographyPolymorphic() {
  return (
    <div className="space-y-4">
      <Typography
        variant="paragraph-md"
        as="a"
        href="#"
        className="text-primary hover:underline"
      >
        This is a paragraph rendered as a link
      </Typography>

      <div>
        <Typography variant="label-md" as="label" htmlFor="email">
          Email Address
        </Typography>
        <input
          id="email"
          type="email"
          className="mt-1 block w-full rounded-md border px-3 py-2"
          placeholder="you@example.com"
        />
      </div>
    </div>
  )
}

import Typography from "@/components/ui/typography"

export function TypographyLabels() {
  return (
    <div className="space-y-4">
      <Typography variant="label-xl">
        Label XL - Lead text and feature introductions
      </Typography>
      <Typography variant="label-lg">
        Label LG - Important form labels and emphasis
      </Typography>
      <Typography variant="label-md">
        Label MD - Standard form labels and UI labels
      </Typography>
      <Typography variant="label-sm">
        Label SM - Small labels, badges, and metadata
      </Typography>
      <Typography variant="label-xs">
        Label XS - Tiny indicators and micro copy
      </Typography>
    </div>
  )
}

import Typography from "@/components/ui/typography"

export function TypographyParagraphs() {
  return (
    <div className="space-y-4">
      <Typography variant="paragraph-xl">
        Paragraph XL - Large introductory text that draws attention.
      </Typography>
      <Typography variant="paragraph-lg">
        Paragraph LG - Default body text for articles and main content.
      </Typography>
      <Typography variant="paragraph-md">
        Paragraph MD - Component descriptions for cards and dialogs.
      </Typography>
      <Typography variant="paragraph-sm">
        Paragraph SM - Small text for captions.
      </Typography>
    </div>
  )
}