Text — Davaux UI

Size

Text size="xs"

Text size="sm"

Text size="md"

Text size="lg"

Text size="xl"

<Text size="xs">Extra small</Text>
<Text size="sm">Small</Text>
<Text size="md">Medium (default)</Text>
<Text size="lg">Large</Text>
<Text size="xl">Extra large</Text>

Color

violet

blue

green

red

dimmed

<Text c="violet">violet</Text>
<Text c="blue">blue</Text>
<Text c="green">green</Text>
<Text c="red">red</Text>
<Text c="dimmed">dimmed</Text>

Font weight

Light — fw=300

Normal — fw=400

Medium — fw=500

Bold — fw=700

Black — fw=900

<Text fw={300}>Light</Text>
<Text fw={400}>Normal</Text>
<Text fw={500}>Medium</Text>
<Text fw={700}>Bold</Text>
<Text fw={900}>Black</Text>

Alignment & transform

Left aligned

Center aligned

Right aligned

uppercase transform

capitalize transform

<Text ta="left">Left aligned</Text>
<Text ta="center">Center aligned</Text>
<Text ta="right">Right aligned</Text>
<Text tt="uppercase">uppercase transform</Text>
<Text tt="capitalize">capitalize transform</Text>

Truncate

This text is very long and will be truncated with an ellipsis at the end when it overflows

This text is very long and will be truncated with an ellipsis at the start when it overflows

<Text truncate style={{ maxWidth: 300 }}>
  This text is very long and will be truncated with an ellipsis at the end...
</Text>
<Text truncate="start" style={{ maxWidth: 300 }}>
  ...truncated at the start
</Text>

Line clamp

This paragraph is intentionally long to demonstrate line clamping. It contains multiple sentences of text that will be cut off after exactly two lines with a trailing ellipsis, no matter how much content follows.

<Text lineClamp={2}>
  This paragraph is intentionally long to demonstrate line clamping...
</Text>

Gradient

Gradient text

<Text
  variant="gradient"
  gradient={{ from: 'violet', to: 'blue', deg: 90 }}
  size="xl"
  fw={700}
>
  Gradient text
</Text>

Polymorphic component

Pass any Davaux component to component to render Text's typography styles through it. Extra props are forwarded, so component-specific props like order work as expected.

Text rendered as a Title (h2)

Violet h3 with normal weight via Text

import { Text, Title } from '@davaux/ui'

<Text component={Title} order={2}>
  Text rendered as a Title (h2)
</Text>
<Text component={Title} order={3} c="violet" fw={400}>
  Violet h3 with normal weight via Text
</Text>

Inline span

Normal text with an inline span in the middle.

<Text>
  Normal text with{' '}
  <Text span c="violet" fw={700}>an inline span</Text>
  {' '}in the middle.
</Text>

Props

Prop	Type	Default	Description
`size`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'\|number\|string`	—	Font size (number → rem)
`c`	`string`	—	Text color — theme key or CSS value
`fw`	`number\|string`	—	Font weight
`fs`	`string`	—	Font style (e.g. `'italic'`)
`ta`	`'left'\|'center'\|'right'\|'justify'`	—	Text alignment
`tt`	`'uppercase'\|'lowercase'\|'capitalize'\|'none'`	—	Text transform
`td`	`string`	—	Text decoration
`lh`	`string\|number`	—	Line height
`inline`	`boolean`	—	Renders as `display: inline`
`inherit`	`boolean`	—	Inherits font properties from parent
`truncate`	`boolean\|'start'\|'end'`	—	Truncates overflow with ellipsis
`lineClamp`	`number`	—	Max lines before clamping
`span`	`boolean`	—	Renders a `<span>` instead of `<p>`
`variant`	`'text'\|'gradient'`	`'text'`	Visual style variant
`gradient`	`{ from, to, deg? }`	—	Gradient when `variant="gradient"`
`component`	`string \| UiComponent`	—	Overrides the rendered element — e.g. pass `Title` to render text as a heading