Text

A body text component with size, weight, color, and line-height variants. Renders as a paragraph by default with polymorphic element support.

Sizes

Extra small text

Small text

Medium text (default)

Large text

Extra large text

Weights

Normal weight (default)

Medium weight

Semibold weight

Bold weight

Colors

Primary text color

Secondary text color

Tertiary text color

Line Height

The leading prop controls line height. Use relaxed or loose for long-form body text.

Tight — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Snug — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Normal (default) — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Relaxed — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Loose — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Polymorphic Element

Use the as prop to render as a different HTML element.

Paragraph (default)

Inline span

Block div

Label element

Installation

npx visor add text

This copies two files into your project:

components/ui/text/text.tsx — the component
components/ui/text/text.module.css — the styles

Usage

import { Text } from '@/components/ui/text/text';

export default function Example() {
  return <Text>This is a paragraph of body text.</Text>;
}

API Reference

TextProps

Prop	Type	Default	Description
`as`	`'p' \| 'span' \| 'div' \| 'label'`	`'p'`	HTML element to render.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Font size of the text.
`weight`	`'normal' \| 'medium' \| 'semibold' \| 'bold'`	`'normal'`	Font weight of the text.
`color`	`'primary' \| 'secondary' \| 'tertiary' \| 'inherit'`	`'primary'`	Text color mapped to semantic color tokens.
`leading`	`'tight' \| 'snug' \| 'normal' \| 'relaxed' \| 'loose'`	`'normal'`	Line height of the text.
`className`	`string`	—	Additional CSS class names to merge onto the element.

The component also accepts all standard HTML paragraph attributes.

Accessibility

Use color="secondary" or color="tertiary" with care — these map to lower-contrast tokens. Verify contrast ratios meet WCAG AA (4.5:1) for any informational text.
Prefer leading="relaxed" for body copy longer than two lines; it improves readability for users with dyslexia.
Use as="label" with an htmlFor prop when pairing with form inputs, rather than wrapping a Label component.
Avoid using Text for headings — use Heading to maintain a proper document outline.

Customization

After copying the component, you own it completely. Common customizations:

// Truncate to a single line with ellipsis
<Text className="truncate">Very long text that gets cut off...</Text>

// Combine with color="inherit" for themed contexts
<Text color="inherit" size="sm">Inherits color from parent</Text>

On this page