Image

Image renders editorial MDX images with caption, dark-mode source, fallback source, and click-to-open modal behavior.

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

Usage

<Image  src='/static/images/art/0.svg'  fallback='/static/images/art/1.svg'  darkSrc='/static/images/art/5.svg'  alt='Lavender gradient artwork'  caption='A study in lavender and light.'  width={420}  height={236}/>

Examples

Playground

Storybook

Fallback

Storybook

API

10 props

Accessibility

Image keeps article images semantic with alt text, figure captions, and a button trigger for the modal preview.

AsideSupporting article content outside the main reading flow.CalloutHighlight an article note, tip, warning or error while preserving readable prose.ChartChart is the MDX adapter for the Charts collection: authors write <Chart type=…> (or a chart by name) in an article and get the same framed, accessible chart an application renders from @gaudi/design-system/charts.CitationCitation documents the blog citation authoring flow and the Gaudi runtime components that hydrate generated citation links.CitationTrackerKeep bibliography back-links associated with the last visited citation.CodeArticle code rendered through the Core CodeBlock: CodeFence maps MDX pre, CodeGroup renders ::: code-group fences as tabs.