@zedtech/zedkit-ui

Typography

Heading levels and Text variants with theme-aware styles; visual roles decouple size from semantic level (`typeRole` / `typeRoleClass`).

Stable@zedtech/zedkit-ui

Wraps: class-variance-authority

Page title

Section title

Body copy.

Secondary copy.

Section title as a link

View props table

Who is it for?: Developers writing kit pages with consistent type.
When should I use it?: For every heading and paragraph in kit UI.
When should I pick something else?: For Markdown source — use `Render Markdown without raw HTML`. For raw HTML emails — style those separately.

Use it

Examples import from the package. With copied source, import from @/components/ui/typography instead.

Simple

import {
  Heading,
  Text,
  typeRoleClass,
  signatureMotionClass,
  headingLevelDefaultRole,
  type TypeRole,
  type SignatureMotion,
} from "@zedtech/zedkit-ui";
<Heading level={1} typeRole="display">Page title</Heading>
<Heading level={2} typeRole="title">Section title</Heading>
<Heading level={3} typeRole="heading">Band heading</Heading>
<Text typeRole="body">Body copy.</Text>
<Text typeRole="caption">Caption</Text>

Heading styles on a link (asChild)

Release notes

Section title as a link

Opens the section, keeps the heading style and the heading outline.

import { Heading } from "@zedtech/zedkit-ui";
<Heading level={2} asChild>
  <a href="#section">Section title as a link</a>
</Heading>

Kit not installed yet?

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

src/app/page.tsxReplace the contents

import { Heading, Text, typeRoleClass, signatureMotionClass, headingLevelDefaultRole, type TypeRole, type SignatureMotion } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Heading level={1} typeRole="display">Page title</Heading>
      <Heading level={2} typeRole="title">Section title</Heading>
      <Heading level={3} typeRole="heading">Band heading</Heading>
      <Text typeRole="body">Body copy.</Text>
      <Text typeRole="caption">Caption</Text>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Keep one h1 per page; asChild merges styles onto the child — keep the outline meaningful.

Troubleshooting

Wrong tag in the outline — `level` picks the size but `as` picks the tag; set both when they differ. Anchor hidden under a sticky header — heading scroll margin comes from the `--spacing-heading-scroll` theme token.

Container

Named container widths and edge-to-edge section bands from the layout token scale. `query` makes the container a sizing slot for adaptive components.

Render Markdown without raw HTML

Turn CommonMark into React elements with sanitized, inert HTML and script vectors, info-coloured links, and wrapping fences. Install with npm.