Sivir UI
79

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.

<script lang="ts">
    import * as Typography from '@sivir-ui/svelte/components/typography';
</script>

<article class="flex w-full max-w-xl flex-col gap-2">
    <Typography.Metadata>Release 0.2.9 / September 3, 2026</Typography.Metadata>
    <Typography.Title level={2}>Builds now reuse cached dependencies</Typography.Title>
    <Typography.Description class="max-w-[62ch]">
        Unchanged packages are restored from cache, so most builds skip the install step. Clear the
        cache from project settings.
    </Typography.Description>
</article>

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

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six
<script lang="ts">
    import * as Typography from '@sivir-ui/svelte/components/typography';
</script>

<div class="flex w-full max-w-xl flex-col gap-5">
    <Typography.H1>Heading one</Typography.H1>
    <Typography.H2>Heading two</Typography.H2>
    <Typography.H3>Heading three</Typography.H3>
    <Typography.H4>Heading four</Typography.H4>
    <Typography.H5>Heading five</Typography.H5>
    <Typography.H6>Heading six</Typography.H6>
</div>

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

Text roles

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.

<script lang="ts">
    import * as Typography from '@sivir-ui/svelte/components/typography';
</script>

<div class="flex w-full max-w-xl flex-col gap-5">
    <Typography.Text variant="lead">
        Preview deployments build every pull request and post a link in the review.
    </Typography.Text>
    <Typography.Text variant="body">
        Each preview runs against a copy of the staging database. Data you create there is deleted
        when the pull request closes.
    </Typography.Text>
    <Typography.Text variant="supporting">
        Previews older than 30 days are removed automatically.
    </Typography.Text>
    <Typography.Text variant="body">
        Change the base branch in <Typography.InlineCode>preview.config.ts</Typography.InlineCode>.
    </Typography.Text>
</div>

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.

Numeric metadata

Build started 09:41:07 Tests completed 09:43:18 Deployment ready 09:44:02
<script lang="ts">
    import * as Typography from '@sivir-ui/svelte/components/typography';
</script>

<div class="grid w-full max-w-sm grid-cols-[1fr_auto] items-baseline gap-x-8 gap-y-3">
    <Typography.Metadata>Build started</Typography.Metadata>
    <Typography.Metadata class="tabular-nums">09:41:07</Typography.Metadata>
    <Typography.Metadata>Tests completed</Typography.Metadata>
    <Typography.Metadata class="tabular-nums">09:43:18</Typography.Metadata>
    <Typography.Metadata>Deployment ready</Typography.Metadata>
    <Typography.Metadata class="tabular-nums">09:44:02</Typography.Metadata>
</div>

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

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.