Accordion

Basic usage

The simplest way to create a collapsible section. Pass a title prop and put your content inside:

<Accordion title="How do I connect a custom domain?">
  Open **Settings → Domains**, add your domain, then create a CNAME record
  pointing to `cname.nookdocs.site`. SSL is provisioned automatically.
</Accordion>

Stack multiple accordions for an FAQ-style layout:

<Accordion title="Can I use my own GitHub repo?">
  Yes. Install the NookDocs GitHub App on your repo, then connect it from the dashboard.
</Accordion>

<Accordion title="How does search work?">
  Postgres tsvector full-text search out of the box. AI-powered semantic search ships in Phase 5.
</Accordion>

With description

Add a subtitle below the trigger title:

<Accordion title="What is NookDocs?" description="A quick overview of the platform">
  NookDocs is a documentation platform that turns your MDX files into
  beautiful, searchable docs sites.
</Accordion>

With icon

Add an icon to the trigger. Supports Lucide, Tabler, and Font Awesome icons:

<Accordion title="Installation" icon="download">
  Run `npm install @nookdocs/sdk` to get started.
</Accordion>

<Accordion title="Configuration" icon="settings">
  Edit `nookdocs.config.json` with your project name and navigation.
</Accordion>

Custom anchor ID

Set id to create a stable hash link target for the accordion. Readers can link directly to a specific FAQ entry or section:

<Accordion title="How does billing work?" id="faq-billing">
  We charge monthly based on active projects. See the pricing page.
</Accordion>

Link to it with [billing FAQ](#faq-billing).

Default open

Set defaultOpen to expand the accordion on first render:

<Accordion title="Important notice" defaultOpen>
  This section is visible by default.
</Accordion>

AccordionGroup

Wrap multiple accordions in an <AccordionGroup> to render them as a connected, visually grouped block:

<AccordionGroup>
  <Accordion title="Getting started" icon="rocket">
    Sign up, connect your repo, and deploy in under 5 minutes.
  </Accordion>
  <Accordion title="Custom domain" icon="globe">
    Add a CNAME record pointing to `cname.nookdocs.site`.
  </Accordion>
  <Accordion title="API access" icon="key">
    Generate an API key from the dashboard settings.
  </Accordion>
</AccordionGroup>

Nested content

Accordion content can include any component — code blocks, callouts, cards:

<Accordion title="Advanced configuration" icon="settings">
  <Warning>
    These settings are for power users only.
  </Warning>

  ```json
  {
    "experimentalFeature": true,
    "debugMode": false
  }
  ```
</Accordion>

Grouped accordions (advanced)

For coordinated behavior (only one open at a time, or multiple), use the compound API with AccordionItem, AccordionTrigger, and AccordionContent:

<Accordion type="single" collapsible>
  <AccordionItem value="domain">
    <AccordionTrigger>How do I connect a custom domain?</AccordionTrigger>
    <AccordionContent>
      Open **Settings → Domains**, add your domain, then create a CNAME record
      pointing to `cname.nookdocs.site`. SSL is provisioned automatically.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="github">
    <AccordionTrigger>Can I use my own GitHub repo?</AccordionTrigger>
    <AccordionContent>
      Yes. Install the NookDocs GitHub App on your repo, then connect it from
      the dashboard.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple items open at once

Set type="multiple" to allow more than one item to be expanded simultaneously. Useful when readers might want to compare two sections side by side.

<Accordion type="multiple">
  <AccordionItem value="a">
    <AccordionTrigger>Option A</AccordionTrigger>
    <AccordionContent>Content for option A</AccordionContent>
  </AccordionItem>
  <AccordionItem value="b">
    <AccordionTrigger>Option B</AccordionTrigger>
    <AccordionContent>Content for option B</AccordionContent>
  </AccordionItem>
  <AccordionItem value="c">
    <AccordionTrigger>Option C</AccordionTrigger>
    <AccordionContent>Content for option C</AccordionContent>
  </AccordionItem>
</Accordion>

Default expanded items

Use defaultValue to pre-open one or more items on first render. Pass a string in single mode, or an array in multiple mode.

<Accordion type="single" defaultValue="install">
  <AccordionItem value="install">
    <AccordionTrigger>Installation (open by default)</AccordionTrigger>
    <AccordionContent>npm install @nookdocs/sdk</AccordionContent>
  </AccordionItem>
  <AccordionItem value="usage">
    <AccordionTrigger>Usage</AccordionTrigger>
    <AccordionContent>...</AccordionContent>
  </AccordionItem>
</Accordion>

<Accordion type="multiple" defaultValue="install,usage">
  ...
</Accordion>

Single mode: collapsible

In single mode, by default the active item cannot be closed by clicking again — there's always exactly one open. Set collapsible to allow closing the open item:

<Accordion type="single" collapsible>
  ...
</Accordion>

When to enable: FAQ pages where the reader might want to "close" the current question. When NOT to enable: forced-disclosure flows like a wizard where one step must always be visible.

Nested content

Accordion content can include any other component — code blocks, callouts, cards, even nested accordions:

<Accordion type="single" collapsible>
  <AccordionItem value="advanced">
    <AccordionTrigger>Advanced configuration</AccordionTrigger>
    <AccordionContent>
      <Warning>
        These settings are for power users only.
      </Warning>

      ```json
      {
        "experimentalFeature": true
      }
      ```
    </AccordionContent>
  </AccordionItem>
</Accordion>

Props

Accordion (simple API)

AccordionGroup

Accordion (compound API)

AccordionItem

AccordionTrigger / AccordionContent

When to use

• FAQs — Classic use case, keeps the page scannable

• Advanced options — Hide rarely-used settings behind a disclosure

• Long detail sections — Summary visible, details one click away

For navigable table-of-contents, use the sidebar — not accordions.