Snippet

A code or command block with a copy button, a language label and optional variants.

import { Snippet } from "pleate/snippet";

Install commands

Package manager variants in a tab rail, and a long shell line that scrolls.

bash

$ npm install pleate

bash

$ curl -H "Authorization: Bearer $TOKEN" https://api.example.com/v1/trips/lisbon-2026/bookings?status=confirmed&include=travellers,seats

Max height and wrap

json

{
  "trip": "lisbon-2026",
  "travellers": 3,
  "stays": [
    { "city": "Lisbon", "nights": 4, "hotel": "Casa do Bairro, Rua da Rosa 112, Bairro Alto" },
    { "city": "Sintra", "nights": 1, "hotel": "Quinta das Murtas" },
    { "city": "Porto", "nights": 3, "hotel": "Ribeira Flats" }
  ],
  "flights": ["TP 1351", "TP 1946"]
}

json

{
  "trip": "lisbon-2026",
  "travellers": 3,
  "stays": [
    { "city": "Lisbon", "nights": 4, "hotel": "Casa do Bairro, Rua da Rosa 112, Bairro Alto" },
    { "city": "Sintra", "nights": 1, "hotel": "Quinta das Murtas" },
    { "city": "Porto", "nights": 3, "hotel": "Ribeira Flats" }
  ],
  "flights": ["TP 1351", "TP 1946"]
}

Props

code

The code. Ignored when tabs is set.

string

tabs

Variants of the same snippet, shown as a tab rail in the header.

{ label: string; code: string }[]

language

Mono label in the header, e.g. "bash".

string

prompt

Drawn before every line, never copied, e.g. "$".

string

maxHeight

Height after which the code scrolls.

number | string

wrap

Wrap long lines instead of scrolling sideways.

booleandefault false

copyLabel

Accessible name of the copy button.

stringdefault "Copy"

copiedLabel

Label after copying.

stringdefault "Copied"

Accessibility

The copy button sits in the header, so code never scrolls under it.
Copied is shown and announced only after the clipboard write succeeds.
The code block takes keyboard focus so it can be scrolled with the arrow keys.
Variants use a tab list with arrow key navigation.