Primitives

Typography

Four components covering the full type scale. Display uses Roboto Slab, the heavy display slab, for the shop-sign moments. Heading renders the correct <h1>–<h5> element at the matching size. Body handles paragraph text in three sizes. Mono renders JetBrains Mono for code, measurements, and IDs.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Four typographic components.

import { Display, Heading, Body, Mono } from 'achery-ui'

<Display as="h1">Pull quote</Display>           // display serif, polymorphic

<Heading level={2}>Section title</Heading>       // h1–h5, level 1 default

<Body variant="lead">Intro paragraph</Body>      // 'base'(14px) | 'lead'(16px) | 'small'(12px)

<Mono variant="small" as="code">0x1F4A9</Mono>  // 'base'(12px) | 'small'(11px), polymorphic