Text
Styled paragraph primitive. Tight prop surface — size, c (color shade), and an a11y-safe prefix slot.
Text renders a <p> with a kit-tuned size scale and a foreground shade switch (c). For headings, reach for Title.
import { Text } from '@42/ui-react/text';
<Text>Body paragraph.</Text>
<Text size="lg" c="muted">A bigger, quieter lead paragraph.</Text>
<Text size="sm" c="muted">Caption or metadata.</Text>Playground
Component
Presets
The kit ships a small set of opinionated primitives that compose into 42 product UIs.
Props
Code
<Component prefix="" size="md" c="default"> The kit ships a small set of opinionated primitives that compose into 42 product UIs.</Component>Full prop browser
The kit ships a small set of opinionated primitives that compose into 42 product UIs.
Sizes
Extra-small — captions, microcopy.
Small — secondary text under a heading.
Medium — default body scale.
Large — lead paragraph, opening line of a section.
<Text size="xs">…</Text>
<Text size="sm">…</Text>
<Text size="md">…</Text> {/* default */}
<Text size="lg">…</Text>Color shade
The c prop is a semantic toggle between the default foreground and a muted shade. It is not the palette Color — surfaces don't take accent colors.
Default foreground — for the main content.
Muted foreground — for captions and metadata.
<Text>Default body text.</Text>
<Text c="muted">Muted secondary text.</Text>Prefix slot
The prefix slot is hidden from screen readers (aria-hidden) and unselectable (select-none) — safe for decorative leaders like // without polluting copy-paste or assistive tech output.
First-class a11y-safe decorations.
<Text prefix="// ">A11y-safe decorative prefix.</Text>When asChild is used, the prefix slot is skipped — the consumer owns the inner structure.
Migrating from Typography
The old Typography component shipped multiple variants in one place. Pick the new component that matches:
| Old usage | New usage |
|---|---|
<Typography variant="h1" /> | <Title order={1} /> |
<Typography variant="p" /> | <Text /> |
<Typography variant="lead"> | <Text size="lg" c="muted" /> |
<Typography variant="small"> | <Text size="sm" c="muted" /> |
<Typography variant="code"> | (Code component — Phase 2 roadmap) |
<Typography variant="kbd"> | (Kbd component — Phase 2 roadmap) |
API
Prop
Type