Text
Typography component with named textStyle recipes plus typed size, weight, color, and alignment overrides.
Account created successfully
Your account has been set up and is ready to use.
<VStack gap={1}> <Text textStyle="lead1">Account created successfully</Text> <Text color="muted-foreground">Your account has been set up and is ready to use.</Text></VStack>Usage
import { Text } from "@reva/ui";Text renders a <p> by default at the body1 recipe. The textStyle prop applies a complete typographic recipe — family, size, weight, letter spacing, and line height — that mirrors the Figma text styles 1:1. The granular size, weight, and leading props override individual facets; color, align, and truncate are orthogonal. Use as to change the element, or asChild for full composition.
Examples
Text styles
Each textStyle maps to a Figma text recipe. Every recipe carries a default weight but can be re-weighted across regular / medium / semibold / bold.
lead1 · regular
lead1 · medium
lead1 · semibold
lead1 · bold
lead2 · regular
lead2 · medium
lead2 · semibold
lead2 · bold
body1 · regular (default)
body1 · medium
body1 · semibold
body1 · bold
body2 · regular
body2 · medium
body2 · semibold
body2 · bold
caption1 · regular
caption1 · medium (default)
caption1 · semibold
caption1 · bold
caption2 · regular
caption2 · medium (default)
caption2 · semibold
caption2 · bold
footnote · regular
footnote · medium (default)
footnote · semibold
footnote · bold
<VStack gap={4}> <VStack gap={1}> <Text textStyle="lead1">lead1 · regular</Text> <Text textStyle="lead1" weight="medium">lead1 · medium</Text> <Text textStyle="lead1" weight="semibold">lead1 · semibold</Text> <Text textStyle="lead1" weight="bold">lead1 · bold</Text> </VStack> <VStack gap={1}> <Text textStyle="lead2">lead2 · regular</Text> <Text textStyle="lead2" weight="medium">lead2 · medium</Text> <Text textStyle="lead2" weight="semibold">lead2 · semibold</Text> <Text textStyle="lead2" weight="bold">lead2 · bold</Text> </VStack> <VStack gap={1}> <Text textStyle="body1">body1 · regular (default)</Text> <Text textStyle="body1" weight="medium">body1 · medium</Text> <Text textStyle="body1" weight="semibold">body1 · semibold</Text> <Text textStyle="body1" weight="bold">body1 · bold</Text> </VStack> <VStack gap={1}> <Text textStyle="body2">body2 · regular</Text> <Text textStyle="body2" weight="medium">body2 · medium</Text> <Text textStyle="body2" weight="semibold">body2 · semibold</Text> <Text textStyle="body2" weight="bold">body2 · bold</Text> </VStack> <VStack gap={1}> <Text textStyle="caption1">caption1 · regular</Text> <Text textStyle="caption1" weight="medium">caption1 · medium (default)</Text> <Text textStyle="caption1" weight="semibold">caption1 · semibold</Text> <Text textStyle="caption1" weight="bold">caption1 · bold</Text> </VStack> <VStack gap={1}> <Text textStyle="caption2">caption2 · regular</Text> <Text textStyle="caption2" weight="medium">caption2 · medium (default)</Text> <Text textStyle="caption2" weight="semibold">caption2 · semibold</Text> <Text textStyle="caption2" weight="bold">caption2 · bold</Text> </VStack> <VStack gap={1}> <Text textStyle="footnote">footnote · regular</Text> <Text textStyle="footnote" weight="medium">footnote · medium (default)</Text> <Text textStyle="footnote" weight="semibold">footnote · semibold</Text> <Text textStyle="footnote" weight="bold">footnote · bold</Text> </VStack></VStack>Sizes
Use the size prop to override the recipe size. Maps directly to the foundation text scale.
3xs — 10px
2xs — 11px
xs — 12px
sm — 14px
md — 16px
lg — 18px
xl — 20px
2xl — 24px
<VStack gap={1}> <Text size="3xs">3xs — 10px</Text> <Text size="2xs">2xs — 11px</Text> <Text size="xs">xs — 12px</Text> <Text size="sm">sm — 14px</Text> <Text size="md">md — 16px</Text> <Text size="lg">lg — 18px</Text> <Text size="xl">xl — 20px</Text> <Text size="2xl">2xl — 24px</Text></VStack>Colors
Use the color prop to set the text color from semantic tokens.
foreground
muted-foreground
primary
destructive
<VStack gap={1}> <Text color="foreground">foreground</Text> <Text color="muted-foreground">muted-foreground</Text> <Text color="primary">primary</Text> <Text color="destructive">destructive</Text></VStack>Truncation
Use the truncate prop to clip overflowing text with an ellipsis.
This is a very long text that should be truncated when it exceeds the container width.
<Text truncate className="max-w-xs">This is a very long text that should be truncated when it exceeds the container width.</Text>As label
Use the as prop to render a different HTML element.
<Text as="label" textStyle="body2" weight="medium">Email address</Text>Props
| Prop | Type | Default | Description |
|---|---|---|---|
textStyle | "lead1" | "lead2" | "body1" | "body2" | "caption1" | "caption2" | "footnote" | "body1" | Named recipe (family + size + weight + tracking + leading), mirroring the Figma text styles. |
as | "p" | "span" | "label" | "div" | "em" | "strong" | ... | "p" | Rendered HTML element. |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | ... | recipe | Overrides the recipe font size. |
weight | "light" | "normal" | "medium" | "semibold" | "bold" | recipe | Overrides the recipe font weight. |
color | "foreground" | "muted-foreground" | "destructive" | "primary" | ... | — | Text color mapped to semantic tokens. |
truncate | boolean | false | Truncate text with ellipsis. |
align | "left" | "center" | "right" | "justify" | — | Text alignment. |
leading | "none" | "tight" | "snug" | "normal" | "relaxed" | "loose" | recipe | Overrides the recipe line height. |
asChild | boolean | false | Merge props onto the child element. |
className | string | — | Additional Tailwind / utility classes. |