Skip to content
ikada

Code Block

A monospace block for commands and output, with a copy button.

1.2 kB gzipSource Registry JSON

CodeBlock playground

sproutboat deploy robin --region eu-west --env production --message 'Ship the new checkout flow' --wait --timeout 300

Props

Installation

npx shadcn@latest add https://sproutboat.com/ikada/r/code-block.json

The CLI writes components/ikada/code-block.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Icon Button and Inline Confirm. Or take it from the package: import { CodeBlock } from "@sproutboat/ikada";

Usage

import { CodeBlock } from "@/components/ikada/code-block";

<CodeBlock
  label="Deploy command"
   code="sproutboat deploy robin --region eu-west --env production --message 'Ship the new checkout flow' --wait --timeout 300"
  
  
/>

Examples

Command

Copied as is. The label names the scroll region for screen readers and the copy button.
sproutboat deploy robin --region eu-west

Scrolls sideways

Long lines scroll by default. The block is keyboard focusable so it can be read with the arrow keys.
sproutboat deploy robin --region eu-west --env production --message 'Ship the new checkout flow' --wait --timeout 300

Wrapped

sproutboat deploy robin --region eu-west --env production --message 'Ship the new checkout flow' --wait --timeout 300

Output without a copy button

✓ Built wren in 4.2s
✓ Uploaded 3 files
✓ Live at https://wren.sproutboat.app

Props

CodeBlockProps
PropTypeDescription
coderequiredstringThe text. It is shown as is and copied as is.
labelrequiredstringNames the block for screen readers, e.g. "Deploy command". Required.
wrapbooleanWrap long lines instead of scrolling sideways. Default `false`.
copyablebooleanHides the copy button. Default `true`.

Also takes every prop of Omit<ComponentProps<"div">, "children">.

Source: src/components/code-block.tsx