CodeBlock

A beautiful code block component with tabs, copy functionality, and smooth animations

Package Manager Installation

npm install @acme/ui

Single Code Block

import { CodeBlock } from '@/components/code-block'

export default function Page() {
  return (
    <CodeBlock
      code="console.log('Hello, world!')"
      language="javascript"
    />
  )
}

API Configuration

NEXT_PUBLIC_API_URL=https://api.example.com
API_SECRET_KEY=your-secret-key

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

function CodeBlockDemo() {
  return (
    <main className=" ">
      <div className="mx-auto space-y-8">
        {/* Multi-tab example */}
        <div className="space-y-3">
          <h2 className="text-xl font-semibold">
            Package Manager Installation
          </h2>
          <CodeBlock
            tabs={[
              {
                label: "npm",
                code: "npm install @acme/ui",
                language: "bash",
              },
              {
                label: "pnpm",
                code: "pnpm add @acme/ui",
                language: "bash",
              },
              {
                label: "yarn",
                code: "yarn add @acme/ui",
                language: "bash",
              },
              {
                label: "bun",
                code: "bun add @acme/ui",
                language: "bash",
              },
            ]}
          />
        </div>

        {/* Single code block example */}
        <div className="space-y-3">
          <h2 className="text-xl font-semibold">Single Code Block</h2>
          <CodeBlock
            code={`import { CodeBlock } from '@/components/code-block'

export function Page() {
  return (
    <CodeBlock
      code="console.log('Hello, world!')"
      language="javascript"
    />
  )
}`}
            language="tsx"
          />
        </div>

        {/* API example */}
        <div className="space-y-3">
          <h2 className="text-xl font-semibold">API Configuration</h2>
          <CodeBlock
            tabs={[
              {
                label: ".env.local",
                code: `NEXT_PUBLIC_API_URL=https://api.example.com
API_SECRET_KEY=your-secret-key`,
                language: "bash",
              },
              {
                label: "config.ts",
                code: `export const config = {
  apiUrl: process.env.NEXT_PUBLIC_API_URL,
  apiKey: process.env.API_SECRET_KEY,
}`,
                language: "typescript",
              },
            ]}
          />
        </div>
      </div>
    </main>
  )
}

export CodeBlockDemo

References

Inspiration

Kibo UI Code Block

Installation


pnpm dlx shadcn@latest add https://cult-ui.com/r/code-block.json

Usage


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

Single Code Block

Display a single code snippet:


<CodeBlock code="console.log('Hello, world!')" language="javascript" />

Multi-Tab Code Block

Display multiple code snippets with tabs:


<CodeBlock
  tabs={[
    {
      label: "npm",
      code: "npm install @acme/ui",
      language: "bash",
    },
    {
      label: "pnpm",
      code: "pnpm add @acme/ui",
      language: "bash",
    },
    {
      label: "yarn",
      code: "yarn add @acme/ui",
      language: "bash",
    },
  ]}
/>

Package Manager Installation

Common use case for showing different package manager commands:


<CodeBlock
  tabs={[
    {
      label: "npm",
      code: "npm install @acme/ui",
      language: "bash",
    },
    {
      label: "pnpm",
      code: "pnpm add @acme/ui",
      language: "bash",
    },
    {
      label: "yarn",
      code: "yarn add @acme/ui",
      language: "bash",
    },
    {
      label: "bun",
      code: "bun add @acme/ui",
      language: "bash",
    },
  ]}
/>

Multi-Language Code Examples

Show code examples in different languages:


<CodeBlock
  tabs={[
    {
      label: ".env.local",
      code: `NEXT_PUBLIC_API_URL=https://api.example.com
API_SECRET_KEY=your-secret-key`,
      language: "bash",
    },
    {
      label: "config.ts",
      code: `export const config = {
  apiUrl: process.env.NEXT_PUBLIC_API_URL,
  apiKey: process.env.API_SECRET_KEY,
}`,
      language: "typescript",
    },
  ]}
/>

API Reference

CodeBlock Props

Prop	Type	Default	Description
`tabs`	`CodeTab[]`	-	Array of code tabs for multi-tab display
`code`	`string`	-	Single code string (when not using tabs)
`language`	`string`	`"bash"`	Language identifier for syntax highlighting
`className`	`string`	-	Additional CSS classes

CodeTab Interface

Property	Type	Description
`label`	`string`	Tab label displayed in the tab bar
`code`	`string`	Code content for this tab
`language`	`string`	Optional language identifier

Features

Single & Multi-Tab Support: Use either a single code block or multiple tabs
Copy Functionality: Built-in copy button with smooth animations
Direction-Aware Animations: Smooth transitions when switching tabs
Dark Mode: Automatically adapts to light and dark themes
Accessible: Proper ARIA labels and keyboard navigation support
Responsive: Scrollable tabs for mobile devices

Examples

Basic JavaScript


<CodeBlock
  code={`function greet(name) {
  return \`Hello, \${name}!\`
}
 
console.log(greet('World'))`}
  language="javascript"
/>

React Component


<CodeBlock
  code={`import { CodeBlock } from '@/components/code-block'
 
export default function Page() {
  return (
    <CodeBlock
      code="console.log('Hello, world!')"
      language="javascript"
    />
  )
}`}
  language="tsx"
/>

Configuration Files


<CodeBlock
  tabs={[
    {
      label: "package.json",
      code: `{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "@acme/ui": "^1.0.0"
  }
}`,
      language: "json",
    },
    {
      label: "tsconfig.json",
      code: `{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true
  }
}`,
      language: "json",
    },
  ]}
/>

API Examples


<CodeBlock
  tabs={[
    {
      label: "curl",
      code: `curl -X POST https://api.example.com/users \\
  -H "Content-Type: application/json" \\
  -d '{"name": "John Doe"}'`,
      language: "bash",
    },
    {
      label: "JavaScript",
      code: `const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'John Doe' }),
})`,
      language: "javascript",
    },
    {
      label: "Python",
      code: `import requests
 
response = requests.post(
  'https://api.example.com/users',
  json={'name': 'John Doe'}
)`,
      language: "python",
    },
  ]}
/>

Custom Styling


<CodeBlock code="npm install @acme/ui" language="bash" className="my-8" />

CanvasFractalGrid Color Picker

CodeBlock

Package Manager Installation

Single Code Block

API Configuration

References

Installation

Usage

Single Code Block

Multi-Tab Code Block

Package Manager Installation

Multi-Language Code Examples

API Reference

CodeBlock Props

CodeTab Interface

Features

Examples

Basic JavaScript

React Component

Configuration Files

API Examples

Custom Styling

On this page