Code

Variants and tones

Surface variants plus tones for status values.

import { Code } from "@glinui/ui"
export function CodeVariants() {
  return (

import { Code } from "@glinui/ui"


export function CodeVariants() {
  return (
    <div className="flex w-full flex-wrap items-center justify-center gap-3 rounded-xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-6">
      {(["glinr", "plain", "soft", "outline", "ghost", "solid"] as const).map((variant) => (
        <Code key={variant} variant={variant}>{variant}</Code>
      ))}
      {(["accent", "success", "warning", "danger"] as const).map((tone) => (
        <Code key={tone} variant="soft" tone={tone}>{tone}</Code>
      ))}
    </div>
  )
}

Variants

The `variant` prop adjusts the surface behind the code token, filled, glass-blurred, border-only, or fully transparent.

import { Code } from "@glinui/ui"

export function CodeVariantDemo() {
  return (
    <div className="flex flex-wrap gap-3">
      <Code variant="default">default</Code>
      <Code variant="glass">glass</Code>
      <Code variant="outline">outline</Code>
      <Code variant="ghost">ghost</Code>
    </div>
  )
}

Sizes

Scale the monospace font with `size`. All three sizes remain optically balanced against body text at the corresponding text scale.

import { Code } from "@glinui/ui"

export function CodeSizeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Code size="sm">sm code</Code>
      <Code size="md">md code</Code>
      <Code size="lg">lg code</Code>
    </div>
  )
}

Inline in Paragraph

`Code` is designed to sit inside flowing text without disrupting line height. Drop it directly into a `<p>` element alongside prose.

import { Code } from "@glinui/ui"

export function CodeInlineDemo() {
  return (
    <p className="text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
      Run <Code>pnpm dev</Code> to start the development server, then open{" "}
      <Code>http://localhost:3000</Code> in your browser. Set the{" "}
      <Code>NODE_ENV</Code> environment variable to <Code>production</Code>{" "}
      before deploying.
    </p>
  )
}

Glass Variant in Context

The `glass` variant pairs well with translucent surfaces like cards or overlays.

import { Code } from "@glinui/ui"

export function CodeGlassDemo() {
  return (
    <p className="text-sm text-neutral-700 dark:text-neutral-300">
      Import the hook with{" "}
      <Code variant="glass">import {"{ useLiquidGlass }"} from "@glinui/ui"</Code>
      {" "}and attach the returned <Code variant="glass">ref</Code> to your element.
    </p>
  )
}