About
A code snippet display with an optional file-name caption, a language label and a copy-to-clipboard button.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Code Block to your project and fits it to your theme.
Code
How Code Block is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { CodeBlock } from "@/components/ui/code-block";
export default function CodeBlockDemo() {
return (
<div className="w-full max-w-xl">
<CodeBlock
title="Install"
language="bash"
code="pnpm dlx shadcn@latest add @corsair-ui/code-block"
/>
</div>
);
}
More by kevingirelli
View all
Aurora
50
Warp Gradient
48
FAQ Section
45
QR Code
45
Wave Text
37
Corner Frame
35
Animated Border
32
Spotlight
23