Snippet

One command on one line, with a copy button.

SourcePackage @weft-js/warpPlayground

Preview

tsx

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

Installation

npm install @weft-js/warp

Usage

tsx

import { Snippet } from '@weft-js/warp'<Snippet code="npm install -g weft" />

Prompts

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

tsx

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

Getting started

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

tsx

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

Playground

Code

Prompt

import { Snippet } from '@weft-js/warp'<Snippet code="npm install -g weft" />

Accessibility

The prompt is hidden from screen readers.

API Reference

Prop	Type	Default	Description
`code`	`string`	—	What is shown and copied.
`prompt`	`string`	`'$'`	The sign before it. Pass `""` for none.

RelatedCode block Code