Typography@knitui/components

Title

Title renders a semantic heading element (h1–h6) driven by the order prop. size overrides the order-driven font size and accepts h1–h6 heading-scale aliases, seven-step font-size tokens (xxs–xxl), or any arbitrary CSS value.

WebiOSAndroid0 own props7 examples

Stories Source Tests Open in Storybook

import { Title } from "@knitui/components";

Playground

Loading playground…

orderSemantic heading level — sets the rendered tag (`h1`–`h6`) and its default size.

sizeOverrides the order-driven font size. Accepts heading aliases (`h1`–`h6`), seven-step font-size tokens (`xxs`–`xxl`), or arbitrary CSS values.

children

lineClamp

truncate

false

textWrapCSS `text-wrap` value (web only).

Playground

<Title
  order={1}
>
  The quick brown fox
</Title>

Examples

Orders

All six heading orders rendered together to compare default sizing.

Loading example…

OrdersSource Storybook

Heading Sizes

Heading-scale size aliases (h1–h6) applied to a fixed order, showing that size overrides the default.

Loading example…

Heading SizesSource Storybook

Token Sizes

Font-size tokens (xxs–xxl) used as a size override, showing the token-driven scale.

Loading example…

Token SizesSource Storybook

Size Overrides Order

Size override decoupled from semantic order — order sets the tag, size sets the visual weight.

Loading example…

Size Overrides OrderSource Storybook

Line Clamp

Line clamping — long text is truncated after the given number of lines.

Loading example…

Line ClampSource Storybook

Text Wrap Balance

textWrap="balance" distributes text evenly across lines (web only).

Loading example…

Text Wrap BalanceSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	—	Specifies the disabled state of the text view for testing purposes.
`size` system	`string \| number \| undefined` h1 · h2 · h3 · h4 · h5 · h6 · xxs · xs · sm · md · lg · xl · xxl	—	Overrides the order-driven font size. Accepts heading aliases (`h1`–`h6`), seven-step font-size tokens (`xxs`–`xxl`), or arbitrary CSS values.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiTextElement> \| undefined`

Plus 509 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.