Installation

npx vayu-ui init #one time only

npx vayu-ui add typography

npx vayu-ui add -t typography

Usage

<Typography.H1>Main Heading</Typography.H1>
<Typography.H2>Section Title</Typography.H2>
<Typography.H3>Subsection</Typography.H3>
<Typography.H4>Component Heading</Typography.H4>
<Typography.H5>Subcomponent Heading</Typography.H5>
<Typography.H6>Minor Heading</Typography.H6>

<Typography.P>Default paragraph with relaxed line height.</Typography.P>
<Typography.P variant="secondary">Secondary paragraph for less emphasis.</Typography.P>

<Typography.Label htmlFor="email">Email Address</Typography.Label>

<Typography.Code>npm install vayu-ui</Typography.Code>
<Typography.Code codeLang="typescript">const x: string = "hello"</Typography.Code>

<Typography.Link href="/components">Internal Link</Typography.Link>
<Typography.Link href="https://example.com" target="_blank">
  External Link
</Typography.Link>

<Typography.CTA className="text-brand">Call to Action</Typography.CTA>

<Typography.P variant="error">Error text</Typography.P>
<Typography.P variant="warning">Warning text</Typography.P>
<Typography.P variant="info">Info text</Typography.P>
<Typography.P variant="success">Success text</Typography.P>

<Typography.H3 variant="gradient">Gradient Heading</Typography.H3>

<Typography.P ellipsis>Long text that will be truncated with an ellipsis when it overflows the container.</Typography.P>

<Typography.P font="primary">Primary font family</Typography.P>
<Typography.P font="secondary">Secondary font family</Typography.P>

Anatomy

<Typography.H1 variant="primary" ariaLabel="Page title">
  Heading Text
</Typography.H1>

<Typography.P variant="secondary" ellipsis lang="en">
  Paragraph content
</Typography.P>

<Typography.Label htmlFor="input-id" variant="primary">
  Label text
</Typography.Label>

<Typography.Link href="/path" ariaDescribedby="link-desc">
  Link text
</Typography.Link>

<Typography.Link href="https://example.com" target="_blank">
  External Link
</Typography.Link>

<Typography.Code codeLang="typescript" variant="primary">
  const x: string = "hello";
</Typography.Code>

<Typography.CTA variant="primary" className="text-brand">
  Call to action text
</Typography.CTA>

Accessibility

• Keyboard support — Links are natively focusable via Tab; Enter or Space activates them
• ARIA attributes — Full support for ariaLabel, ariaDescribedby, ariaHidden, and role props on all components
• Focus indicators — Links and Code elements display visible focus rings (focus:ring-2) for keyboard navigation
• Semantic HTML — Headings use <h1>–<h6>, paragraphs use <p>, labels use <label>, code uses <code>, links use <a> or Next.js <Link>
• Contrast compliance — All color variants use design tokens that meet WCAG 2.2 AA contrast ratios (4.5:1 for normal text, 3:1 for large text)
• External link announcements — External links append "(opens in a new tab)" or "(external link)" to aria-label per WCAG 2.4.4 and 2.5.3
• Touch targets — Links enforce a minimum 44px touch target (min-h-11 min-w-11) per WCAG 2.5.8
• Language support — lang attribute for content language declaration; codeLang sets data-code-lang and auto-generates aria-label on Code
• Next.js Link — Internal links use Next.js <Link> for client-side navigation with proper accessibility

Screen reader behavior

• Headings — Announced as heading level 1 through 6 based on the component used (e.g., "Heading level 1: Main Heading")
• Paragraphs — Announced as normal text content; ariaLabel overrides the visible text if provided
• Labels — Announced as label; associated with form controls via htmlFor
• Links — Internal links announced as link text. External links announced as "Link text (external link)" or "Link text (opens in a new tab)" depending on target
• Code — Announced with role "code"; when codeLang is set, announced as "typescript code: const x: string = hello" (or the relevant language)
• CTA — Announced as paragraph text; use role or ariaLabel for custom semantic meaning
• ariaHidden — When set, the element and its content are skipped entirely by screen readers
• Gradient variant — Text is visually rendered via a gradient background, but screen readers read the text content normally

Component Folder Structure

Typography/
├── index.ts                # Public exports
├── Typography.tsx          # Compound component assembly
├── TypographyHeadings.tsx  # H1–H6 heading components
├── TypographyTextElements.tsx  # P, Label, CTA components
├── TypographyLink.tsx      # Link with Next.js integration
├── TypographyCode.tsx      # Inline code component
├── types.ts                # TypeScript type definitions
├── utils.ts                # Variant class mapping utility
└── README.md

Props

Base Props

All typography components accept these props.

Typography.H1–H6

Each heading extends base props plus native HTMLAttributes<HTMLHeadingElement>.

Typography.P

Extends base props plus HTMLAttributes<HTMLParagraphElement>.

Typography.Label

Extends base props plus HTMLAttributes<HTMLLabelElement>.

Typography.CTA

Extends base props plus HTMLAttributes<HTMLParagraphElement>. No additional props beyond base.

Typography.Link

Extends base props plus AnchorHTMLAttributes<HTMLAnchorElement>.

Typography.Code

Extends base props plus HTMLAttributes<HTMLElement>.