Code

Run pnpm build to build the app.

"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

pnpm dlx shadcn@4.18.0 add @siteplane/code

Complete the one-time setup first. Registry JSON lists source files and dependencies.

Usage

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

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

The copy button writes the complete value to the clipboard. It is the kit's 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.

curl https://api.example.com/v1/projects \
  -H "Authorization: Bearer $API_TOKEN"

"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.

••••••••••••••••••••••••••••Hidden value

"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

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

Component properties
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.

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.