Typography

Text

Body text.

Server safeSource

Import

import { Text } from '@the_viveksingh/vivek-ui'

Sizes and weights

Large and semibold

Default size, default weight

Small and muted

<Text size="lg" weight="semibold">Large and semibold</Text>
<Text>Default size, default weight</Text>
<Text size="sm" tone="muted">Small and muted</Text>

Tones

Four tones, each drawn from a token so a theme change moves all of them.

Default body copy

Muted, for secondary detail

Primary, for emphasis on brand

Danger, for an error message

<Text>Default body copy</Text>
<Text tone="muted">Muted, for secondary detail</Text>
<Text tone="primary">Primary, for emphasis on brand</Text>
<Text tone="danger">Danger, for an error message</Text>

Overflow

truncate clips to one line; lineClamp clips to N. Both keep a card grid from going ragged when one item has more to say than the rest.

A single line that is far too long to fit in this container and gets an ellipsis instead of wrapping.

lineClamp cuts the paragraph off after a set number of lines. This one stops after two, however much copy follows it, which keeps a card grid from going ragged when one item has more to say than the rest.

<Text truncate>A single line that is far too long to fit.</Text>
<Text lineClamp={2} tone="muted">
  lineClamp cuts the paragraph off after a set number of lines.
</Text>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Text
Prop	Type	Default	Description
`as`	`ElementType`	—	Defaults to `p`. Use `span` for inline text.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	—	—
`tone`	`'default' \| 'muted' \| 'danger' \| 'primary'`	—	`muted` for secondary copy, `danger` for errors.
`weight`	`'normal' \| 'medium' \| 'semibold' \| 'bold'`	—	—
`align`	`'start' \| 'center' \| 'end'`	—	—
`truncate`	`boolean`	—	—
`lineClamp`	`number`	—	Clamp to N lines with an ellipsis.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Text carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.