Sivir UI
73

Typography

H1 through H6 render their matching heading element at the document scale. Title takes a level prop, so a component heading can use any h1 to h6 tag at one fixed size.

Release 0.2.9 / September 3, 2026

Builds now reuse cached dependencies

Unchanged packages are restored from cache, so most builds skip the install step. Clear the cache from project settings.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add typography

Usage

Text defaults to the supporting variant; set variant to lead or body. Classes you pass through class override the defaults.

import * as Typography from '@sivir-ui/svelte/components/typography';

<Typography.H2>Account settings</Typography.H2>
<Typography.Text variant="supporting">Manage your profile and preferences.</Typography.Text>
<Typography.Text variant="body">
  Changes are saved to <Typography.InlineCode>profile.json</Typography.InlineCode>.
</Typography.Text>
<Typography.Metadata>Updated 4 minutes ago</Typography.Metadata>

Role reference

Each part sets type and color only. None of them add margins, so spacing comes from the parent layout.

H1-H6 h1-h6 --font-header / document heading scale / --font-weight-header
Text · lead p 1rem / --font-weight-description / foreground-muted
Text · body p 1rem / --font-weight-body / foreground
Text · supporting p --font-size-body / --font-weight-body / foreground-muted
InlineCode code --font-mono / --radius-sm / secondary
Title h1-h6 --font-header / --font-size-header / --font-weight-header
Description p --font-size-body / --font-weight-description / --tracking-body
Metadata span --text-xs / --font-weight-body / --tracking-body

Examples

Heading levels

Pick the level from the document outline. For a heading inside a component, use Typography.Title with a level instead.

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

Text roles

Text renders a p. Pick the variant from the paragraph's job: lead opens a page or section, body is long-form prose, and supporting is secondary context.

Preview deployments build every pull request and post a link in the review.

Each preview runs against a copy of the staging database. Data you create there is deleted when the pull request closes.

Previews older than 30 days are removed automatically.

Change the base branch in preview.config.ts.

Numeric metadata

Add tabular-nums when readers compare values in a column.

Build started 09:41:07 Tests completed 09:43:18 Deployment ready 09:44:02

Anatomy

Typography.Title - Renders a component heading at the h1 to h6 level you pass.

Typography.H1 - Renders the primary document heading.

Typography.H2 - Renders a document section heading.

Typography.H3 - Renders a document subsection heading.

Typography.H4 - Renders a fourth-level document heading.

Typography.H5 - Renders a subdued fifth-level heading.

Typography.H6 - Renders a subdued sixth-level heading.

Typography.Text - Renders lead, body, or supporting prose.

Typography.InlineCode - Renders code within prose.

Typography.Description - Renders muted text under a Title.

Typography.Metadata - Renders small muted text in a span.