Primitives
Text
One run of type, named by a theme role and a semantic tone
Roles
Tones
Usage
import { Text, Stack } from "@gpuixui/primitives";
<Stack direction="column" gap="2xs">
<Text role="h2">Version 0.11.0</Text>
<Text role="body" tone="muted">
Released 17 October 2026.
</Text>
<Text role="code">nub add @gpuixui/primitives</Text>
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
role | TextRole | "body" | size, leading, weight and family; a stored name the scale does not carry reads as body |
tone | TextTone | "default" | colour role; a stored name the table does not carry reads as default |
align | "start" | "center" | "end" | runtime default (left) | horizontal alignment; the runtime has no writing direction, so start paints left and end paints right, and a stored name this release does not carry paints the default |
truncate | boolean | false | one line, clipped with an ellipsis |
clamp | number | none | cut to a box N lines tall; a stored null is no clamp (the default), while a count that is there and cannot be laid out is one line |
selectable | boolean | false | userSelect: "text" plus the theme's selection wash |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StyleDesc | — | merged last |
ref / aria-id / onLayout | host props | none | the <text> element itself: the box a measurement reads (its own wrapped height, not a wrapper's), the instance a caller holds, and the author id an automation host addresses |
testId | string | — | stable locator |
children | ReactNode | — | the string (or inline nodes) |
Edit this page on GitHubpackages/primitives/docs/text.mdx