CodeBlock - EnterUI

LayoutUpdated May 3, 2026

#Default usage

import "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui/styles.css";

export default function RootLayout({ children }) {
return <body>{children}</body>;
}

#Usage

import { CodeBlock } from "@froggdesign/enter-ui";

export function Example() {
  return (
    <CodeBlock title="app/layout.tsx" language="tsx">
      <code>{`import "@froggdesign/theme/styles.css";
    import "@froggdesign/enter-ui/styles.css";

    export default function RootLayout({ children }) {
    return <body>{children}</body>;
    }`}</code>
    </CodeBlock>
  );
}

#Patterns

pnpm install @froggdesign/enter-ui @froggdesign/theme

#Accessibility

CodeBlock keeps the code inside a native pre element and exposes a real copy button. The copy button has visible text and uses focus-visible styling.

#API

title or data-title controls the header label.
language can be passed directly or inferred from a child code class name.
showCopyButton, copyLabel, copiedLabel, and resetDelay customize copy behavior.
containerClassName styles the outer figure; className styles the inner pre.

#Styling

CodeBlock uses .eui-code-block classes and EnterUI CSS variables. It is intentionally darker than surrounding docs surfaces so code remains easy to scan.

Edit this page