Code block
Code block is a neobrutalist React component from Cruise UI. Plain-text code in the system monospace font on a dark (.on-deep) panel, with an optional file name and language label and a Copy button. Long lines scroll inside the block. Install it with npx shadcn@latest add @cruiseui/cruise-code-block.
Install
Terminal
npx shadcn@latest add @cruiseui/cruise-code-blockFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
npx shadcn@latest add @cruiseui/cruise-dashboard-layout @cruiseui/cruise-stat-cardimport { CruiseDashboardLayout } from "@/components/cruise/blocks/dashboard-layout";
export default function Layout({ children }: { children: React.ReactNode }) {
return <CruiseDashboardLayout nav={nav}>{children}</CruiseDashboardLayout>;
}import { CruiseCodeBlock } from "@/components/cruise/code-block";
export default function CodeBlockExample() {
return (
<div className="flex flex-col gap-6">
<CruiseCodeBlock title="Terminal" language="bash" code="npx shadcn@latest add @cruiseui/cruise-dashboard-layout @cruiseui/cruise-stat-card" />
<CruiseCodeBlock
title="app/(dashboard)/layout.tsx"
language="tsx"
code={`import { CruiseDashboardLayout } from "@/components/cruise/blocks/dashboard-layout";
export default function Layout({ children }: { children: React.ReactNode }) {
return <CruiseDashboardLayout nav={nav}>{children}</CruiseDashboardLayout>;
}`}
/>
</div>
);
}
<figure class="code-block">
<div class="code-block-inner on-deep">
<div class="code-block-head"><figcaption class="code-block-title">app/layout.tsx</figcaption><span class="code-block-lang">tsx</span></div>
<pre tabindex="0" aria-label="Code: app/layout.tsx"><code>npx shadcn@latest add @cruiseui/button</code></pre>
</div>
</figure>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Install commands, snippets and keys in docs and settings pages.
When not to
Short inline code in a sentence (use <code>).
Props
CruiseCodeBlock
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | — | — |
title? | string | — | e.g. a file name: "app/layout.tsx". |
language? | string | — | Shown as a small label, e.g. "tsx" or "bash". |
copy? | boolean | true | Show the Copy button. |
copyLabel? | string | "Copy code" | The Copy button's accessible name. |
className? | string | — | — |
Accessibility
- The code area can take focus, so long lines scroll with the keyboard.
- The Copy button announces "Copied".
- No colour-only meaning: plain text, no highlighting.