Text

Install

import { Text } from "@/components/ouro/text/text";

Example

<Text>Braise for three hours.</Text>
<Text size="sm" tone="muted">Updated 2 days ago</Text>
<Text tone="destructive">Could not save the recipe.</Text>
<Text lines={2}>{recipe.description}</Text>

Usage

Inside a Button, pass plain text as children; the button styles it.

Use instead when

• Use Heading instead for titles (it renders <h1>–<h6>).

Props

The props the modes share. Type: TextProps.

align

Type: "start" | "center" | "end"

Default: inherited

Alignment in writing direction.

as

Type: "p" | "span" | "div"

Default: "p"

The element to render. Use span inside other text, div around block content.

children (required)

Type: ReactNode

The text. Inline elements such as <strong> and <a> are fine inside.

className

Type: string

Layout only: margins, width, grid placement (mt-2, max-w-prose). Appearance classes warn in development; use size, tone and align.

ref

Type: Ref<HTMLElement>

Reaches the rendered element.

size

Type: "sm" | "md" | "lg"

Default: "md"

Type size from the theme.

tone

Type: "primary" | "secondary" | "destructive" | "success" | "warning" | "default" | "muted"

Default: "default"

Text color: default foreground, muted for secondary text, or a tone for status text (destructive for an error). secondary is the same as muted, because shadcn's --secondary is a surface color, not a text color.

Modes

TextProps is a union: pass the props of exactly one mode. Mixing them is a type error.

With lines

lines

Type: number

Clamps the text to this many lines with an ellipsis. Use truncate for one line.

Not in this mode (typed never):

• truncate: Not with lines. Use truncate for one line or lines for more, not both.

With truncate

truncate

Type: boolean

Cuts the text to one line with an ellipsis. Use lines for more than one line.

Not in this mode (typed never):

• lines: Not with truncate. Use truncate for one line or lines for more, not both.

Native attributes

Also accepts the attributes in React's HTMLAttributes (id, aria-*, event handlers), passed to the rendered element, except those named on this page.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

• color: Not a prop. Ouro UI uses tone: <Text tone="muted">.
• variant: Not a prop. Text has no variants; use size and tone: <Text size="sm" tone="muted">.

className is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2).

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: use the align prop.