Primitive / Atomstable

Code

Inline code element for commands, snippets, and tokenized literals.

@glinui/uiComponent: code

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 code

Usage$

Code renders a semantic <code> element with a monospace font. Use it inline inside prose for commands, API values, variable names, and short code snippets. For multi-line blocks, pair it with a dedicated code block component.

Basic$

npm install @glinui/ui

TSX

1import { Code } from "@glinui/ui"
2
3export function CodeBasicDemo() {
4return <Code>npm install @glinui/ui</Code>
5}

Examples$

Variants$

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

defaultglassoutlineghost

TSX

1import { Code } from "@glinui/ui"
2
3export function CodeVariantDemo() {
4return (
5  <div className="flex flex-wrap gap-3">
6    <Code variant="default">default</Code>
7    <Code variant="glass">glass</Code>
8    <Code variant="outline">outline</Code>
9    <Code variant="ghost">ghost</Code>
10  </div>
11)
12}

Sizes$

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

sm codemd codelg code

TSX

1import { Code } from "@glinui/ui"
2
3export function CodeSizeDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-3">
6    <Code size="sm">sm code</Code>
7    <Code size="md">md code</Code>
8    <Code size="lg">lg code</Code>
9  </div>
10)
11}

Inline in Paragraph$

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

Run pnpm dev to start the development server, then open http://localhost:3000 in your browser. Set the NODE_ENV environment variable to production before deploying.

TSX

1import { Code } from "@glinui/ui"
2
3export function CodeInlineDemo() {
4return (
5  <p className="text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
6    Run <Code>pnpm dev</Code> to start the development server, then open{" "}
7    <Code>http://localhost:3000</Code> in your browser. Set the{" "}
8    <Code>NODE_ENV</Code> environment variable to <Code>production</Code>{" "}
9    before deploying.
10  </p>
11)
12}

Glass Variant in Context$

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

Import the hook with

import { useLiquidGlass } from "@glinui/ui"

and attach the returned ref to your element.

TSX

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

Accessibility$

Code renders a native <code> element, which assistive technologies announce as a code region.
Screen readers may vocalize code content differently — keep snippets short and purposeful.
Do not use Code for decorative styling; only wrap content that is genuinely code or a technical literal.
Ensure sufficient contrast between the code token and the surrounding prose in all variants.

Reduced Motion$

Code is a static inline element with no animation. No reduced-motion considerations apply.

API Reference$

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

Source$

TSX

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

packages/ui/src/components/code.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/code.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

CodeProps

`CodeProps`

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