Body Text

Text Scale

text-lg

18px

The quick brown fox jumps over the lazy dog.

text-base

16px

The quick brown fox jumps over the lazy dog.

text-sm

14px

The quick brown fox jumps over the lazy dog.

text-xs

12px

The quick brown fox jumps over the lazy dog.

overline

uppercase tracking-[0.15em]

10px

The quick brown fox jumps over the lazy dog.

Text Weights

Weight normal

Weight medium

Weight semibold

import { Text } from "@shavin/ui";

<Text weight="normal">Normal weight text</Text>
<Text weight="medium">Medium weight text</Text>
<Text weight="semibold">Semibold weight text</Text>

Text Colors

color="default" — text-fg

color="muted" — text-fg-muted

color="subtle" — text-fg-subtle

color="danger" — text-danger

color="link" — text-link

import { Text } from "@shavin/ui";

<Text color="default">Standard foreground text-fg</Text>
<Text color="muted">Muted text-fg-muted</Text>
<Text color="subtle">Subtle text-fg-subtle</Text>
<Text color="danger">Danger red text-danger</Text>
<Text color="link">Theme accent link-colored text</Text>

Emphasis & Strength

Set the reminder to the day before it's due, not the day of.

import { Text, Em, Strong } from "@shavin/ui";

<Text>
  Set the reminder to <Em>the day before</Em> it's due, not <Strong>the day of</Strong>.
</Text>

Props

Prop	Type	Default
as	ElementType	—
truncate	boolean	"false"
size	"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"	"lg"
weight	"normal" \| "medium" \| "semibold" \| "bold"	"semibold"