Code / CodeBlock

Code formats short inline tokens, while CodeBlock presents multiline or copyable snippets.

Purpose

Code formats short inline tokens. CodeBlock presents multiline or copyable snippets.

Inline and block code

Run pnpm dev during local development.

pnpm dlx shadcn@4.16.1 add @siteplane/button

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

export function Example() {
  return (
    <>
      <Code>pnpm dev</Code>
      <CodeBlock copyable value="pnpm dlx shadcn@4.16.1 add @siteplane/button" />
    </>
  );
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/code

Import

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

Need the machine-readable source metadata? View registry JSON.

Usage

Use Code / CodeBlock for inline tokens and CodeBlock for copyable multi-line examples.

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

export function Example() {
  return (
    <>
      <Code>pnpm dev</Code>
      <CodeBlock copyable value="pnpm dlx shadcn@4.16.1 add @siteplane/button" />
    </>
  );
}

Examples

Inline tokens, plain blocks, copy and mask actions and both sizes are props of the same two primitives.

Inline code

Run pnpm typecheck before marking a primitive as reviewed.

<p className="text-sm">
  Run <Code>pnpm typecheck</Code> before marking a primitive as reviewed.
</p>

Block code

pnpm build
pnpm deploy --target production

const deploySnippet = `pnpm build
pnpm deploy --target production`;

<CodeBlock value={deploySnippet} />

Copyable

{
  "registry": "@siteplane",
  "componentsDir": "src/components/ui"
}

const configSnippet = `{
  "registry": "@siteplane",
  "componentsDir": "src/components/ui"
}`;

<CodeBlock copyable value={configSnippet} />

Masked

mask hides the value until revealed. Combine it with copyable for secrets that should stay readable to machines only.

••••••••••••••••••••••••••••

<CodeBlock copyable mask value="cp_live_51N8Jf4ReviewedToken" />

Sizes

pnpm dlx shadcn@4.16.1 add @siteplane/code

pnpm dlx shadcn@4.16.1 add @siteplane/code

<CodeBlock value="pnpm dlx shadcn@4.16.1 add @siteplane/code" />
<CodeBlock size="sm" value="pnpm dlx shadcn@4.16.1 add @siteplane/code" />

API Reference

The reference lists the source-owned exports and props that are easy to miss in visual examples. Inherited Base UI props remain available unless the wrapper narrows them.

Use Code inside prose and CodeBlock for complete snippets.
Use mask only with the built-in reveal and copy actions.
Keep copy and reveal actions in the reserved top-right action area.
Leave enough right-side padding for actions in long snippets.

Motion

Component motion uses the shared Siteplane motion contract. See the global motion guide for provider setup, tokens and reduced-motion behavior.

Code itself does not animate.
Copy and reveal feedback uses the native action behavior and global reduced-motion contract.

Accessibility

Masked content requires a clearly named reveal control and a clearly named copy control.
Do not rely on syntax color alone to explain a snippet.
Never place real secrets in documentation, screenshots, or examples.

Implementation Guidance

Use Code for short inline tokens and CodeBlock for multiline snippets.
Do not build custom copy overlays around CodeBlock.
Keep all examples safe to publish.