InstallationCopy Anchor Link

npx vayu-ui-cli@latest add typography

UsageCopy Anchor Link

AnatomyCopy Anchor Link

<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>

AccessibilityCopy Anchor Link

• 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 Accessible 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 behaviorCopy Anchor Link

• 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 StructureCopy Anchor Link

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

PropsCopy Anchor Link

Base PropsCopy Anchor Link

All typography components accept these props.

Typography.H1–H6Copy Anchor Link

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

Overriding Heading SizesCopy Anchor Link

Headings use the application scale (text-h1 through text-h6), without breakpoint-specific size overrides. Use unsized when supplying a custom size for an intentional marketing headline. Keep application page and panel titles on the default scale.

Use the unsized prop to opt out of the default sizing block entirely:

{
  /* Stays text-sm on all breakpoints */
}
<Typography.H3 unsized className="text-sm font-semibold">
  Small heading everywhere
</Typography.H3>;

{
  /* Without unsized: balloons back to 2xl/3xl/4xl — don't do this */
}
<Typography.H3 className="text-sm">Broken override</Typography.H3>;

Typography.PCopy Anchor Link

Extends base props plus HTMLAttributes<HTMLParagraphElement>.

Typography.LabelCopy Anchor Link

Extends base props plus HTMLAttributes<HTMLLabelElement>.

Typography.CTACopy Anchor Link

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

Typography.LinkCopy Anchor Link

Extends base props plus AnchorHTMLAttributes<HTMLAnchorElement>.

Typography.CodeCopy Anchor Link

Extends base props plus HTMLAttributes<HTMLElement>.

Application heading scaleCopy Anchor Link

Headings use the semantic text-h1–text-h6 tokens, approximately 30/24/20/18/16/14px at the default base size. They keep that scale across breakpoints instead of automatically expanding to hero sizes. Choose heading levels for document structure; use shared tokens to change the product-wide scale.

Reserve unsized and large display classes for an intentional marketing design. Card and overlay titles usually need 16–20px. Typography.Link uses native anchors in every React framework; use your router's link component when client-side routing is required.