About
A syntax-highlighted code snippet display with a copy-to-clipboard button, whose entire color theme (background, tokens, gutter) is generated from a single accent hex color.
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
"use client";
import CodeBlock from "@/components/ui/code-block";
const SAMPLE = `import { useSpring, animated } from "motion/react";
type OrbitProps = {
radius?: number;
speed?: number;
};
export function Orbit({ radius = 120, speed = 1 }: OrbitProps) {
const angle = useSpring(0, { stiffness: 80, damping: 20 });
const x = Math.cos(angle.get()) * radius;
const y = Math.sin(angle.get()) * radius;
return (
<animated.div
style={{ x, y }}
className="size-4 rounded-full bg-current"
/>
);
}`;
export default function CodeBlockDemo() {
return (
<div className="flex w-full items-center justify-center p-6">
<CodeBlock
code={SAMPLE}
language="tsx"
accent="#F75001"
filename="orbit.tsx"
className="w-full max-w-xl"
/>
</div>
);
}
Dependencies
More by amitgajare2
View all
Option Wheel
81
Proximity Sidebar
22