Code Block

Data Display

A plain monospace code panel with a filename and a copy button.

CodeBlock is the lightweight sibling of the syntax-highlighted variant. It renders code on a dark slate surface with a one-click copy action.

npx shadcn@latest add code-block

Default

A dark header bar carries the filename, language, and copy control.

Preview

Live

data-table.tsxtsx

export function DataTable({ data, columns }) {
  const [sortKey, setSortKey] = useState(null)
  const [sortDir, setSortDir] = useState("asc")
  return <Table>{/* rows go here */}</Table>
}

tsx

1<CodeBlock
2  filename="data-table.tsx"
3  code={`export function DataTable({ data, columns }) {
4  const [sortKey, setSortKey] = useState(null)
5  return <Table>{/* rows go here */}</Table>
6}`}
7/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
code	string	The source text to display.
language	string= "tsx"	Label shown as the language chip in the header.
filename	string	Optional filename shown in the header.
className	string	Merge extra classes onto the wrapper.