Installation

This brings the typeface too. Four weights of Inter Display - 400, 500, 600, 700 - land in fonts/, with the @font-face rules in components/stepwise/fonts.css and Inter's OFL licence alongside them. The scale is drawn against this family - its -0.03em tracking assumes Inter Display's tight default spacing.

The font

Two lines wire it up. Import the face rules, then point Tailwind's sans stack at the family:

/* globals.css */
@import "tailwindcss";
@import "../components/stepwise/fonts.css";

:root {
  --font-sans: "Inter Display", ui-sans-serif, system-ui, sans-serif;
}

Using a different typeface instead: skip both lines and delete fonts/. Nothing in the library hard-codes a family - every component inherits whatever your page sets, so your own type flows through the same scale untouched. Only the tracking is tuned for Inter Display; on a wider face, relax it:

/* Your own family - no Stepwise font needed */
:root {
  --font-sans: "Your Typeface", ui-sans-serif, system-ui, sans-serif;
}

/* The scale's tracking assumes Inter Display's tight spacing.
   On a wider face, dial it back: */
.text-balance { letter-spacing: -0.01em; }

Import

import { Text } from '@/components/stepwise/typography'

Type scale

Usage

Headings

<Text variant="h1">Consistent by default</Text>
<Text variant="h2">Ship faster, look better</Text>
<Text variant="h3">Every detail matters</Text>

Soft weight

Every heading has a -soft counterpart at medium (500) weight instead of semibold (600). Same size, lighter feel.

{/* SemiBold - default emphasis */}
<Text variant="h2">Consistent by design</Text>

{/* Medium - reduced weight, same size */}
<Text variant="h2-soft">Consistent by design</Text>

Body text

{/* SemiBold body - for emphasis in copy */}
<Text variant="body">
  Stepwise UI gives you a consistent type scale.
</Text>

{/* Regular body - default reading weight */}
<Text variant="body-soft">
  Stepwise UI gives you a consistent type scale.
</Text>

{/* 14px supporting text */}
<Text variant="detail">
  Supporting copy and secondary information.
</Text>

Labels

<Text variant="caption">Labels, metadata, timestamps</Text>
<Text variant="caption-soft">Secondary label text</Text>

Monospace

Uses Geist Mono. Renders as <code> by default.

<Text variant="mono">const stepwise = () =&gt; "consistent"</Text>

The as prop

Separates visual style from semantic HTML. Use it to keep your heading hierarchy correct for SEO and screen readers without sacrificing design - a common need when one section visually calls for an h1 but structurally should be an h2.

{/* Visual h1 style on a semantic h2 - correct for SEO */}
<Text variant="h1" as="h2">Page section title</Text>

{/* Styled timestamp with correct semantic element */}
<Text variant="caption" as="time" dateTime="2025-01-01">
  Jan 1, 2025
</Text>

{/* Form label with correct semantic element */}
<Text variant="body-soft" as="label" htmlFor="email">
  Email address
</Text>

CSS classes

The exact Tailwind classes applied per variant. Use them directly when you need the style without the component.

Default elements

The HTML element each variant renders when no as prop is provided.

API reference

TypographyVariant

type TypographyVariant =
  | 'hero'     | 'headline'
  | 'h1'       | 'h1-soft'
  | 'h2'       | 'h2-soft'
  | 'h3'       | 'h3-soft'
  | 'h4'       | 'h4-soft'
  | 'h5'       | 'h5-soft'
  | 'h6'       | 'h6-soft'
  | 'body'     | 'body-soft'
  | 'detail'
  | 'caption'  | 'caption-soft'
  | 'mono'

Props