Mielui · Typography

Installation

pnpm dlx @mielui/svelte add typography

Usage

Choose a role for meaning, then use class for a local exception.

import * as Typography from '@mielui/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

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

Use the heading that matches the document outline. Compact component titles remain available through Typography.Title .

Text roles

Choose a paragraph role from its relationship to the surrounding content, not from a standalone size or color.

Numeric metadata

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

API reference

Typography.Description

Renders supporting text.

Prop	Type	Default
`children` Required	`Snippet<[]>`	`—`

Typography.H1

Renders the primary document heading.

Prop	Type	Default
`children` Required	`Snippet<[]>`	`—`

Typography.H2

Renders a document section heading.

Prop	Type	Default
`children` Required	`Snippet<[]>`	`—`

Typography.H3

Renders a document subsection heading.

Prop	Type	Default
`children` Required	`Snippet<[]>`	`—`

Typography.H4

Renders a fourth-level document heading.

Prop	Type	Default
`children` Required	`Snippet<[]>`	`—`

Typography.H5

Renders a subdued fifth-level heading.

Prop	Type	Default
`children` Required	`Snippet<[]>`	`—`

Typography.H6

Renders a subdued sixth-level heading.

Prop	Type	Default
`children` Required	`Snippet<[]>`	`—`

Typography.InlineCode

Renders code within prose.

Prop	Type	Default
`children` Required	`Snippet<[]>`	`—`

Typography.Metadata

Renders compact secondary information.

Prop	Type	Default
`children` Required	`Snippet<[]>`	`—`

Typography.Text

Renders lead, body, or supporting prose.

Prop	Type	Default
`children` Required	`Snippet<[]>`	`—`
`variant`	`TypographyTextVariant \| undefined`	`'supporting'`

Typography.Title

Renders an explicit heading level.