Code block

Present code with legible hierarchy and copy access.

$npx shadcn@latest add @silicon-ui/code-block

contentdeveloper

Installation

$npx shadcn@latest add @silicon-ui/code-block

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/code-block/code-block.tsx
- components/silicon-ui/code-block/code-block.module.css
- components/silicon-ui/copy-button/copy-button.tsx shared
- components/silicon-ui/copy-button/copy-button.module.css shared
- components/silicon-ui/lib/use-copy-feedback.ts shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

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

Prop	Type	Default
`code*` Source shown in the block and copied by the action.	`string`	—
`filename` File name displayed in the header.	`string`	—
`language` Used for the header label and lightweight syntax highlighting.	`string`	`"tsx"`
`maxLines` Collapse longer sources to this many lines, with a toggle that expands the rest in place.	`number`	—