Code Block

Syntax-highlighted code block with language icon, copy button, and optional scrollable or collapsible overflow.

shikilucide-react

const schema = z.object({
  name: z.string(),
  email: z.string().email(),
})

Installation

$ shadcn add @jalco/code-block

Usage

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

<CodeBlock />

Examples

Languages

TypeScript

import { z } from "zod"

const userSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  age: z.number().int().positive(),
})

type User = z.infer<typeof userSchema>

CSS (Tailwind v4)

css

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.7 0.15 200);
  --color-secondary: oklch(0.6 0.12 280);
  --radius-lg: 0.75rem;
}

Variants

Compact (no header)

import { z } from "zod"

const userSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  age: z.number().int().positive(),
})

type User = z.infer<typeof userSchema>

API Reference

CodeBlock

PropType

Notes

Bundled language icons. Language icons are bundled directly in the component — no API calls or setup required. Pass a custom icon prop to override the default icon for any language.
Dual theme. By default, uses github-light / github-dark for automatic light/dark mode. Pass the theme prop to render with any of shiki's 65 bundled themes instead.
Icon library. Uses Lucide icons by default. Since this is copy-paste code, you can swap the imports if your project uses a different icon library.