Primitive / Atomstable

Text

Body text primitive for default, muted, and glass-highlighted copy.

@glinui/uiComponent: text

Installation$

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add text

Usage$

Text renders a <p> element styled with Glin UI body-text tokens. Use it for body copy, captions, and prose content throughout your app. Note that Text uses "muted" instead of "outline" in its variant set — unlike other atom primitives — and that the "glass" variant adds padding and a rounded glass surface.

Basic$

The quick brown fox jumps over the lazy dog.

TSX

1import { Text } from "@glinui/ui"
2
3export function TextBasicDemo() {
4return (
5  <Text>
6    The quick brown fox jumps over the lazy dog.
7  </Text>
8)
9}

Examples$

Variants$

Default — primary body copy for main content areas.

Muted — secondary copy, captions, and helper text.

Ghost — low-emphasis annotations and placeholders.

Glass — highlighted text block with a frosted glass surface.

TSX

1import { Text } from "@glinui/ui"
2
3export function TextVariantDemo() {
4return (
5  <div className="flex flex-col gap-3">
6    <Text variant="default">Default — primary body copy for main content areas.</Text>
7    <Text variant="muted">Muted — secondary copy, captions, and helper text.</Text>
8    <Text variant="ghost">Ghost — low-emphasis annotations and placeholders.</Text>
9    <Text variant="glass">Glass — highlighted text block with a frosted glass surface.</Text>
10  </div>
11)
12}

Sizes$

Small — footnotes, captions, and compact UI labels.

Medium — default body copy size for most contexts.

Large — lead paragraphs and prominent descriptions.

TSX

1import { Text } from "@glinui/ui"
2
3export function TextSizeDemo() {
4return (
5  <div className="flex flex-col gap-3">
6    <Text size="sm">Small — footnotes, captions, and compact UI labels.</Text>
7    <Text size="md">Medium — default body copy size for most contexts.</Text>
8    <Text size="lg">Large — lead paragraphs and prominent descriptions.</Text>
9  </div>
10)
11}

Muted Caption$

Use the muted variant for secondary descriptive copy beneath headings or form fields.

Account settings

Manage your profile, notifications, and connected services.

TSX

1import { Text } from "@glinui/ui"
2
3export function TextMutedDemo() {
4return (
5  <div className="flex flex-col gap-1">
6    <p className="font-semibold text-base">Account settings</p>
7    <Text variant="muted" size="sm">
8      Manage your profile, notifications, and connected services.
9    </Text>
10  </div>
11)
12}

Glass Highlight$

The glass variant wraps the text in a frosted-glass surface. Use it to call out important prose blocks, callouts, or feature descriptions.

Glin UI ships with a liquid glass rendering engine built on SVG displacement filters, giving every surface depth and light-reactive refraction out of the box.

TSX

1import { Text } from "@glinui/ui"
2
3export function TextGlassDemo() {
4return (
5  <Text variant="glass" size="md">
6    Glin UI ships with a liquid glass rendering engine built on SVG displacement filters,
7    giving every surface depth and light-reactive refraction out of the box.
8  </Text>
9)
10}

Accessibility$

Text renders a <p> element, which carries implicit paragraph semantics for screen readers.
Avoid nesting block-level elements inside <Text> — use inline elements such as <strong> or <em> for emphasis within copy.
Color-only meaning (e.g. muted = disabled) must be supplemented with aria-disabled or equivalent on the containing control.

Reduced Motion$

Text is a static element with no animation. It is unaffected by prefers-reduced-motion.

API Reference$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from textVariants.
`variant`	`"default" \| "muted" \| "glass" \| "ghost"`	No	`"default"`	Variant option from textVariants.

Source$

TSX

1import { Text } from "@glinui/ui"

packages/ui/src/components/text.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/text.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

TextProps

`TextProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from textVariants.
`variant`	`"default" \| "muted" \| "glass" \| "ghost"`	No	`"default"`	Variant option from textVariants.