All componentssmmdlg
Code Block
Framed code panels with a title header, controls, and scrollable monospace content.
install.sh
bunx stylexblocks add table
bun install
bun devSizes
install.sh
bunx stylexblocks add table
bun install
bun devinstall.sh
bunx stylexblocks add table
bun install
bun devinstall.sh
bunx stylexblocks add table
bun install
bun devInstall
zsh — code-block
1bunx stylexblocks add code-blockUsage — Ark UI
code-block.tsx
123456789101112131415161718192021222324252627import { CodeBlock } from "#components/ui/ark-ui/code-block.tsx";
export function Example() { return ( // size resolves once on Root; every part inherits it via context. // Code renders a <pre> and CodeText a <code>; content scrolls // horizontally and caps at --code-block-max-height. <CodeBlock.Root size="md"> <CodeBlock.Header> <CodeBlock.Title>install.sh</CodeBlock.Title> <CodeBlock.Control> <CopyButton /> </CodeBlock.Control> </CodeBlock.Header> <CodeBlock.Content> <CodeBlock.Code> <CodeBlock.CodeText> {"bunx stylexblocks add table\nbun install\nbun dev"} </CodeBlock.CodeText> </CodeBlock.Code> </CodeBlock.Content> </CodeBlock.Root> );}
// long snippets can end with an Overlay + Footer ("show more") pairing:// <CodeBlock.Overlay>…</CodeBlock.Overlay> above <CodeBlock.Footer>