Text

Polymorphic body text (as/asChild) with token-driven size, weight, and tone.

Group: Primitives · Import path: @orionshub/lucent/text · Server-safe — renders on the server without a client bundle.

Import

import { Text } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css' // once, at your app root

Examples

Sizes & tones

Sizes & tones

Show source

export function TextBasic() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <Text size="body">Body — the quick brown fox jumps over the lazy dog.</Text>
      <Text size="label">Label — a smaller, heavier caption.</Text>
      <Text muted>Muted — secondary, lower-emphasis text.</Text>
    </div>
  )
}

Props

Prop	Type	Default	Description
as	React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined	—	The element to render. Defaults to `p`.
children	React.ReactNode	—
muted	boolean | undefined	—	Muted (secondary) colour.
size	"label" | "body" | undefined	—	Type-role size. Defaults to `body`.

Guidance

One-time CSS import

Import the compiled stylesheet once at your app root: import '@orionshub/lucent/styles.css'. Components ship stable class names and read design tokens from CSS custom properties — there is no style runtime. See CSS Import.

Transparency & solid mode

Every glass surface reads --lucent-glass-opacity (0.60–1.0). Dial it at runtime with setGlassOpacity(), or switch to setContrast('solid') for a fully opaque, high-contrast rendering. See Transparency & Solid Mode.

RTL

Authored with CSS logical properties — set dir="rtl" on a parent (or the document) and layout mirrors with no JS. Toggle RTL from the glass-controls panel to preview. See RTL Support.

SSR / Next.js

Server-safe — renders on the server without a client bundle. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.