@edux-design/typography

Semantic typography primitives that wrap the Edux token scale. Components include XXXL, XXL, XL, L, MD, and SM. Each element renders the appropriate HTML tag + Tailwind classes so you can drop them into any layout without repeating class strings.

Installation

pnpm add @edux-design/typography @edux-design/utils
# or
npm install @edux-design/typography @edux-design/utils

Peer deps: react@^19.1.0, react-dom@^19.1.0.

Usage

import { XXL, MD, SM } from "@edux-design/typography";

export function Hero() {
  return (
    <section className="space-y-4">
      <XXL>Design faster with Edux</XXL>
      <MD className="text-fg-subtle">
        Consistent tokens, flexible primitives, and batteries-included tooling.
      </MD>
      <SM className="uppercase tracking-wide text-fg-muted">
        Last updated 2 hours ago
      </SM>
    </section>
  );
}

Every component accepts:

• as (optional) – render using a different HTML tag while keeping the same style classes.
• className – merge extra Tailwind utilities via cx.
• children – the text/inline elements to display.

Development

pnpm --filter @edux-design/typography lint
pnpm --filter @edux-design/typography check-types
pnpm --filter @edux-design/typography build

Stories (src/demos/Typography.stories.jsx) demonstrate the entire scale.

Notes

• These primitives are intentionally thin wrappers—compose them freely instead of memorizing the class strings.
• If you add a new size, update src/index.js, the stories, and this README so consumers know it exists.