Code

Article code rendered through the Core CodeBlock: CodeFence maps MDX pre, CodeGroup renders ::: code-group fences as tabs.

MDX@gaudi/design-system/mdx/CodeView in Storybook Source

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 Code from '@gaudi/design-system/mdx/Code';

Usage

```tsx title="app/page.tsx" {2} showLineNumbersexport default function Page() {  return <main>Article</main>;}```
::: code-group labels=[pnpm, npm]
```bashpnpm add @gaudi/design-system```
```bashnpm install @gaudi/design-system```
:::

Examples

Playground

Storybook

API

4 props

Accessibility

Fences are keyboard-scrollable regions with a labelled copy button; groups are Gaudi Tabs with roving focus and labelled panels.

Notes

Map pre to CodeFence and CodeGroup to CodeGroup in the MDX components; add remarkCode to the remark plugins.

ArticleA complete blog article with Gaudi journal navigation, PostHeader metadata, reading progress, TableOfContents section navigation, expandable images, a gallery, and captioned video. The main Blog article is joined by a centered Focused essay, a Technical tutorial with nested navigation and code, a wider Photo essay with a gallery, and a Series article with PostSeriesBox navigation across three parts. Each workflow reuses the same scroll boundary, header, media controls, and layout component. Contents-enabled examples use the shared TableOfContents block for links, active sections, and nested branch controls.CodeBlockCodeBlock renders syntax-highlighted source with an optional header, copy button, line numbers, highlighted and focused lines, diffs, folding and line selection.10 examples MapAn interactive geographic map with selectable markers, route lines, and camera controls. Powered by MapLibre; applications supply their own style, geography, and prepared data.TabsSwitch between related panels with keyboard-accessible tab controls.3 examples