# Code Block Composition 1 - Header composition

> Code block with filename label and copy button in the header.

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

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/code-block-code-block-composition-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/code-block-code-block-composition-1-light-1bb43ebdd73a1ad4.png
- Registry item: https://shadcnblocks.com/r/code-block-code-block-composition-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-composition-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

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

## Files

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

```tsx
"use client";

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

export const title = "Header composition";

const code = [
  {
    language: "typescript",
    filename: "middleware.ts",
    code: `import { NextResponse } from "next/server";

export function middleware() {
  return NextResponse.next();
}`,
  },
];

const Example = () => (
  <div className="w-full max-w-md">
    <CodeBlock data={code} defaultValue="typescript">
      <CodeBlockHeader className="justify-between">
        <CodeBlockFiles>
          {(item) => (
            <CodeBlockFilename key={item.language} value={item.language}>
              {item.filename}
            </CodeBlockFilename>
          )}
        </CodeBlockFiles>
        <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;
```