Text
A typography primitive for body copy, inline text, supporting descriptions, and semantic emphasis.
API Reference
Text is a moduix typography primitive. Base UI does not provide a matching text primitive,
so the public API stays focused on semantic element choice, visual variants, and root
className composition.
Basic
Use text to describe interface state and supporting details.
import { Text } from "moduix";export function TextDemo() { return ( <Text> Use text to describe interface state and supporting details. </Text> );}Full list of component variables available for project-level overrides.
| Property | Default | Description |
|---|---|---|
| --text-default-color | var(--color-foreground) | Controls default tone color. |
| --text-destructive-color | var(--color-destructive) | Controls destructive tone color. |
| --text-font-family | var(--font-sans) | Controls text font family. |
| --text-font-size-xs | var(--text-xs) | Controls `xs` text font size. |
| --text-font-size-sm | var(--text-sm) | Controls `sm` text font size. |
| --text-font-size-md | var(--text-md) | Controls `md` text font size. |
| --text-font-size-lg | var(--text-lg) | Controls `lg` text font size. |
| --text-font-size-xl | var(--text-xl) | Controls `xl` text font size. |
| --text-font-weight-bold | var(--weight-bold) | Controls bold text weight. |
| --text-font-weight-medium | var(--weight-medium) | Controls medium text weight. |
| --text-font-weight-regular | var(--weight-regular) | Controls regular text weight. |
| --text-font-weight-semibold | var(--weight-semibold) | Controls semibold text weight. |
| --text-letter-spacing | 0 | Controls text letter spacing. |
| --text-line-height-xs | var(--line-height-text-xs) | Controls `xs` text line height. |
| --text-line-height-sm | var(--line-height-text-sm) | Controls `sm` text line height. |
| --text-line-height-md | var(--line-height-text-md) | Controls `md` text line height. |
| --text-line-height-lg | var(--line-height-text-lg) | Controls `lg` text line height. |
| --text-line-height-xl | var(--line-height-text-xl) | Controls `xl` text line height. |
| --text-muted-color | var(--color-muted-foreground) | Controls muted tone color. |
| --text-primary-color | var(--color-primary) | Controls primary tone color. |
| --text-subtle-color | var(--color-secondary-foreground) | Controls subtle tone color. |
Interactive variables scoped for docs preview without changing size scale tokens.
| Property | Value | Default | Description |
|---|---|---|---|
| --text-default-color | var(--color-foreground) | Controls default tone color. | |
| --text-destructive-color | var(--color-destructive) | Controls destructive tone color. | |
| --text-font-family | var(--font-sans) | Controls text font family. | |
| --text-letter-spacing | 0 | Controls text letter spacing. | |
| --text-muted-color | var(--color-muted-foreground) | Controls muted tone color. | |
| --text-primary-color | var(--color-primary) | Controls primary tone color. | |
| --text-subtle-color | var(--color-secondary-foreground) | Controls subtle tone color. |
Anatomy
Text is composed as a single typography root that renders the chosen semantic element.
Visual style is controlled through size, weight, tone, alignment, and CSS variables.
Text
└─ text or inline content<Text as="small" size="sm" tone="muted">
Last updated just now
</Text>| Part | Role |
|---|---|
Text | Semantic text root with design-system typography, tone, and sizing. |
Text does not use portal-like service layers such as portal, backdrop, or viewport.
In most cases, keep the default root styling and use props for semantic element, size,
weight, tone, and alignment. Use className when a specific block needs local CSS variables
or project styles.
Composition
Use as for the semantic element and size for the visual scale when semantics and
appearance should differ. Built-in defaults keep strong semibold and small at sm, while
other elements and custom components default to regular md text.
Style the root with className and component CSS variables. Text has no hidden service
slots, so it does not use classNames or slot props.
Examples
Elements
Use as to choose the semantic element without leaving the typography scale.
Paragraph text rendered as p.
Inline text rendered as span.Small supporting text rendered as small.Important text rendered as strong.Emphasized text rendered as em.import { Text } from "moduix";export function TextElementsDemo() { return ( <div className={styles.stack}> <Text as="p">Paragraph text rendered as p.</Text> <Text as="span">Inline text rendered as span.</Text> <Text as="small">Small supporting text rendered as small.</Text> <Text as="strong">Important text rendered as strong.</Text> <Text as="em">Emphasized text rendered as em.</Text> <Text as="div">Block text rendered as div.</Text> </div> );}.stack { display: flex; width: min(34rem, calc(100vw - var(--spacing-8))); flex-direction: column; gap: var(--spacing-3);}Custom Element
Pass any React element or component to as when routing, analytics, or app-level primitives own
the rendered element.
import { Text } from "moduix";import type { ComponentPropsWithoutRef } from "react";type InlineLinkProps = ComponentPropsWithoutRef<"a">;function InlineLink(props: InlineLinkProps) { return <a {...props} />;}export function TextCustomElementDemo() { return ( <Text as={InlineLink} href="/docs" tone="primary" weight="medium"> Read the documentation </Text> );}Sizes
Use size for visual sizing. Override size-specific CSS variables in your project for responsive typography.
Extra-large text
Large text
Medium text
Small text
Extra-small text
import { Text } from "moduix";export function TextSizesDemo() { return ( <div className={styles.stack}> <Text size="xl">Extra-large text</Text> <Text size="lg">Large text</Text> <Text size="md">Medium text</Text> <Text size="sm">Small text</Text> <Text size="xs">Extra-small text</Text> </div> );}.stack { display: flex; width: min(34rem, calc(100vw - var(--spacing-8))); flex-direction: column; gap: var(--spacing-3);}Tones
Use tone to match the role of the copy without introducing local color classes.
Default tone
Muted tone
Subtle tone
Primary tone
Destructive tone
import { Text } from "moduix";export function TextTonesDemo() { return ( <div className={styles.stack}> <Text tone="default">Default tone</Text> <Text tone="muted">Muted tone</Text> <Text tone="subtle">Subtle tone</Text> <Text tone="primary">Primary tone</Text> <Text tone="destructive">Destructive tone</Text> </div> );}.stack { display: flex; width: min(34rem, calc(100vw - var(--spacing-8))); flex-direction: column; gap: var(--spacing-3);}Weights
Use weight for emphasis. strong defaults to semibold while other elements default to regular.
Regular weight
Medium weight
Semibold weight
Bold weight
import { Text } from "moduix";export function TextWeightsDemo() { return ( <div className={styles.stack}> <Text weight="regular">Regular weight</Text> <Text weight="medium">Medium weight</Text> <Text weight="semibold">Semibold weight</Text> <Text weight="bold">Bold weight</Text> </div> );}.stack { display: flex; width: min(34rem, calc(100vw - var(--spacing-8))); flex-direction: column; gap: var(--spacing-3);}Alignment
Use align when text alignment belongs to the typography primitive instead of the surrounding layout.
Left aligned text.
Center aligned text.
Right aligned text.
import { Text } from "moduix";export function TextAlignDemo() { return ( <div className={styles.aligned}> <Text align="left">Left aligned text.</Text> <Text align="center">Center aligned text.</Text> <Text align="right">Right aligned text.</Text> </div> );}.aligned { display: flex; width: min(34rem, calc(100vw - var(--spacing-8))); flex-direction: column; gap: var(--spacing-4);}Class Names
Pass className when styling the root with CSS Modules, Tailwind CSS, or CSS-in-JS.
Customized body copy with local CSS variables.
import { Text } from "moduix";export function TextClassNameDemo() { return ( <Text as="p" className={styles.customText}> Customized body copy with local CSS variables. </Text> );}.customText { --text-default-color: var(--color-primary); --text-font-size-md: var(--text-lg); --text-line-height-md: var(--line-height-text-lg); --text-font-weight-regular: var(--weight-medium);}