Text

stable

The role-based typographic primitive — the only entry point to type. Never hand-write font-size or weight.

shell

pnpm dlx shadcn@latest add @webzenia/text

preview

Body copy rendered through the registry — the role owns size, weight, leading, tracking.

props

roleTextRole

Required. The semantic role from the typography registry (142 roles).

askeyof JSX.IntrinsicElements

Override the default HTML tag for the role.

classNamestring

Merged after the role’s class stack.

styleCSSProperties

Only for state-driven overrides — never static font values.

accessibility

Renders the role’s semantic tag (h1–h6, p, span) — keep heading order correct with the `as` prop.

Throws on an unknown role, so type drift is impossible.

usage

tsx

import { Text } from "@/components/ui/text"

<Text role="section.h2">Section heading</Text>
<Text role="body-large">Body copy.</Text>