Knit UI
GitHub

Playground

Loading playground…

Playground
<Typography>
  <Text>Example content inside Typography.</Text>
</Typography>

Examples

Single Block

Renders a single block child; the container establishes the content column.

Loading example…

Single BlockSourceStorybook

Multiple Blocks

Multiple stacked children receive automatic vertical rhythm via gap.

Loading example…

Multiple BlocksSourceStorybook

Custom Gap

Demonstrates that the gap token can be overridden to tighten or loosen rhythm.

Loading example…

Custom GapSourceStorybook

Rich Content

Mixed content types — headings, body text, and inline emphasis in one column.

Loading example…

Rich ContentSourceStorybook

Themed

The color of descendant text follows the active Tamagui theme accent.

Loading example…

ThemedSourceStorybook

Props

PropTypeDefaultDescription
disabled systemboolean | undefined
shadow system"xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined
theme systemThemeName | null | undefined
unset · blue · red · green · yellow · pink · gray
Active theme accent — inherited by descendant text.
Accessibility & DOM props (2)
PropType
keyKey | null | undefined
refRef<TamaguiElement> | undefined

Plus 498 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.