Component
Text
Renders body text with consistent size, weight, and tone.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/textExamples
Live previews render through the docs app's PandaCSS codegen.
<Text>The quick brown fox jumps over the lazy dog.</Text>
<Text size="bodyLg" weight="medium"> A lead paragraph with more presence. </Text>
<Text tone="danger">Something needs your attention.</Text>
<Text> Press <Text.Strong>Save</Text.Strong> to keep changes, or <Text.Em>cancel</Text.Em>. </Text>
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `as` | `TextElement` | No | - | Element to render. Defaults to \`p\`. |
| `color` | `TextColor` | No | - | Neutral foreground colour. Ignored when \`tone\` is set. Defaults to \`default\`. |
| `lineClamp` | `number` | No | - | Clamp to N lines with a trailing ellipsis (multi-line). |
| `size` | `TextSize` | No | - | - |
| `tone` | `Tone` | No | - | Selects a semantic status palette, overriding \`color\`. |
| `truncate` | `boolean` | No | - | Truncate to a single line with a trailing ellipsis. |
| `align` | `TextAlign` | No | - | - |
| `weight` | `TextWeight` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
| Variant | Values |
|---|---|
| `size` | `displayLg`, `display`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `bodyLg`, `body`, `bodySm`, `caption`, `micro` |
| `weight` | `regular`, `medium`, `semibold`, `bold` |
| `align` | `start`, `center`, `end`, `justify` |
| `truncate` | `true` |
Registry
Files this component contributes to your registry install.
- Manifest: `/r/text.json`
- Recipe: `text`
- Files: `src/components/ui/text.tsx`