CodeBlock

CodeBlock defines how EnterUI handles a polished code block with title, terminal mode, and copy action, including default structure, accessible states, and token-driven styling.

#Default usage

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

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

  <CodeBlock title="app/layout.tsx" language="tsx">
    <code>{`import "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui-react/styles.css";

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

#Import

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

#Patterns

pnpm install @froggdesign/enter-ui-react @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.