# Snippet card (goodtabs UI)

A code block with a filename bar and a copy button, no syntax colours.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/snippet-card.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/snippet-card`

## Usage

```tsx
import { SnippetCard } from "@/components/ui/snippet-card"

<SnippetCard filename="lib/utils.ts" code={source} lineNumbers />
<SnippetCard language="sh" code="npx shadcn@latest add @goodtabs/snippet-card" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| code | `string` |  | The code, as written. Newlines split it into lines. |
| filename | `string` |  | Shown in the top bar, in mono. |
| language | `string` |  | Shown in the bar when there is no filename, for example "sh". |
| lineNumbers | `boolean` | `false` | Number every line down the left. |
| maxHeight | `string` |  | Cap the block and scroll inside it, for example "240px". |

## When to use

- Install commands, config files and short examples in docs and READMEs
- A code sample on a landing page where highlighting would add noise
- Anywhere people need to copy a block, not just read it

## When not to use

- Long files or anything that needs syntax highlighting: use a highlighter and wrap its output
- Editable code: this is read only

## Notes for agents

- Client component because of the copy state; it takes no functions, so demos can stay server
- Pass the code as a plain string, it is not escaped or highlighted; a trailing newline is trimmed
- The pre is focusable so a capped or wide block scrolls with the keyboard
- Clipboard writes need a secure context; failures are silent and the code stays selectable

Docs: https://ui.goodtabs.co/components/snippet-card