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.

motionprism-react-renderer

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

Options you can pass to customize this component.

Prop
Type
Description
code*
string

The source code to render.

language
string

Prism language id, e.g. "tsx", "css", "json", "bash". Also shown as the tag in the header.

accent
#F75001#1A73F2#FF3B30#34C759

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"

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.

filename
string

Filename or path shown on the left of the header. Falls back to the language id when omitted.

showFrame
boolean

Toggles the outer layout — background, border, rounded corners, and header. Turn off to render nothing but the highlighted code.

showHeader
boolean

Toggles the header bar. When hidden, the copy button floats over the top-right corner instead. Ignored when showFrame is off.

showLineNumbers
boolean

Toggles the line-number gutter.

showCopyButton
boolean

Toggles the copy-to-clipboard button.

highlightLines
number[]

Optional 1-based line numbers to highlight with a soft accent wash. Off when omitted.

className
string

Extra classes merged onto the root element (data-slot="code-block") — use it for width and max-height.

npx shadcn add amitgajare2/ariseui/code-block
Code Block


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