A polished code block with title, terminal mode, and copy action.
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.
Use title or data-title to label the snippet.
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 { CodeBlock } from "@froggdesign/enter-ui-react";Terminal languages get a prompt affordance.
pnpm install @froggdesign/enter-ui-react @froggdesign/themeCodeBlock 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.
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.CodeBlock uses .eui-code-block classes and EnterUI CSS variables.
It is intentionally darker than surrounding docs surfaces so code remains easy
to scan.