# Code

Display inline code or a copyable block of text.

Inline code in a sentence

[Complete TSX file](/examples/code/default.tsx)

```tsx
"use client";

import { Code } from "@/siteplane/components/code";

export default function Example() {
  return (
    <p>
      Run <Code>pnpm build</Code> to build the app.
    </p>
  );
}
```

## Installation

Complete [one-time setup](/docs/installation/) first.

```bash
pnpm dlx shadcn@4.18.0 add @siteplane/code
```

With npm: `npx shadcn@4.18.0 add @siteplane/code`. [Registry JSON](/registry/code.json) lists source files and dependencies.

## Usage

```tsx
import { Code, CodeBlock } from "@/siteplane/components/code";

<Code>pnpm build</Code>;
<CodeBlock copyable value="pnpm build" />;
```

## Copyable block

The copy button writes the complete `value` to the clipboard. It is the kit's [Copy Button](/docs/components/copy-button/) as a field action. It shows its check only after the clipboard operation succeeds and a cross for a moment when the clipboard is missing or refuses; its tooltip says Copy, then Copied.

Copyable API request

[Complete TSX file](/examples/code/block.tsx)

```tsx
"use client";

import { CodeBlock } from "@/siteplane/components/code";

const request = `curl https://api.example.com/v1/projects \\
  -H "Authorization: Bearer $API_TOKEN"`;

export default function Example() {
  return <CodeBlock className="w-full max-w-md" copyable value={request} />;
}
```

## Masked value

Set `mask` for values such as API keys. Masking only changes what is shown: the full value stays in client memory, and Copy still copies it. Screen readers hear “Hidden value”, or your `labels.hidden`, in place of the dots. Whenever `mask` turns on, the value starts hidden, also after an earlier reveal.

Masked API key

[Complete TSX file](/examples/code/mask.tsx)

```tsx
"use client";

import { CodeBlock } from "@/siteplane/components/code";

export default function Example() {
  return (
    <CodeBlock
      className="w-full max-w-md"
      copyable
      mask
      size="sm"
      value="prj_2f9c4e7a1b8d6a3f5c2e9b17"
    />
  );
}
```

## API reference

### Code

Native `code` attributes, refs, `children` and string `className` are supported. It supplies inline styling with no syntax highlighting. A long command or an unbroken value wraps between any two characters with the text around it, so inline code never makes its line wider than its container.

### CodeBlock

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | string | required | Complete displayed and copied text. Replaces children. |
| copyable | boolean | false | Shows the copy action. |
| mask | boolean | false | Conceals the value behind up to 44 dots until the reveal button shows it. Turning mask on hides the value again. |
| size | md \| sm | md | Padding and font size. |
| labels | Partial<CodeBlockLabels> | English | The words the block speaks to assistive technology; see the keys below. |
| className | string | unset | Additional pre-element classes. |
`CodeBlockProps` extends native `pre` props except children, with the size
variant. Text wraps and breaks long words. There is no language, line-number or
syntax-highlighting prop, and no copy-error callback. A failed copy shows a
cross for a moment and names the button “Copy unavailable”, which a polite live
region announces.

The keys of `labels`, each with its English default, are `hidden` (Hidden
value, read in place of a masked value), `reveal` (Reveal value), `hide` (Hide
value), `copy` (Copy to clipboard), `copied` (Copied to clipboard, while the
check shows) and `copyFailed` (Copy unavailable). The type is exported as
`CodeBlockLabels`.

[Read the installed source](/source/code).

## Usage notes

Clipboard access depends on browser permissions and a secure context. Never treat masking as protection for a secret that must not reach the browser. A reveal stays when `value` changes; remount the block if a new masked value must start concealed.