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.

Facts#

Group	Data display
Product	Max
Global	window.DigitalCrew.Snippet
Source	max-agent: src/components/ui/snippet-1.tsx
Import in the app	import { Snippet } from "@/components/ui/snippet-1";

API#

TypeScript declarations emitted from src/components/ui/snippet-1.tsx.

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#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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#