Applies the type scale to any text element, without hand-rolling font rules.
import { Text } from "@/fragments/ui";Source<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<Text scale="2xs">Extra extra small (2xs — 10px)</Text>
<Text scale="xs">Extra small (xs — 12px)</Text>
<Text scale="sm">Small (sm — 14px)</Text>
<Text scale="base">Base size (14px)</Text>
<Text scale="md">Medium prose body (md — 15px)</Text>npx @usefragments/cli add textWrites src/fragments/ui/components/Text plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Four weights — reach past semibold only for real emphasis.
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<Text weight="normal">Normal weight</Text>
<Text weight="medium">Medium weight</Text>
<Text weight="semibold">Semibold weight</Text>
<Text weight="bold">Bold weight</Text>
</div>Dimmer tones push text back; success and danger carry state.
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<Text color="primary">Primary color (default)</Text>
<Text color="secondary">Secondary color</Text>
<Text color="tertiary">Tertiary color</Text>
<Text color="muted">Muted color (alias for tertiary)</Text>
</div>The as prop picks the tag, so the outline stays correct.
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
<Text as="h1" scale="3xl" weight="semibold">Heading 1</Text>
<Text as="h2" scale="xl" weight="semibold">Heading 2</Text>
<Text as="h3" scale="lg" weight="semibold">Heading 3</Text>
<Text as="p" scale="md" color="secondary">
This is a paragraph of text that demonstrates the Text componentFixed width for IDs, keys, and anything meant to be compared.
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<Text font="mono" scale="sm">const greeting = "Hello, World!";</Text>
<Text font="mono" scale="sm" color="secondary">npm install @usefragments/ui</Text>
</div>One line with an ellipsis, or clamp to a set number of lines.
<div style={{ width: '200px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
<Text truncate>
This is a very long text that will be truncated with an ellipsis when it overflows.
</Text>
<Text truncate lineClamp={2}>
This text will be clamped to two lines. Any content beyond two linesProp | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Text content |
as | enumh1h2h3h4h5h6pspanlabeldivstrongemsmallmarkdelinssubsuptimeaddressblockquotecitecodeabbr | span | HTML element to render |
role | enumcaptionui-compactui-standardbody-compactbody-relaxedtitle-smtitle-mdtitle-lgdisplaycodesection-labeleyebrow | Not set | Typography role: one named setting of size, weight, line height and tracking. section-label is the small list heading; eyebrow is the small semibold label above a statement. A role owns the whole setting, so scale, weight, font and letterSpacing are unavailable beside it. |
scale | enum2xsxssmbasemdlgxl2xl3xl4xl | Not set | Type-scale step for text with no role. 2xs (10), xs (12), sm/base (14), md (15 prose body), lg (20), xl (24), 2xl (30), 3xl (36 page title), 4xl (48 hero). |
weight | enumnormalmediumsemiboldbold | "normal" | Font weight |
color | enumprimarysecondarytertiarymutedaccentsuccesswarningdanger | "primary" | Text color (muted is an alias for tertiary; success/warning/danger are for a run of text that carries a state on its own — prefer Badge or Alert when the state deserves a container) |
font | enumsansmono | sans | Font family |
truncate | boolean | Not set | Truncate with ellipsis on overflow |
lineClamp | number | Not set | Number of lines before truncating (requires truncate) |
style | object | Not set | — |
letterSpacing | enumnormaltighttightertightest | Not set | Letter-spacing preset. `"tight"` suits dense UI chrome labels (-0.01em); `"tighter"` suits headings and stat values (-0.02em); `"tightest"` suits display numerics (-0.025em). Omit for the font's default tracking. |
tabularNums | boolean | Not set | Use tabular (fixed-width) numerals so digits align in columns. Ideal for stat values, tables, timestamps, and any updating number. |