Text

Styled paragraph primitive. Tight prop surface — size, c (color shade), and an a11y-safe prefix slot.

Text renders a  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

Dir

Presets

Props

size

span

prefix

children

Code

<Component 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.

object

Sizes

Extra-small — captions, microcopy.

Small — secondary text under a heading.

Medium — default body scale.

Large — lead paragraph, opening line of a section.

Code

<Text size="xs">…</Text><Text size="sm">…</Text><Text size="md">…</Text>   {/* default */}<Text size="lg">…</Text>

size also accepts h1..h6 and p as friendlier names for the same scale (h1 -> 4xl, h2 -> 3xl, … h6/p -> md). These are visual-only — Text still always renders a  (or  with the span prop), never a heading element.

Sized like an h2, still a .

Sized like an h4.

Same as the default md size.

Code

<Text size="h2">…</Text><Text size="h4">…</Text><Text size="p">…</Text>   {/* same as size="md" */}

Color shade

The c prop is a semantic toggle between the default foreground and two muted shades. It is not the palette Color — surfaces don't take accent colors.

Default foreground — for the main content.

Secondary foreground — for labels and section headings.

Muted foreground — for captions and metadata.

Code

<Text>Default body text.</Text><Text c="secondary">Secondary text — labels, section headings.</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.

Code

<Text prefix="// ">A11y-safe decorative prefix.</Text>

When asChild is used, the prefix slot is skipped — the consumer owns the inner structure.

Rendering a ``

Pass span when a  isn't valid HTML where Text is composed — e.g. nested inside a consumer's own paragraph, or inside another phrasing-content-only element. Same styling either way; only the tag changes.

Renders a instead of a .

Code

<Text span c="muted">Renders a <span> instead of a <p>.</Text>

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

Playground

Full prop browser

Sizes

Heading-size aliases

Color shade

Prefix slot

Rendering a `<span>`

Migrating from `Typography`

API

On this page