Kibo UI

Code Block

shadcnblocks

External demo

Installation

No MCP yet? Connect your agent.

Capabilities

  • Syntax highlighting
  • Line numbers
  • Copy to clipboard
  • Support for filenames
  • Highlighted lines and words
  • Focused line
  • Diff
  • Language detection
  • Theme support
  • Customizable styles

Variations

  • No header
  • Highlighted lines
  • Highlighted words
  • Diff
  • Focus
  • Hidden line numbers
  • No syntax highlighting
  • Custom Theme

Notes

React Server Component

You can use the RSC version of the Code Block component by importing the CodeBlockContent component from code-block/server i.e.

import {
  CodeBlock,
  CodeBlockHeader,
  // ... the rest of the components
  CodeBlockBody,
  // CodeBlockContent,
} from "@/components/kibo-ui/code-block";
import { CodeBlockContent } from "@/components/kibo-ui/code-block/server";