Text
The Text component ensures consistent typography, tone, and alignment across the design system. It supports semantic HTML tags, multiple sizes, color tones, and inline emphasis elements.
Base Text
Default paragraph styling for readable body copy.
This is a standard paragraph using the Text component. It applies the text-primary-text color by default and consistent spacing for readability across themes.
Muted text tone can be used for less prominent information, such as metadata or descriptions.
Text Tone
Use the tone prop to apply semantic color emphasis.
Primary tone — used for interactive or key text.
Secondary tone — used for supporting text.
Accent tone — highlights brand-related content.
Success tone — indicates successful operations.
Warning tone — draws attention to potential issues.
Error tone — indicates a problem or alert.
Text Sizes
Control typographic hierarchy using the size prop.
Extra small text (xs)
Small text (sm)
Base text (base)
Large text (lg)
Extra large text (xl)
Font Weight
Use weight to adjust text emphasis.
Regular text weight
Medium text weight
Semibold text weight
Bold text weight
Text Alignment
Align text using the align prop.
Left aligned text (default)
Centered text
Right aligned text
TextLink
Inline hyperlink with underline and color transitions.
You can include inline links easily, like this example link that inherits the primary color and smooth underline transition.
Strong
Use <Strong> for semantic emphasis with consistent styling.
The Strong component provides bold emphasis and consistent color across themes.
Code
Inline code styling for short snippets and tokens.
Display inline code like pnpm install @repo/ui or yarn add @repo/ui using the Code component.
Underline
Use underline for emphasized text with subtle decoration.
This text is underlined with a subtle color accent and hover transition.