Typography

Ready

Heading, Text, Code, List, Blockquote.

Installation

$ npx @oratiq-js/ui add typography

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

import { Heading, Text, Code, Blockquote, List, TextLink, /* … */ } from "@/components/ui/typography";

Headings

Visual level is decoupled from the HTML tag — use `as` to keep the document outline correct.

The quick brown fox

Text

Body large

size="lg"

Body default

size="default"

Body small

size="sm"

Body extra small

size="xs"

Muted secondary copy

tone="muted"

Something went wrong

tone="destructive"

Inline and block

Install with npm i @oratiq-js/ui, then read the theming guide.

A design system is a product that serves other products.

Semantic tokens, not raw colour values
Logical properties, not left and right
Every state documented, not just the happy path

Install the package
Add the token layer
Wrap your app in the providers

Line length

Body copy reads best between 45 and 75 characters per line. The docs use max-w-4xlfor exactly this reason — don't let text spans grow to the full width of a desktop viewport.

View source on GitHub → components/ui/typography.tsx