Body Text
Text Scale
lg
text-lg
18px
The quick brown fox jumps over the lazy dog.
md
text-base
16px
The quick brown fox jumps over the lazy dog.
sm
text-sm
14px
The quick brown fox jumps over the lazy dog.
xs
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
Component Source
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
Component Source
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.
Component Source
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 | Description |
|---|---|---|---|
| as | ElementType | p | Polymorphic element: p, span, div, label, etc. Default "p". |
| truncate | boolean | "false" | Whether to truncate overflowing text with an ellipsis. |
| size | "inherit" | "xs" | "sm" | "md" | "lg" | "overline" | "1" | "2" | "3" | "4" | "inherit" | — |
| weight | "inherit" | "normal" | "medium" | "semibold" | "bold" | "inherit" | — |
| tracking | "inherit" | "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | "inherit" | — |
| color | "inherit" | "default" | "fg" | "muted" | "subtle" | "danger" | "link" | "accent" | "inherit" | — |