Code Snippet, animated React component

A code block for developer pages. A macOS-style header with the language in quiet monospace (click it to switch) and a small Copy button that morphs into a tick. Real token-level highlighting for JS, TS, Python, Bash and JSON with no highlighter library, dark and light themes, optional line numbers, and lines that roll in one after another.

Pro
Cards
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

1const fetchUser = async (id) ⇒ {
2  try {
3    const res = await fetch(`/api/users/${id}`);
4    if (!res.ok) throw new Error("Not found");
5    return await res.json();
6  } catch (error) {
7    console.error("Request failed:", error);
8    return null;
9  }
10};
11 
12fetchUser(42).then((user) ⇒ console.log(user.name));

Props

Prop	Type	Default	What it does
initial	"js" \| "ts" \| "python" \| "bash" \| "json"	"js"	Language shown first.
theme	"dark" \| "light"	"dark"	Colour theme of the block.
lineNumbers	boolean	true	Shows line numbers.
controls	boolean	true	Shows the chip row for language, theme and line numbers under the block.
autoplay	boolean	false	Tours the languages every few seconds until someone touches it. Pauses off screen.
className	string	—	Extra classes for the wrapper.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/code-snippet
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
code-snippet/
code-snippet.tsx
index.ts
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { CodeSnippet } from "@/components/code-snippet";

export default function Page() {
  return (
    <main>
      <CodeSnippet />
    </main>
  );
}

Pro
New
Ripple Now Playing
Pro
New
Chladni Upload
Pro
NewSound
Empty Projects
Pro
NewSound
No Results

Code Snippet, animated React component

Play with it

Props

More cards