Skip to content
Mox UI

Code Block

A clean code block that builds its entire theme from a single accent color. Pass code and a hex, it does the rest.

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"
    />
  );
}

Installation

  1. 1

    Install the packages

    pnpm add motion prism-react-renderer lucide-react clsx tailwind-merge
  2. 2

    Add the utility file

    lib/utils.ts
    import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}
  3. 3

    Copy and paste the code into your project

    Loading source…
  4. 4

    Update the import paths to match your project

    Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx
import CodeBlock from "@/components/ui/code-block"
export function Demo() {  return (    <CodeBlock      code={`const greet = (name: string) => \`Hello, \${name}!\``}      language="ts"      accent="#F75001"      filename="greet.ts"    />  )}

Options

Pick a value to see the prop you would pass. Defaults are left out.

accent
snippet.tsx
<CodeBlock />

Props

PropTypeDefaultDescription
code*stringDefault: -The source code to render.
languagestringDefault: "tsx"Prism language id, e.g. "tsx", "css", "json", "bash". Also shown as the tag in the header.
accentstringDefault: "#F75001"Any hex color. The whole theme is shades of it: the darkest shade is the background, tokens are tints of the accent, and the lightest text is always white.
mode"auto" | "dark" | "light"Default: "auto"Color scheme. Auto follows the page theme (html dark/light class, data-theme, or OS preference). Pass dark or light to pin a palette: dark puts light tints of the accent on a dark surface, light flips the ramp.
filenamestringDefault: -Filename or path shown on the left of the header. Falls back to the language id when omitted.
showFramebooleanDefault: trueToggles the outer layout: background, border, rounded corners, and header. Turn off to render nothing but the highlighted code.
showHeaderbooleanDefault: trueToggles the header bar. When hidden, the copy button floats over the top-right corner instead. Ignored when showFrame is off.
showLineNumbersbooleanDefault: trueToggles the line-number gutter.
showCopyButtonbooleanDefault: trueToggles the copy-to-clipboard button.
highlightLinesnumber[]Default: -Optional 1-based line numbers to highlight with a soft accent wash. Off when omitted.
classNamestringDefault: -Extra classes merged onto the root element (data-slot="code-block"). Use it for width and max-height.

Pick an accent swatch to re-shade the whole block from that color. Hit the copy button to see it spring into a check.

Credits and license

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Mox UI is appreciated when using a component.
  • Please don't resell the components as your own kit.
Contact Mox UI