Text

atom

Polymorphic typography primitive. Seven sizes, four weights, seven semantic colours, three font families, and a truncation utility.

"Add a Text component from lucent-ui for a section heading. Use size="xl", weight="semibold", and the display font family."

Usage

React / JSX

import { Text } from 'lucent-ui'

<Text as="p" size="md" weight="regular" color="primary" family="base">Text</Text>

pnpm add lucent-ui

Text props — * required

Prop	Type	Default	Description
`as`	`React.ElementType`	`"p"`	The HTML element or component to render (p, span, h1, code…).
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"md"`	Font size.
`weight`	`"regular" \| "medium" \| "semibold" \| "bold"`	`"regular"`	Font weight.
`color`	`"primary" \| "secondary" \| "disabled" \| "success" \| "warning" \| "danger" \| "info"`	`"primary"`	Semantic colour.
`family`	`"base" \| "mono" \| "display"`	`"base"`	Font family.
`truncate`	`boolean`	`false`	Clips overflow to one line with an ellipsis.
`children`*	`React.ReactNode`	—	Text content.