OverviewCopy Anchor Link

The Typography component encapsulates Vayu UI's type system — three font families, a semantic size scale, and color variants — into a single, accessible API. Instead of manually applying Tailwind classes, use Typography subcomponents to get consistent, readable text.

npx vayu-ui-cli@latest add typography

Font FamiliesCopy Anchor Link

Vayu UI uses three font families, each with a specific purpose:

The Typography component selects the right font automatically — headings use font-primary, paragraphs use font-secondary. Override with the font prop when needed.

HeadingsCopy Anchor Link

Typography provides six heading levels (H1–H6), each with predefined sizes and weights that maintain visual hierarchy.

Size ScaleCopy Anchor Link

ParagraphsCopy Anchor Link

Typography.P renders body text with relaxed line height, using the secondary font by default.

Color VariantsCopy Anchor Link

All Typography components support semantic color variants through the variant prop:

LabelsCopy Anchor Link

Typography.Label associates text with form controls using the htmlFor prop.

CodeCopy Anchor Link

Typography.Code renders inline code with syntax language hints and accessible labels.

LinksCopy Anchor Link

Typography.Link uses Next.js <Link> for internal paths and standard <a> for external URLs. External links automatically add rel="noopener noreferrer" and accessible announcements.

Call to ActionCopy Anchor Link

Typography.CTA renders prominent text for calls to action.

Font LoadingCopy Anchor Link

Vayu UI expects these fonts to be loaded. Add them to your project's font configuration:

Using Next.js Font OptimizationCopy Anchor Link

// app/layout.tsx
import { Oswald, Mulish, Geist_Mono } from 'next/font/google';

const oswald = Oswald({
  subsets: ['latin'],
  variable: '--font-primary',
});

const mulish = Mulish({
  subsets: ['latin'],
  variable: '--font-secondary',
});

const geistMono = Geist_Mono({
  subsets: ['latin'],
  variable: '--font-tertiary',
});

export default function RootLayout({ children }) {
  return (
    <html className={`${oswald.variable} ${mulish.variable} ${geistMono.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Using CSS @font-faceCopy Anchor Link

/* In your global CSS */
@font-face {
  font-family: 'Oswald';
  src: url('/fonts/Oswald.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('/fonts/Mulish.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}