Components
Loading preview...
A component for displaying code snippets with syntax highlighting and customizable styling.
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/code-block"use client"
import {
CodeBlock,
CodeBlockCode,
CodeBlockGroup,
} from "@/components/ui/code-block"
import { Button } from "@/components/ui/button"
import { Check, Copy } from "lucide-react"
import { useState } from "react"
export function CodeBlockWithHeader() {
const [copied, setCopied] = useState(false)
const code = `import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}`
const handleCopy = () => {
navigator.clipboard.writeText(code)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<div className="w-full max-w-[450px]">
<CodeBlock>
<CodeBlockGroup className="border-border border-b py-2 pr-2 pl-4">
<div className="flex items-center gap-2">
<div className="bg-primary/10 text-primary rounded px-2 py-1 text-xs font-medium">
React
</div>
<span className="text-muted-foreground text-sm">counter.tsx</span>
</div>
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={handleCopy}
>
{copied ? (
<Check className="h-4 w-4 text-green-500" />
) : (
<Copy className="h-4 w-4" />
)}
</Button>
</CodeBlockGroup>
<CodeBlockCode code={code} language="tsx" />
</CodeBlock>
</div>
)
}