Components

Accordion

Expandable FAQ-style sections, alone or in a group.

Use Accordion for a single expandable block, or wrap several in AccordionGroup.

Single accordion#

<Accordion title="Deploy" icon="rocket">
  Run `pnpm build` and publish `dist/client`.
</Accordion>

Accordion groups#

Group related items with AccordionGroup. Set defaultOpen to expand the first item (unless a child sets its own defaultOpen).

A docs site generator powered by Vite, React, and MDX.

<AccordionGroup defaultOpen>
  <Accordion title="What is Shiso?">
    A docs site generator powered by Vite, React, and MDX.
  </Accordion>
  <Accordion title="What does it support?">
    Navigation, branding, SEO, and built-in MDX components.
  </Accordion>
</AccordionGroup>

For a single collapsible without group styling, use Expandable.

Properties#

Accordion#

Name	Type	Description
title	ReactNode	Summary label shown in the header.
icon	ReactNode \| string	Lucide icon name or element shown before the title.
defaultOpen	boolean	Whether the accordion starts expanded. Default: false
children	ReactNode	Content revealed when open.

AccordionGroup#

Name	Type	Description
defaultOpen	boolean	When `true`, opens the first child that does not set its own `defaultOpen`. Default: false
children	ReactNode	One or more `Accordion` items. Empty groups render nothing.

Last updated on Aug 8, 2026

Overview Badge