Skip to content
kerfjsGitHub

Snippet

One command on one line, with a copy button.

SourcePackage @kerf-js/veneerTry it

Preview

tsx
import { Snippet } from '@kerf-js/veneer'export function Install() {  return (  <Snippet code="npm install -g kerf" />  )}

Installation

npm install @kerf-js/veneer

Try it

Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.

Live preview
Controls
Codeupdates as you change the controls
import { Snippet } from '@kerf-js/veneer'<Snippet code="npm install -g Kerf" />

Usage

tsx
import { Snippet } from '@kerf-js/veneer'<Snippet code="npm install -g kerf" />

Prompts

prompt changes the sign, and an empty one removes it.

tsx
import { Snippet, Stack } from '@kerf-js/veneer'export function Prompts() {  return (  <Stack gap="related">    <Snippet code="kerf deploy" />    <Snippet      prompt="#"      code="systemctl restart kerf-agent"    />    <Snippet      prompt=""      code="https://storefront.kerf.app"    />  </Stack>  )}

Getting started

Use code for a one-line command, one for each step.

tsx
import { Snippet, Stack, Text } from '@kerf-js/veneer'export function GetStarted() {  return (  <Stack gap="group">    <Stack gap="tight">      <Text role="label">1. Install the CLI</Text>      <Snippet code="npm install -g kerf" />    </Stack>    <Stack gap="tight">      <Text role="label">2. Sign in</Text>      <Snippet code="kerf login" />    </Stack>    <Stack gap="tight">      <Text role="label">3. Ship it</Text>      <Snippet code="kerf deploy" />    </Stack>  </Stack>  )}

When to use

Use it for

  • A command or a link for people to copy

Reach for something else

  • CodeBlock, when there are several lines
  • Code, when it sits in a sentence

Accessibility

  • The prompt is hidden from screen readers.

API Reference

PropTypeDefaultDescription
codestring—What is shown and copied.
promptstring'$'The sign before it. Pass "" for none.

RelatedCode blockCode