Snippet

One command or key with a copy button, such as an install line. The text wraps, so it fits a phone screen.

Snippet

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Snippet

Run in the project folder

$npx skills add skribly/agent-skills

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222

Dark theme, Snippet

Run in the project folder

$npx skills add skribly/agent-skills

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222

High contrast theme, Snippet

Run in the project folder

$npx skills add skribly/agent-skills

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222

UsageLink to the section Usage

tsx

import { Snippet } from '@skribly/ui/content'

tsx

<Snippet
  label="Run in the project folder"
  prompt="$"
  text="npx skills add skribly/agent-skills"
  copyLabel="Copy command"
  copiedLabel="Copied"
  copyFailedLabel="Could not copy"
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The caption names the group.
The prompt sign is hidden from screen readers and left out of the copy.
The icon button has its own name, and the result is read out by a polite status region.

This demo runs through axe in all three themes on every test run. See what the tests check.