Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

FAQ

Article questions and answers with semantic disclosure controls and configurable heading hierarchy.

MDX@gaudi/design-system/mdx/FaqView 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 FAQ from '@gaudi/design-system/mdx/Faq';

Usage

<Faq questions={[  {    question: 'Why use FAQ blocks?',    answer: 'They structure repeated article answers.'  }]} />

Examples

Playground

Storybook

API

3 props

Accessibility

Faq uses a semantic definition list and native disclosure buttons. Choose a headingLevel that follows the surrounding article heading without skipping a level.