Code Snippet

A code block with an optional filename header, copy button, and an editable mode.

npm install @sakaniui/react

No syntax highlighting

This renders plain monospaced text — it doesn't tokenise or colour code, and takes no language prop. That keeps a highlighter out of the bundle for the common case of showing an install command. For highlighted blocks, run the code through Shiki or Prism yourself (this docs site does exactly that in its own CodeBlock).

Filename and copy

The copy button lives in the header, so it only appears once filename is set.

example.tsx

import { Button } from '@sakaniui/react';

export function Example() {
  return <Button variant="primary">Get started</Button>;
}

Editable

playground.tsx

import { Button } from '@sakaniui/react';

export function Example() {
  return <Button variant="primary">Get started</Button>;
}

129 characters

Props

Prop	Type	Default	Description
code	string		The snippet body.
filename	string		Setting it shows the header row, which is also where the copy button lives.
onCopy	(code: string) => void		Fires after a successful copy, for analytics or a toast.
editable	boolean	false	Lets people type into the block. Read-only otherwise.
onChange	(code: string) => void		Fires per keystroke. Only meaningful when editable.
placeholder	string		Shown when editable and empty.

PreviousFinance NextAvatar Upload