Text
Text renders type on the Fluent 2 type ramp, with presets for every role from Display to Caption2.
size 100–1000 maps directly to the fontSizeBase/Hero tokens and their line heights; text at 20px or larger uses the Display font. Prefer the presets (Title3, Body1…) to stay consistent.
TypographyAa BbClear type, steady rhythmText and its presets map straight to the Fluent 2 type ramp, so size, line height and weight stay in sync.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Text, Display, LargeTitle, Title1, Title2, Title3, Subtitle1, Subtitle2, Body1, Body1Strong, Body2, Caption1, Caption1Strong, Caption2,} from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Large titleTitle 1Title 2Title 3Subtitle 1Subtitle 2Body 2Body 1 strongBody 1Caption 1 strongCaption 1Caption 2
Preset
Each preset is one step of the type ramp with its standard weight.
size 500 · regularsize 500 · mediumsize 500 · semiboldsize 500 · boldsize 200 · regular
Size & weight
size 100–1000; weight regular, medium, semibold, bold.
Italic textUnderlined textStrikethrough textUnderline and strikethroughnpm install @fluentui/react-icons$1,234,567.89
Formatting & font
italic, underline, strikethrough; font base, monospace, numeric.
This long line of text is cut off with an ellipsis when it runs out of roomLong text wraps naturally inside its container by default.
Heading rendered as h3
Aligned to the end (align="end")
Truncate, alignment & as
truncate needs wrap={false} and block; as changes the HTML element without changing the style.
Usage
Do
- Pick presets by role (Title3 for section headings, Body1 for UI text).
- Set
asto the right element (h1–h6, p) so screen readers understand the structure. - Use foreground-2/3 for secondary text instead of changing the font size.
Don't
- Don't use font sizes outside the type ramp (text-[15px]).
- Don't use Display / LargeTitle inside controls or tables.
- Don't make a whole paragraph bold. Keep bold for emphasis.
Props
| Prop · Type | Default | Description |
|---|---|---|
| size100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | Default: 300 | Type ramp step (10 → 68px). |
| weight"regular" | "medium" | "semibold" | "bold" | Default: "regular" | Font weight. |
| font"base" | "monospace" | "numeric" | Default: "base" | Font family; numeric uses tabular figures. |
| align"start" | "center" | "end" | "justify" | Default: "start" | Text alignment. |
| italic / underline / strikethroughboolean | Default: false | Text formatting. |
| truncate / wrap / blockboolean | Default: false / true / false | Truncation, wrapping, block display. |
| as"span" | "p" | "h1"…"h6" | "pre" | "code" | "strong" | "em" | "label"… | Default: "span" | HTML element to render. |