Typography

The kit's type scale — one component instead of hand-picking Tailwind classes per page. Each variant renders its semantically correct element by default (h1 → <h1>, lead → <p>, ...); override with as when you need different semantics than styling (e.g. an <h3>-styled <div> inside a card header).

import { Typography } from "@pompeitech/vesuvius-ui";

Variants

Every variant

Styling without the semantics

Override the rendered tag with as when you need this variant's styling somewhere its semantic element wouldn't be valid HTML — a heading-styled label inside a CardTitle (already a heading itself), for instance:

Customizing the heading font

Headings (h1–h6) use a separate font-heading token from body text, defined once in base.css as --font-heading (defaults to the same stack as body text, so nothing changes until you override it) — see Theming for the full token reference:

@import url("https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap");
 
:root {
  --font-heading: "Cal Sans", var(--font-sans);
}

API

Typography

Plus every native prop of whichever element ends up rendered (a Typography variant="p" forwards <p> props, as="div" forwards <div> props, and so on).

Default tag per variant