Skip to main content
Version: Next

CodeBlock

CodeBlock is a display-focused React surface for multi-line snippets, install commands, and API examples. It supports header metadata like title, language, description, optional actions, and an optional footer.

Basic usage​

Live Editor
function InstallBlock() {
  return (
    <ThemeProvider>
      <CodeBlock
        title="Install packages"
        language="bash"
        description="Core UI packages"
        code={"npm install @editora/ui-react @editora/ui-core\nnpm run build"}
      />
    </ThemeProvider>
  );
}
Result
Loading...

With actions​

import { CodeBlock, CopyButton } from '@editora/ui-react';

function DocsBlock() {
  const snippet = "npm install @editora/ui-react @editora/ui-core";

  return (
    <CodeBlock
      title="Quick start"
      language="bash"
      actions={<CopyButton value={snippet} />}
      code={snippet}
    />
  );
}

Key props​

code, language, title, description, actions, footer, wrap, lineNumbers

Notes​

  • CodeBlock is server-safe, so it can be used from @editora/ui-react/server.
  • Use actions for composed controls like CopyButton.
  • lineNumbers works when the content comes from the code string prop.