Text

Variants

Default, muted, eyebrow, ghost and glass on a vivid backdrop.

import { Text } from "@glinui/ui"
export function TextVariants() {
  return (

import { Text } from "@glinui/ui"


export function TextVariants() {
  return (
    <div data-glin-theme="dark" className="flex w-full flex-wrap items-center justify-center gap-4 rounded-xl bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 p-8">
      <Text>Default</Text>
      <Text variant="muted" className="text-[var(--color-foreground)]">Muted</Text>
      <Text variant="eyebrow" className="text-[var(--color-foreground)]">Eyebrow</Text>
      <Text variant="ghost">Ghost</Text>
      <Text variant="glass">Glass</Text>
    </div>
  )
}

In a layout

Short entries in a changelog, paired with Badge.

import { Badge, Heading, Text } from "@glinui/ui"
const entries = [
  { date: "Oct 7", tag: "New", tone: "accent", text: "Scheduled exports follow the workspace timezone." },

import { Badge, Heading, Text } from "@glinui/ui"


const entries = [
  { date: "Oct 7", tag: "New", tone: "accent", text: "Scheduled exports follow the workspace timezone." },
  { date: "Sep 29", tag: "Fixed", tone: "success", text: "Invoice PDFs no longer clip long company names." },
  { date: "Sep 18", tag: "Changed", tone: "warning", text: "API keys created before 2024 now expire after 12 months." }
] as const


export function Changelog() {
  return (
    <section aria-label="Changelog" className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-6 text-left">
      <Heading level={2} size="sm">Changelog</Heading>
      <ol className="flex flex-col gap-4">
        {entries.map((entry) => (
          <li key={entry.date} className="grid grid-cols-[4.5rem_1fr] items-start gap-3">
            <Text size="sm" variant="muted">{entry.date}</Text>
            <div className="flex flex-col items-start gap-1.5">
              <Badge tone={entry.tone} variant="soft">{entry.tag}</Badge>
              <Text>{entry.text}</Text>
            </div>
          </li>
        ))}
      </ol>
    </section>
  )
}

Variants

import { Text } from "@glinui/ui"

export function TextVariantDemo() {
  return (
    <div className="flex flex-col gap-3">
      <Text variant="default">Default, primary body copy for main content areas.</Text>
      <Text variant="muted">Muted, secondary copy, captions, and helper text.</Text>
      <Text variant="ghost">Ghost, low-emphasis annotations and placeholders.</Text>
      <Text variant="glass">Glass, highlighted text block with a frosted glass surface.</Text>
    </div>
  )
}

Sizes

import { Text } from "@glinui/ui"

export function TextSizeDemo() {
  return (
    <div className="flex flex-col gap-3">
      <Text size="sm">Small, footnotes, captions, and compact UI labels.</Text>
      <Text size="md">Medium, default body copy size for most contexts.</Text>
      <Text size="lg">Large, lead paragraphs and prominent descriptions.</Text>
    </div>
  )
}

Muted Caption

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

import { Text } from "@glinui/ui"

export function TextMutedDemo() {
  return (
    <div className="flex flex-col gap-1">
      <p className="font-semibold text-base">Account settings</p>
      <Text variant="muted" size="sm">
        Manage your profile, notifications, and connected services.
      </Text>
    </div>
  )
}

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.

import { Text } from "@glinui/ui"

export function TextGlassDemo() {
  return (
    <Text variant="glass" size="md">
      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.
    </Text>
  )
}

Eyebrow, marks and lead

Mono uppercase eyebrow with an accent dot, inline live and violet marks, and a lead paragraph.

import { Heading, Text } from "@glinui/ui"

export function Demo() {
  return (
    <div className="grid gap-3">
      <Text variant="eyebrow" dot>Platform</Text>
      <Heading level={2}>Ship <Text as="span" tone="live">faster</Text> and <Text as="span" tone="violet">safer</Text></Heading>
      <Text lead>Lead copy sits at 1.1875rem with a 56ch measure.</Text>
    </div>
  )
}