Code

Display code in two shapes — an inline <code> pill for prose, or a block <pre> with optional language label and a copy-to-clipboard button. The block flavour preserves whitespace and scrolls horizontally on overflow.

Inline: install with pnpm add @bwo-ui/react, then import primitives from '@bwo-ui/react'.

tsx

import { Button, Card } from '@bwo-ui/react';

export function Cta() {
  return (
    <Card>
      <Button variant="solid">Ship it</Button>
    </Card>
  );
}

Usage

import { Code } from '@bwo-ui/react';

// Inline
<p>Run <Code>npx bwo init</Code> to scaffold.</p>

// Block with copy
<Code display="block" lang="tsx">
  {snippet}
</Code>

Props

Prop	Type	Default	Description
`display`	`'inline' \| 'block'`	`'inline'`	Inline pill or block with copy button.
`copy`	`boolean`	`true`	When display="block", render the copy button.
`lang`	`string`	—	Optional language label rendered above block code.