Code Block

A neumorphism-styled code block component with syntax highlighting and copy functionality.

Preview

tsx

function greet(name: string) {
  return `Hello, ${name}!`
}

bash

npx shadcn@latest add @zerodrive/code-block

Then import the component:

tsx

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

Pass your code as a string to the code prop. The component is an async Server Component that uses Shiki for syntax highlighting.

tsx

<CodeBlock
  code={`const message = "Hello, World!"`}
  lang="tsx"
/>

Supports multiple languages for syntax highlighting.

typescript

interface User {
  id: number
  name: string
  email: string
}

const users: User[] = []

bash

npm install @radix-ui/react-slot
pnpm add class-variance-authority

json

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0"
  }
}

css

.button {
  background: #f0f0f3;
  border-radius: 8px;
  box-shadow: -1px -1px 3px white,
              1.5px 1.5px 3px rgba(174, 174, 192, 0.4);
}

Display a custom filename in the header.

components/button.tsx

export function Button({ children }) {
  return (
    <button className="btn">
      {children}
    </button>
  )
}

tsx

<CodeBlock
  code="..."
  lang="tsx"
  filename="components/button.tsx"
/>

Prop	Type	Default	Description
`code`	`string`	-	The code string to display and highlight.
`lang`	`string`	`"tsx"`	The language for syntax highlighting (e.g., tsx, typescript, bash, json, css).
`filename`	`string`	-	Optional filename to display in the header. Defaults to the lang value.
`showLineNumbers`	`boolean`	`false`	Whether to display line numbers.
`className`	`string`	-	Additional CSS classes to apply.