# Snippet

> A monospace command block with a copy button whose icon turns into a check after copying.

## Facts

- **Product**: Max
- **Family**: Data display
- **Global**: `window.DigitalCrew.Snippet`
- **Source**: `max-agent: src/components/ui/snippet-1.tsx`
- **Import in the app**: `import { Snippet } from "@/components/ui/snippet-1";`
- **Live preview**: /design/components/snippet/preview.html
- **Page**: /design/components/snippet

## Guidelines

**Use it for** shell commands and one-line code the reader should copy, such as the setup steps on Max's landing page ("npm install", "npm run dev").

**What you provide**:
- `text`: a string, or an array with one line per entry.
- `prompt` [`true`]: prefixes each line with `$ `.
- `type`: `"success"`, `"warning"` or `"error"`.
- `dark` [`false`]: the inverted style; it overrides `type`.
- `width` [`"100%"`] and `onCopy`.

**Colours** (the `ds-*` tokens from Max's `globals.css`, redefined for dark):
- Default: `bg-ds-background-100` with `text-ds-gray-1000`.
- Inverted: `bg-ds-gray-1000` with `text-ds-gray-100`.
- `success`: `ds-blue-100` background, `ds-blue-900` text. It is blue, not green.
- `warning`: `ds-amber-100` / `ds-amber-900`.
- `error`: `ds-red-100` / `ds-red-900`.

**Anatomy**: `px-3 py-2.5 rounded-md` with a border in `ds-gray-alpha-400`. Lines are `font-mono text-[13px]`. The 16px copy icon sits at the right edge: vertically centred for one line, top-aligned for several.

**Behaviour**: clicking the icon writes the lines, joined with newlines, to `navigator.clipboard`. The copy and check icons swap through `snippet-fade-out` and `snippet-fade-in` (1s, ease-out), and the state resets after 2s.

**Don't** use it for long code listings: there is no syntax highlighting, and long lines wrap. Don't add the `$` yourself; set `prompt={false}` for lines that aren't commands.

## API

```ts
type TSnippetType = "success" | "warning" | "error";
interface SnippetProps {
    text: string | string[];
    width?: string;
    onCopy?: () => void;
    prompt?: boolean;
    dark?: boolean;
    type?: TSnippetType;
}
export declare const Snippet: ({ text, width, onCopy, prompt, dark, type, }: SnippetProps) => any;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function Row(props) {
    return h("div", { className: "space-y-1.5" },
      h("p", { className: "text-xs font-medium text-muted-foreground" }, props.label),
      props.children);
  }
  function App() {
    return h("div", { className: "grid max-w-xl gap-4" },
      h(Row, { label: "Default" }, h(DC.Snippet, { text: ["git clone https://github.com/Digital-Crew-Technologies/max-agent.git", "cd max-agent"] })),
      h(Row, { label: "type=\"success\"" }, h(DC.Snippet, { text: "npm install", type: "success" })),
      h(Row, { label: "type=\"warning\"" }, h(DC.Snippet, { text: "cp .env.example .env.local", type: "warning" })),
      h(Row, { label: "dark (inverted)" }, h(DC.Snippet, { text: "npm run dev", dark: true })));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Data display

- [AgentFace](/design/components/agent-face.md): A Digital Worker's face: its approved portrait, or its initials on its accent tile.
- [AnimateDigits](/design/components/animate-digits.md): A number whose digits spring in and out as it changes (motion), direction following the change.
- [Avatar](/design/components/avatar.md): A round image with an initials fallback (Radix Avatar), 32px by default.
- [CampaignStatusBadge](/design/components/campaign-status-badge.md): The campaign lifecycle pill: Draft, Active, Paused, Stopped, Completed, Archived.
- [ChannelBadge](/design/components/channel-badge.md): Marks which channel a conversation or step runs on: email (amber), LinkedIn (sky), WhatsApp (emerald).
- [EmailVerificationBadge](/design/components/email-verification-badge.md): The deliverability verdict for an email address, with an icon and an optional score.
- [HeroMetric](/design/components/hero-metric.md): One big number with its previous-period comparison, a trend pill and a pacing bar.
- [KpiCard](/design/components/kpi-card.md): A KPI tile — label, value, trend — and `KpiSection`, the glass panel that groups them.
- [MaxIconSet](/design/components/max-icon-set.md): Max's own SVG icons, exported as `DC.MaxIcons`: integration and channel logos, message delivery states, and the appearance-picker tiles.
- [MetricTile](/design/components/metric-tile.md): A compact glass tile for a scored metric: label, value toned by score band, hint.
- [ProspectAvatar](/design/components/prospect-avatar.md): A prospect's photo, or a gradient disc hashed from their name, with an optional unread halo.
- [TimeLens](/design/components/time-lens.md): Max's agenda: hour marks, ticks and tasks in one scrolling column, read through a fixed lens that shows the time under it.
- [WorldGlobe](/design/components/world-globe.md): An interactive d3-geo globe on canvas with avatar markers that merge into heat-coloured count bubbles.