Content blocks

Code

The code block: monospaced text on a tinted card. Hovering shows the language button (top left) and Copy (top right).

function greet(name) { return `Hello, ${name}!`; } console.log(greet('world'));

Usage

  • Use the Code block for multi-line code, commands or config that people may copy.
  • Set the language so readers know what the snippet is; Copy is shown on hover.
  • Use inline code marks for short identifiers inside a sentence instead of a Code block.
  • Don’t rely on syntax colors; the block renders plain monospaced text.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/CodeExample.tsx
import { BlockContent, Code, rt } from '@krackedui/motion';

export function CodeExample() {
  const source = `function greet(name) {
    return \`Hello, \${name}!\`;
  }

  console.log(greet('world'));`;

  return (
    <BlockContent>
      <Code language="JavaScript" text={rt(source)} />
    </BlockContent>
  );
}

Examples

Caption

npm install @krackedui/motion
Install command

API Reference

Code

Based on <div> and supports its props. Adds:

PropTypeDefault
text
RichText
language
string
"JavaScript"
caption
RichText
renderLeaf
LeafRenderer
onLanguageClick
() => void

Accessibility

  • The card has role="figure". Language and Copy are real buttons; they are only visible on hover, so they stay reachable by Tab.
  • Copy writes the plain text to the clipboard and shows “Copied” for 1.2s.
  • No syntax highlighting: text is text-primary, so color never carries meaning.
© 2026 Motion. Internal documentation.