Tabs and accordions

Components4 min read||

Use tabs to organize alternative content (like platform-specific instructions) and accordions for expandable sections (like FAQs).

Tabs

Tabs let readers switch between related content panels without leaving the page:

<wc-tabs> <wc-tab label="macOS"> Install with Homebrew: \```bash brew install node \``` </wc-tab> <wc-tab label="Linux"> Install with your package manager: \```bash sudo apt install nodejs \``` </wc-tab> <wc-tab label="Windows"> Download the installer from [nodejs.org](https://nodejs.org). </wc-tab> </wc-tabs>

Install with Homebrew:

brew install node

Install with your package manager:

sudo apt install nodejs
Download the installer from nodejs.org.
The text displayed on the tab button.

When to use tabs

  • Platform-specific instructions (macOS, Linux, Windows)
  • Package manager alternatives (npm, pnpm, yarn)
  • Language variants (JavaScript, Python, Go)
  • Framework-specific examples (React, Vue, Angular)

Accordions

Accordions hide content behind a clickable title. Readers expand only the sections they need:

<wc-accordion title="How do I install DocsLit?"> Run `npm install -g docslit` or use `npx` to run it without installing. </wc-accordion> <wc-accordion title="What Node.js version do I need?"> DocsLit requires Node.js 24.0.0 or later. </wc-accordion> Run npm install -g docslit or use npx to run it without installing. DocsLit requires Node.js 24.0.0 or later. The clickable heading text that toggles the section. Set to true to expand the accordion by default.

Accordion groups

Wrap accordions in wc-accordion-group for a visually connected set with continuous borders:

<wc-accordion-group> <wc-accordion title="Can I use custom components?"> Yes. Place `.js` files in the `components/` directory and they load automatically. </wc-accordion> <wc-accordion title="Does DocsLit support versioning?"> Yes. Configure `versions` in `docslit.json` to maintain docs for multiple releases. </wc-accordion> <wc-accordion title="Can I deploy to any hosting provider?"> Yes. The `docslit build` output is a standard static site that works anywhere. </wc-accordion> </wc-accordion-group> Yes. Place .js files in the components/ directory and they load automatically. Yes. Configure versions in docslit.json to maintain docs for multiple releases. Yes. The docslit build output is a standard static site that works anywhere.

Expandable sections

Use wc-expandable for a simpler collapsible section:

<wc-expandable title="Show advanced options"> These options are for advanced users who need fine-grained control over the build output. - `--offline` — Build a single HTML file - `--out <dir>` — Custom output directory </wc-expandable>

These options are for advanced users who need fine-grained control over the build output.

  • --offline — Build a single HTML file
  • --out <dir> — Custom output directory

Familiar names

These Mintlify-style tag names work directly:

MDX-style Resolves to Notes
<Tabs> <wc-tabs>
<Tab> <wc-tab> title="..." is renamed to label="...".
<Accordion> <wc-accordion>
<AccordionGroup> <wc-accordion-group>
<Expandable> <wc-expandable>