Browse components

Code Block

Shiki-highlighted code surface with line numbers and copy.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/code-block.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/code-block.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/code-block.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/code-block.

Import

import {  CodeBlock,  CodeBlockContent,  CodeBlockCopy,  CodeBlockHeader,  CodeBlockTitle} from "@/components/ui/code-block"

example.tsx

import {  CodeBlock,  CodeBlockContent,  CodeBlockCopy,  CodeBlockHeader,  CodeBlockTitle,} from "@/components/ui/code-block"const code = "export const answer = 42"export function Example() {  return (    <CodeBlock>      <CodeBlockHeader>        <CodeBlockTitle>answer.ts</CodeBlockTitle>        <CodeBlockCopy value={code} />      </CodeBlockHeader>      <CodeBlockContent lang="ts" lineNumbers>        {code}      </CodeBlockContent>    </CodeBlock>  )}

API Reference

CodeBlockContent

Prop	Type	Default
lang	string	"tsx"
lineNumbers	boolean	false
children	string	—

children — Pass the source as a string for highlighting.

CodeBlockCopy

Prop	Type	Default
value	string	—

Notes

Highlighting uses `shiki` via the registry `highlight` helper.