Snippet

Presents a compact selectable command with a decorative prefix and exact-value copy action.

Preview

pnpm add @noorddev/vlak-react

In action

Copy an exact command

pnpm add @noorddev/vlak-react

When to use

Use it for

  • A short command or source reference where the copy value should preserve whitespace.
  • Reuse SnippetCopy for named exact-value actions in developer views.
  • Supply onCopy for a host clipboard adapter; omit it to use the browser clipboard.

Avoid

  • Claiming syntax highlighting or command execution from a selectable code line.
  • Including a shell prompt in code when it should only be a decorative prefix.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { Snippet } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/snippet.

Copy the source

npx @noorddev/vlak-cli add snippet

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/snippet.json

Installs the same source through the shadcn CLI.

React

import { Snippet } from "@noorddev/vlak-react";

<Snippet code="pnpm add @noorddev/vlak-react" prefix="$" label="Install command" />

See the integration example to compose these components with your application's model and data.

Props

Snippet

A compact, selectable command or code line; the decorative prefix is not copied.

PropTypeDefaultDescription
coderequiredstring
prefixReactNode
labelstring"Code snippet"
copyLabelstring
copyablebooleantrue
onCopy(value: string) => void | Promise<void>

Also accepts Omit<HTMLAttributes<HTMLElement>, "onCopy" | "prefix">.

The ref reaches HTMLElement.

SnippetCopy

Exact-value clipboard action shared by compact developer views.

PropTypeDefaultDescription
valuerequiredstring
labelstring"Copy snippet"
onCopy(value: string) => void | Promise<void>

Also accepts Omit<HTMLAttributes<HTMLSpanElement>, "onCopy">.

The ref reaches HTMLSpanElement.

Keyboard

KeysDoes
TabTab reaches the scrollable code and 44px copy button.
Enter, SpaceEnter or Space requests clipboard copy from the focused button.

Accessibility

  • The prefix is decorative and is excluded from copied source.
  • Copy reports success only after completion, errors remain visible, and duplicate pending requests are locked.
  • Changing the source invalidates stale clipboard feedback. Native attributes, className, style and refs are forwarded.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<figure class="rs-snippet" aria-label="Install command"><span class="rs-snippet-prefix" aria-hidden="true">$</span><code class="rs-snippet-code" tabindex="0">pnpm add @noorddev/vlak-react</code></figure>

Classes

.rs-snippet-copy.rs-snippet-status.rs-snippet.rs-snippet-prefix.rs-snippet-code

Depends on

ButtonIcons

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas