Accordion

Navigation

Expandable/collapsible sections to organize content.

Props

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Allow one or many open sections.
`defaultValue`	`string \| string[]`	—	Default open item(s).

Examples

DDS is a minimal design system for Nuxt 4, built with TypeScript and Tailwind CSS.

Run npm install design-system-antoinegourgue and add it to your nuxt.config.ts modules array.

Yes, all components follow WAI-ARIA patterns with keyboard navigation support.

vue

<DsAccordion type="single">
  <DsAccordionItem value="item-1" title="What is DDS?">
    DDS is a minimal design system for Nuxt 4.
  </DsAccordionItem>
  <DsAccordionItem value="item-2" title="How do I install it?">
    Run npm install design-system-antoinegourgue.
  </DsAccordionItem>
</DsAccordion>

Skeleton

Use DsAccordionSkeleton as a loading placeholder while content is being fetched.

3 items

vue

<DsAccordionSkeleton :items="3" />

4 items

vue

<DsAccordionSkeleton :items="4" />

With content

vue

<DsAccordionSkeleton
  :items="3"
  showContent
/>

Accessibility

Trigger uses aria-expanded on the button.
Content uses role="region" linked to its trigger.

VirtualList

Breadcrumb