Component

Code Block

A plain code block with an optional copy control. No syntax highlighting by design - highlighting means shipping a grammar and a theme, which is a dependency a component library should not force on every consumer.

Basic

tsx

import { Button } from "@fujiui/react";

export function Save() {
  return <Button>Save changes</Button>;
}

Without the copy control

copyable={false} for a snippet that is illustrative rather than something to paste.

bash

npm install @fujiui/react

Collapsible

Starts collapsed, for a long snippet that is not the point of the section it sits in.

language labels the header tab only - nothing is parsed from it
Pass defaultOpen alongside collapsible to start it expanded

API reference

Prop	Type	Default	Description
code *	string	None	The source to display, verbatim.
collapsible	boolean	false	Renders as a collapsed-by-default accordion instead of always-expanded.
copyable	boolean	true	Shows the copy-to-clipboard control. Defaults to true.
defaultOpen	boolean	false	Starts a `collapsible` block expanded. Ignored when `collapsible` is off.
language	string	None	Language name shown on the header tab. Labels only - nothing is highlighted from it.

code *None

string

The source to display, verbatim.

collapsiblefalse

boolean

Renders as a collapsed-by-default accordion instead of always-expanded.

copyabletrue

boolean

Shows the copy-to-clipboard control. Defaults to true.

defaultOpenfalse

boolean

Starts a `collapsible` block expanded. Ignored when `collapsible` is off.

languageNone

string

Language name shown on the header tab. Labels only - nothing is highlighted from it.

Also accepts everything from React.HTMLAttributes<HTMLDivElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent