Code Snippet

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add code-snippet

Usage#

import { CodeSnippet } from "@/components/ui/code-snippet"

export function Example() {
  return <CodeSnippet lang="tsx" code={`const x = 1`} />
}

Languages#

Set lang to switch grammars. TS/TSX, shell (bash/sh), and CSS are highlighted; the language chip in the header reflects the choice.

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add a component (its dependencies come along)
npx koalaui-cli@latest add button

:root {
  --radius: 1rem;
  --primary: oklch(0.62 0.19 256);
  --syntax-keyword: oklch(0.5 0.2 295);
}

.dark {
  --primary: oklch(0.7 0.16 256);
}

Window chrome#

A filename adds the header with a language chip; dots adds macOS-style window dots. With either, the snippet wears the inset look: the header sits on a tinted frame and the code is a sheet set 8px into it, its corners concentric with the frame's. Omit both for a chromeless block.

export function Button() {
  return <button className="btn">Click me</button>
}

export function Button() {
  return <button className="btn">Click me</button>
}

When the snippet is already a sheet inside another frame (a preview's Code tab), a second frame would double the chrome. Pass inset={false} and the header becomes a strip across the one surface instead.

export function Button() {
  return <button className="btn">Click me</button>
}

Terminal sessions#

In a shell snippet, start a line with $ and it reads as a session: the prompt dims, each line without one is the command's output, in muted ink with a leading ✓ kept green. The copy button copies only the commands, without their prompt, so what lands on the clipboard runs as pasted.

$ npx koalaui-cli@latest add button
✓ wrote components/ui/button/button.tsx
✓ wrote components/ui/button/index.ts
✓ added button

Line numbers#

Set showLineNumbers to render a tabular-nums gutter, useful for longer listings or when referencing a specific line.

export function tokenize(code: string) {
  const tokens = []
  for (const line of code.split("\n")) {
    tokens.push(line.trim())
  }
  return tokens
}

Diff#

Show a change in context. startLine numbers the gutter from the excerpt's real position in the file, and diff marks lines as added or removed by that same number. A marked line takes a soft success or destructive band across the code plus a bar in the gutter, so the mark never rests on color alone, and a screen reader hears “Added” or “Removed” before it. The copy button still copies the plain code string.

export function buildResetLink(userId: string) {
  const token = signResetToken({ uid: userId })

Removed:   const baseUrl = "https://staging.example.com"
Added:   const baseUrl = "https://example.com"

  const url = new URL("/reset-password", baseUrl)
  url.searchParams.set("token", token)
  return url.toString()
}

Collapsible#

Long listings get noisy. Set collapsible to clamp the block to collapsedHeight (320px by default): the last lines dissolve into a bottom fade and a Show more toggle expands it to full height, animated. The toggle only appears once the content actually overflows the clamp, measured from the DOM, so short blocks are left untouched.

import * as React from "react"

import { tv } from "@/lib/tv"
import { Button } from "@/components/ui/button"

type Member = {
  id: string
  name: string
  email: string
  status: "Active" | "Invited" | "Suspended"
  balance: number
}

const columns: ColumnDef<Member>[] = [
  {
    accessorKey: "name",
    header: "Member",
    cell: ({ row }) => (
      <TableCellText primary={row.original.name} secondary={row.original.email} />
    ),
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ getValue }) => <Badge size="sm">{getValue<string>()}</Badge>,
  },
  {
    accessorKey: "balance",
    header: "Balance",
    meta: { numeric: true },
    cell: ({ getValue }) => `$${getValue<number>()}`,
  },
]

export function MembersTable({ data }: { data: Member[] }) {
  return <DataTable columns={columns} data={data} />
}

Density#

Like other Koala surfaces, Code Snippet honors density. compact (the default) suits dense app UI; comfortable opens up the padding for docs and marketing. Density retunes spacing only, never radius or color.

const theme = "moonlight"

const theme = "moonlight"

API reference#

FAQ#