Typography

Semantic text styles for titles, body, and supporting copy.

Overview

Typography is a reusable component system for semantic text: headings, paragraphs, lists, inline code, blockquotes, and links. Typography groups them with a consistent gap. Native tags keep the document outline intact. It is not Typeset — Typeset is the separate Markdown / content typography docs at /typeset.

Preview

Notes

Installed into your project as source.

Edit the file after the CLI copies it into your repository.

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add typography

Usage

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

export function Article() {
  return (
    <Typography>
      <TypographyH1>Notes</TypographyH1>
      <TypographyP>Installed as source.</TypographyP>
    </Typography>
  );
}

Examples

Semantic text

Headings, paragraph, muted copy, inline code, a link, a list, and a blockquote — the Typography component system, not the Typeset playground.

Taxing traffic

The joke tax

Ignoring style guides

People hated taxes

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Inline vinyaas add typography installs these elements as source.

Muted text for captions and secondary detail.

Prefer the Typography components for UI copy. Use Typeset when styling rendered Markdown documents.

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners: 20 gold coins
After all, he thought, everyone enjoys a good joke, so it's only fair that they should pay for the privilege.

Article

A short article uses a title, a lead, body, and a list.

Notes on the engine

A short account of how the catalog is installed.

Each component is a source file in your repository.

  • Copy the file
  • Install its packages

Product description

A product name, price, and muted detail.

Studio plan

₹9,600 / month

Billed annually. Seats can be added later.

Release notes

A release heading, a paragraph, and a quote.

v1.0.0

The catalog ships as source you can edit.

Button remains the v0.1 primitive.
28 September 2026

Message

A message uses a name, body, and a muted time.

Priya Shah

The compiler patch is ready for review.

9:41

Dashboard

A metric pairs a large value with a muted caption.

128

Signups in the last 7 days

Customize with CSS variables

Define .typeset-docs tokens in your stylesheet, then wrap Typography in that class. Size, leading, and flow control density without changing the component API.

Docs density

This preview uses .typeset-docs tokens for body size, leading, and flow.

Override the variables in your global stylesheet.

In practice

A long-form doc excerpt uses headings, lead, body, an ordered list, and muted metadata.

Installing components

Copy source into the repository, then edit it like any other file.

Run vinyaas add button after vinyaas init. The CLI writes the file under components/ui.

  1. Initialize the project
  2. Add the components you need
  3. Commit the installed source

Updated for v1.0.0

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
classNamestring—Merged onto the element with cn. Each export renders its own semantic tag.
childrenReactNode—The text or nested content for that element.

Accessibility

Each export renders the HTML element in its name. A heading stays a heading, a list stays a list, and a quote stays a blockquote.

  • Do not use a heading style on a paragraph. Use the matching heading component.
  • TypographyMuted is quieter copy. It is not a replacement for text that must meet a status requirement.