Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

CodeBlock

CodeBlock renders syntax-highlighted source with an optional header, copy button, line numbers, highlighted and focused lines, diffs, folding and line selection.

CoreData Display@gaudi/design-system/core/CodeBlockView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { CodeBlock } from '@gaudi/design-system/core/CodeBlock';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/code-block-chat-references.json.

Usage

import { CodeBlock, CodeBlockCopyButton, CodeBlockHeader, CodeBlockLanguage, CodeBlockTitle } from '@gaudi/design-system';
<CodeBlock code={code} language='typescript' showLineNumbers highlightedLines='3-5'>  <CodeBlockHeader>    <CodeBlockTitle>hooks/use-cart.ts</CodeBlockTitle>    <CodeBlockLanguage />    <CodeBlockCopyButton className='ml-auto' />  </CodeBlockHeader></CodeBlock>

Examples

Quoted lines in a chat answer

Storybook

Diagnostics with fixes

Storybook

Find within a long file

Storybook

Long file with folding

Storybook

Line states

Storybook

Code block options

Storybook

Patch review

Storybook

Streaming assistant reply

Storybook

Tabbed code

Storybook

Shell session with output

Storybook

API

14 props

Accessibility

The code region is a labelled, keyboard-scrollable region; the copy, wrap, expand and download buttons have accessible names and announce their result. Line numbers, fold markers and decorations are hidden from assistive technology and never copied.

TabsSwitch between related panels with keyboard-accessible tab controls.3 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesScrollAreaContained scrolling with themed scrollbars and optional smooth wheel motion for article reading.2 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesPillPill renders compact category and status labels.4 examplesFieldField composes form label, description, error, and input building blocks.7 examples