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

Inline Code

pnpm --filter @glinui/docs dev

TSX

1import { Code } from "@glinui/ui"
2
3export function Demo() {
4  return <Code>pnpm --filter @glinui/docs dev</Code>
5}

Variants

defaultglassoutlineghost

TSX

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

Accessibility

Uses semantic `<code>` element for inline code fragments.

Reduced Motion

No motion-dependent behavior.

API Reference

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`default`	Surface treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Font-size scale.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Code } from "@glinui/ui"

Source Files

code.tsx

Dependencies

@glinui/ui

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.