Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Post lists

Blog-post sections using the same Post summaries and article data as the blog pages.

Post@gaudi/design-system/post/PostView in StorybookSource

Image cards, featured articles, horizontal rows, and compact archives reuse one component.

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 Postlists from '@gaudi/design-system/post/Post';

Usage

import { Post } from '@gaudi/design-system';
<ul>  <Post frontMatter={frontMatter} /></ul>

Examples

Post metadata

Storybook

Image cards

Storybook
Storybook

Horizontal rows

Storybook

Compact list

Storybook

API

8 props

Accessibility

Use a meaningful linked title and an appropriate heading level. Content and routing remain application-owned.

ImageImage renders editorial MDX images with caption, dark-mode source, fallback source, and click-to-open modal behavior.PostHeaderArticle title, metadata, timestamps and supporting header controls.PostNavigationPrevious and next article links at the end of a post.PostSeriesBoxList the articles in a series and identify the current entry.TableOfContentsResponsive article navigation with active sections, expandable heading branches, and an optional diagram and table index. Reuses Scrollspy, Collapsible, Link and the shared expansion hook.