Typography

Text, Heading and Kbd components built on the type scale and semantic colors.

Stable

Web

iOS

Android

@advui/core

Preview

Code

The quick brown fox

Large body text for introductions.Base body text for most content.Small text for supporting content.Extra small for captions.pnpm add @advui/core

Search withCtrlK

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

import { Heading, Text } from '@advui/core'

<Heading level={2}>Billing</Heading>
<Text tone="muted">Manage your plan and invoices.</Text>

Preview

Code

default textmuted textprimary textsuccess textwarning texterror textinfo text

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl' \| '6xl'`	`'base'`	12px → 60px.
`weight`	`'normal' \| 'medium' \| 'semibold' \| 'bold'`	—	Font weight.
`tone`	`'default' \| 'muted' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'inherit'`	—	Semantic color.
`truncate`	`boolean`	—	Single line with ellipsis.
`mono`	`boolean`	—	Monospace font.

Prop	Type	Default	Description
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Semantic level (h1–h6).
`size`	`'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl' \| '6xl'`	—	Override the visual size independently of the level.

Keyboard key hint rendered as `<kbd>` on web.

Heading renders <h1>–<h6> on web and role="heading" with aria-level on native.
Keep heading levels sequential; change size, not level, for visual tweaks.
All tones meet 4.5:1 contrast on the default background.
Text respects the OS font scale on iOS/Android (Dynamic Type / font size).

Since v0.1.0Last updated Nov 2, 2026Edit this page on GitHub