Photocopy Code Block

New

$ npx shadcn@latest add @keyframery/photocopy-code-block

components/launch.tsx

import { motion } from "motion/react"

export function Launch({ onClick }: { onClick: () => void }) {
  return (
    <motion.button
      whileTap={{ scale: 0.96 }}
      transition={{ type: "spring", bounce: 0.3 }}
      onClick={onClick}
      className="rounded-full bg-black px-5 py-2.5 text-white"
    >
      Launch
    </motion.button>
  )
}

Press copy. Or select a few lines and press ⌘C: the lamp reads just those.

import { codeToHtml } from "shiki"

import { PhotocopyCodeBlock } from "@/components/keyframery/photocopy-code-block"

export async function Snippet({ code }: { code: string }) {
  const html = await codeToHtml(code, {
    lang: "tsx",
    themes: { light: "github-light", dark: "github-dark" },
    defaultColor: false,
  })
  return (
    <PhotocopyCodeBlock code={code} title="app/page.tsx">
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </PhotocopyCodeBlock>
  )
}

// A command: plain text is fine, and the $ is never copied.
<PhotocopyCodeBlock language="bash" code="$ pnpm add motion" />

Installation

npx shadcn add @keyframery/photocopy-code-block

Props

Prop	Type	Default	What it does
code	string	—	The code. It's what gets copied, and what's shown when there are no children. Leave it out and the text is read from what's shown.
children	ReactNode	—	The code as your highlighter renders it, like Shiki's HTML. The lamp lights whatever is there, colours and all.
title	string	—	A file name or label for the header, like app/page.tsx. Without one, the button sits in the corner, or at the end of a one-line command.
language	string	—	Used to spot shell commands, so their prompts are left out of the clipboard.
prompt	string \| false	—	A prompt to show but never copy, like "$ ". It's found on its own when every line of shell code starts with one; false turns it off.
onCopy	(text: string) => void	—	Runs with exactly what went to the clipboard, from the button, ⌘C on the block, or a selection.

Accessibility and motion

Copying by hand counts too. Select part of the code and press ⌘C, and the lamp reads only the letters you selected, then the button says how many lines you got. Focus the block and press ⌘C with nothing selected, and it copies the whole thing.
It works with any highlighter, or none. The lamp lights a copy of whatever is rendered, so Shiki, rehype-pretty-code or a plain string all look right. To use it for every code block in MDX, map pre to it and leave out code: the text is read from the block.
If the page can't reach the clipboard, the code is selected for you and the button says to press ⌘C.
The button is a real button with a label, and screen readers hear what was copied. With reduced motion on, there's no lamp: the button just says Copied.

Wave Photo UploadNew

Relay BentoNew

Installation

Props

Accessibility and motion

On this page