Typography@knitui/components

Text

Text is the kit's text primitive, built on Tamagui's styled(TamaguiText). It exposes a Mantine-compatible API: size pairs font-size with line-height via the token scale, lineClamp truncates to N lines, truncate adds a single-line ellipsis, inline tightens line-height for inline usage, inherit forwards all font props from the parent, and span renders an inline <span> host element.

WebiOSAndroid0 own props7 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

sizeFont-size + line-height pair from the token scale.

lineClampClamp text to this many lines with a trailing ellipsis.

truncateSingle-line truncation. `true`/`"end"` adds trailing ellipsis; `"start"` clips the head.

inlineTightens line-height for inline usage (verticalAlign: middle).

false

inheritInherits all font properties from the parent element.

false

spanRenders an inline `<span>` host element instead of a block.

false

children

Playground

<Text
  size="md"
  inline={false}
  inherit={false}
  span={false}
>
  Typography text
</Text>

Examples

Sizes

All seven sizes from xxs to xxl rendered side by side.

Loading example…

SizesSource Storybook

Line Clamp

lineClamp limits text to N lines and appends an ellipsis.

Loading example…

Line ClampSource Storybook

Truncate

Single-line truncation: true/"end" clips the tail; "start" clips the head.

Loading example…

TruncateSource Storybook

Inline

inline tightens line-height so the text sits flush inside inline contexts.

Loading example…

InlineSource Storybook

Inherit

inherit forwards font-size, weight, line-height, and family from the parent.

Loading example…

InheritSource Storybook

As Span

span renders an inline host element, allowing Text to nest inside prose.

Loading example…

As SpanSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	—	Specifies the disabled state of the text view for testing purposes.
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`md`	Font-size + line-height pair from the token scale.
`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 507 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.