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 = `npx shadcn add amitgajare2/ariseui/code-block
cd my-app
npm install motion prism-react-renderer lucide-react
npm run dev`;
export default function CodeBlockHighlightDemo() {
return (
<div className="flex w-full items-center justify-center p-6">
<CodeBlock
code={SAMPLE}
language="bash"
accent="#34C759"
filename="install.sh"
highlightLines={[1]}
className="w-full max-w-xl"
/>
</div>
);
}
Dependencies
More by amitgajare2
View all
Option Wheel
82
Proximity Sidebar
22