Accordion

Collapsible sections for FAQs and optional detail.

Accordions hide secondary content behind a clickable title. Group several Accordion items inside Accordions so they share borders and spacing.

Usage#

Does PzzaDocs work with the Pages Router?

No. It depends on React Server Components and the async params of the App Router, so it supports Next.js 16 App Router projects only.

Can I use Tailwind alongside it?

Yes. The package stylesheet is plain CSS with pd- prefixed classes and does not depend on or conflict with a utility framework.

Where is the search index served from?

From the route handler you create at app/api/search/route.ts. It returns source.getSearchIndex() as JSON and can be statically generated.

mdx

<Accordions>
  <Accordion title="Does PzzaDocs work with the Pages Router?">
    No. It depends on React Server Components and the async `params` of the App Router.
  </Accordion>
  <Accordion title="Can I use Tailwind alongside it?">
    Yes. The package stylesheet is plain CSS with `pd-` prefixed classes.
  </Accordion>
  <Accordion title="Where is the search index served from?">
    From the route handler at `app/api/search/route.ts`.
  </Accordion>
</Accordions>

Rich content#

Accordion bodies accept any Markdown or MDX, including code blocks and other components.

Show the search route

app/api/search/route.ts

import { source } from "@/lib/source";

export const dynamic = "force-static";

export async function GET() {
  return Response.json(await source.getSearchIndex());
}

mdx

<Accordions>
  <Accordion title="Show the search route">

```ts title="app/api/search/route.ts"
import { source } from "@/lib/source";

export const dynamic = "force-static";

export async function GET() {
  return Response.json(await source.getSearchIndex());
}
```

  </Accordion>
</Accordions>

Props#

Accordions#

Prop	Type	Description
`children`	`ReactNode`	One or more `Accordion` elements.

Accordion#

Prop	Type	Description
`title`	`ReactNode`	Clickable header. Required.
`defaultOpen`	`boolean`	Expanded on first render. Defaults to `false`.
`children`	`ReactNode`	Collapsible body.