Text

Text renders Nesra’s typography roles.

Usage

import { Text } from "@nesra/ui/text";

export function Description() {
  return <Text>Default product copy</Text>;
}

Examples

Typography roles

Typography lists the exact metrics.

Account details

Lead copy

Default product copy

Compact metadata

import { Text } from "@nesra/ui/text";

export function TextRolesExample() {
  return (
    <div className="grid w-full gap-nesra-spacing-md">
      <Text as="h2" variant="heading5">
        Account details
      </Text>
      <Text size="large" weight="semibold">
        Lead copy
      </Text>
      <Text>Default product copy</Text>
      <Text size="small" weight="medium">
        Compact metadata
      </Text>
    </div>
  );
}

HTML semantics and truncation

Section heading

A long supporting label that stays on one line in this narrow container

import { Text } from "@nesra/ui/text";

export function TextSemanticsExample() {
  return (
    <div className="grid w-full max-w-80 gap-nesra-spacing-md">
      <Text as="h3" variant="heading5">
        Section heading
      </Text>
      <Text as="span" className="text-nesra-text-muted" size="small" truncate>
        A long supporting label that stays on one line in this narrow container
      </Text>
    </div>
  );
}

Accessibility

Choose as from the document structure, independently of the visual variant. Make essential content available in full when truncating it.

API reference

Prop	Type	Default	Description
variant	TextVariant	body	Selects the visual role.
size	large | medium | small | xsmall	medium	Body size; unavailable for headings.
weight	semibold | medium | regular	regular	Body weight; unavailable for headings.
as	TextElement	p for body	Required for heading variants.
truncate	boolean	false	Adds single-line ellipsis behavior.
className	string	—	Adds or overrides classes through Nesra’s class merger.

Native text element attributes and refs are forwarded. See Typography for exact type metrics and font-loading responsibilities.

TextVariant is body, heading1, heading2, heading3, heading4, heading5, or heading6. TextElement is h1, h2, h3, h4, h5, h6, p, span, label, dt, dd, li, figcaption, legend, em, strong, small, abbr, or time.