Components

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.

Dependencies

motionprism-react-renderer

Interaction Type

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

Props

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.

Installation

npx shadcn add swamimalode07/rare-ui/code-block

How to use

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

Source Code

Click the code icon in the top-right corner to view the source code.

Keep in mind

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.

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •Free to use and modify in both personal and commercial projects.
  • •Attribution to Rare UI is appreciated when using a component.
  • •Please don't resell the components as your own kit.
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"
    />
  );
}