Primitive / Moleculebeta

Code Panel

Raised header bar over an inset code well with tok-k, tok-s, tok-c and tok-f token classes.

Edit on GitHub

pnpm dlx @glinui/cli@latest add code-panel

Getting started

Add Glin UI to a Next.js app

Two packages, one import and your first component. It takes about two minutes.

Install the packages

Terminal

$ npm install @glinui/ui @glinui/tokens

Wrap your app and use a component

app/

import { GlinProvider } from "@glinui/ui"
import "@glinui/tokens/styles.css"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <GlinProvider>{children}</GlinProvider>
      </body>
    </html>
  )
}

Installation

Install from

pnpm dlx @glinui/cli@latest add code-panel

Prefer the package?

Usage

Variants

Glinr raised panel, plain flat block and outline, each with a filename title and copy button.

glinr.ts

const retries = 3
// 4xx errors never retry

plain.ts

const retries = 3
// 4xx errors never retry

outline.ts

const retries = 3
// 4xx errors never retry

import { CodePanel, tokens } from "@glinui/ui"


const variants = ["glinr", "plain", "outline"] as const


export function PanelVariants() {
  return (
    <div className="grid w-full gap-4 md:grid-cols-3">
      {variants.map((variant) => (
        <CodePanel key={variant} variant={variant} title={`${variant}.ts`} copyValue="const retries = 3" codeLabel={`${variant} sample`}>
          {tokens(["k", "const"], " retries = ", ["f", "3"], "\n", ["c", "// 4xx errors never retry"])}
        </CodePanel>
      ))}
    </div>
  )
}

Accessibility

The code well is focusable so keyboard users can scroll it horizontally.
Token colors rely on the tok-k, tok-s, tok-c and tok-f classes, never on color alone for meaning.

ARIA Attributes

aria-label on the pre element

Reduced Motion

No motion.

API Reference

Prop	Type	Required	Default	Description
`variant`	`SurfaceVariant \| "default" \| "raised" \| "frosted"`	No	`ambient (glinr)`	glinr is the canonical raised panel, plain a flat bordered code block, glass opt-in.
`title`	`React.ReactNode`	No	`-`	Header title, usually a file name.
`tabs`	`React.ReactNode`	No	`-`	Header slot after the title.
`actions`	`React.ReactNode`	No	`-`	Header slot on the right.
`copyValue`	`string`	No	`-`	Adds a CopyButton copying this text.
`onCopy`	`(value: string) => void`	No	`-`	Called after the built-in CopyButton succeeds.
`hideHeader`	`boolean`	No	`false`	Remove the header bar.
`codeLabel`	`string`	No	`Code`	Accessible name of the scrollable region.
`preClassName`	`string`	No	`-`	Classes for the `pre` element.
`tone`	`SurfaceTone`	No	`-`	Auto-generated from TypeScript source.

Source

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

Import

import { CodePanel } from "@glinui/ui"

Source Files

code-panel.tsx

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/code-panel.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

CodePanelProps

`CodePanelProps`

Prop	Type	Required	Default	Description
`actions`	`React.ReactNode`	No	`-`	Header slot on the right. When `copyValue` is set a CopyButton is appended.
`codeLabel`	`string`	No	`"Code"`	Accessible label for the scrollable code region.
`copyValue`	`string`	No	`-`	Adds a CopyButton to the header copying this text.
`hideHeader`	`boolean`	No	`false`	Hide the header bar entirely.
`onCopy`	`(value: string) => void`	No	`-`	Called when the built-in CopyButton succeeds.
`preClassName`	`string`	No	`-`	Classes for the `pre` element.
`tabs`	`React.ReactNode`	No	`-`	Header slot after the title, for example a tab group.
`title`	`React.ReactNode`	No	`-`	Header title (usually a file name).
`tone`	`SurfaceTone`	No	`-`	-
`variant`	`SurfaceVariant \| "default" \| "raised" \| "frosted"`	No	`-`	Visual variant. Omit for the ambient design style: glinr is the canonical raised panel (header strip + inset well), plain is a flat bordered code block, glass is opt-in and needs a backdrop.