# Code Block Copy 1 - Copy button

> Code block header with a copy-to-clipboard button.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/code-block-code-block-copy-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/code-block-code-block-copy-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/code-block-code-block-copy-1-light-db74de0c1b366a40.png
- Registry item: https://shadcnblocks.com/r/code-block-code-block-copy-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/code-block-code-block-copy-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://www.kibo-ui.com/r/code-block.json`

## Files

### `example/code-block/code-block-copy-1.tsx`

```tsx
"use client";

import type { BundledLanguage } from "@/components/kibo-ui/code-block";
import {
  CodeBlock,
  CodeBlockBody,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockItem,
} from "@/components/kibo-ui/code-block";

export const title = "Copy button";

const code = [
  {
    language: "typescript",
    filename: "api.ts",
    code: `export async function fetchUser(id: string) {
  const response = await fetch(\`/api/users/\${id}\`);
  if (!response.ok) throw new Error("Failed to fetch user");
  return response.json();
}`,
  },
];

const Example = () => (
  <div className="w-full max-w-md">
    <CodeBlock data={code} defaultValue="typescript">
      <CodeBlockHeader className="justify-end">
        <CodeBlockCopyButton />
      </CodeBlockHeader>
      <CodeBlockBody>
        {(item) => (
          <CodeBlockItem key={item.language} value={item.language}>
            <CodeBlockContent language={item.language as BundledLanguage}>
              {item.code}
            </CodeBlockContent>
          </CodeBlockItem>
        )}
      </CodeBlockBody>
    </CodeBlock>
  </div>
);

export default Example;
```