The Text component's type scale, weights and variants.
Text from xiod-ui/text applies the library's type scale, so headings and body copy match the components around them without repeating utility classes. It sets size, weight and colour only. The font comes from your app's font-sans and font-mono, and XiodUI doesn't ship a font.
1import { Text } from "xiod-ui/text";23export function ArticleHeader() {4 return (5 <header className="space-y-2">6 <Text variant="heading1">Release notes</Text>7 <Text size="lg">What changed in this version, and how to upgrade.</Text>8 <Text variant="secondary" size="sm">9 Updated 2 hours ago · 4 min read10 </Text>11 </header>12 );13}Text renders a <p> by default. The heading variants render <h1>–<h4> and the mono variants a <span>. Pass render for any other element (see below).
Four heading variants, each semibold with slightly tight letter-spacing.
size sets the body text size. Sizes are one step larger on phones, where text is read at arm's length, and one step smaller from the sm breakpoint up.
Design systems should elevate craftsmanship across teams without imposing rigid constraints that stifle creative expression.
Every component reflects meticulous attention to keyboard navigation, high-contrast themes, and fluid layout scaling.
Components depend strictly on relative spacing tokens and CSS variables. When your theme switches between light, dark, or custom brand hues, the entire UI responds synchronously with zero layout shift.
Published in Documentation · Authored by the Core Team · Peer dependencies: React 19, Tailwind CSS 4.
© 2026 XiodUI. Source code available under the PolyForm Perimeter License. All benchmarks run on Bun 1.4+.
weight is normal, medium, semibold or bold, and combines with any size.
| Size | normal (400) | medium (500) | semibold (600) | bold (700) |
|---|---|---|---|---|
| xl | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz |
| lg | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz |
| default | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz |
| sm | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz |
| xs | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz |
secondary is muted text for metadata and helper copy. success, info, warning and error use the matching state colour, for inline feedback such as a field's validation message.
Build Completed Successfully
All 388 routes compiled cleanly with 0 type errors.
Hydration Optimization
Font definitions use next/font for zero layout shift during load.
Deprecated Subpath Warning
Import from subpaths directly (xiod-ui/button, not xiod-ui).
Validation Error Encountered
Required authentication token is missing or has expired.
mono and mono-secondary set text in font-mono, for commands, paths, IDs and values.
variant="mono"
git commit -m "feat(text): typography scale"Primary monospace for commands, paths, and values.
variant="mono-secondary"
sha256:7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fSubdued monospace for hashes, IDs, and metadata.
Throughput:
1,420,891 ops/secBundle Size:
3.42 kB (gzip)Version:
v1.2.0-canary.4Pass an element to render to keep the styles on a different tag, with that element's own props.
1import { Text } from "xiod-ui/text";23export function EmailLabel() {4 return (5 <Text size="sm" weight="medium" render={<label htmlFor="email" />}>6 Email address7 </Text>8 );9}A heading variant with render changes the tag without changing the look, so a visually large heading can still be an <h2> in the page outline:
1<Text variant="heading1" render={<h2 />}>2 Pricing3</Text>truncate keeps text on one line and ends it with an ellipsis when it runs out of room, including inside flex layouts.
Constrained container (max width 280px):
very-long-project-identifier-that-exceeds-bounds@organization.internal.io
1import { Text } from "xiod-ui/text";23export function ProjectName({ name }: { name: string }) {4 return (5 <div className="w-48">6 <Text size="sm" truncate>7 {name}8 </Text>9 </div>10 );11}