# Code Block

Code on the Soft tray: file name and Copy above, numbered lines in an inset card, with highlights and diffs.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/code-block
```

## Usage

```tsx
import { CodeBlock } from '@fetaui/components/code-block'

export function Example() {
  return <CodeBlock fileName="button.tsx" language="tsx" code={source} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| code | string |  |
| lines | { text, variant, number }[] |  |
| fileName | string |  |
| language | string |  |
| collapsible | boolean | false |
| copyLabel | string | Copy code |
| animated | boolean | true |
| CodeBlockLine variant | default, highlighted, added, removed | default |

## When to use

- For snippets people copy.
- Highlighted to point at one line, Diff to show a change.

## When not to use

- For command output: use Code Output.

## Accessibility

- Rendered in pre and code, with the language as a label.
- Copied is announced politely.
- Diff signs are real characters, so screen readers read them.

## Motion

- Copy crossfades to Copied in 150 ms and returns after 2 s.
- Marked lines wash in over 200 ms with a 40 ms stagger, and their bar grows.
- Show more opens in 300 ms.
- With reduced motion, Copy swaps and the block jumps open.