Accordion
Collapsible sections for progressive disclosure — FAQ lists, long lookup tables, optional detail sections. Native ARIA, smooth open/close animation.
Accordions hide content until the reader asks for it. Use them when a page needs to show many optional details — FAQs, troubleshooting trees, large prop tables — without overwhelming the reader up front.
Interactive demo
What is Publier?
Publier is a CLI-distributed content-site toolkit for technical companies. Write MDX + YAML, drop in your logo, run publier build. You get docs, blog, marketing, changelog, and status pages with a single command.
How is Publier different from other docs platforms?
An open toolkit distributed via CLI. Own your content, your domain, and your deploy — no vendor lock-in, no SaaS subscription, no cloud dependency at runtime.
Which hosts does Publier deploy to?
Anywhere you can serve static HTML: Vercel, Cloudflare Pages, Netlify, GitHub Pages, S3 + CloudFront, a Raspberry Pi, or python -m http.server. The build output is just files.
Can I use Publier with my existing Astro site?
Yes — Publier ships as an Astro integration. Add it to your existing astro.config.ts’s integrations[] and you get the docs layout, search, MDX primitives, and theme tokens without migrating.
import { Accordion, AccordionItem } from '@publier/primitives';
<Accordion> <AccordionItem title="What is Publier?" open> Publier is a CLI-distributed content-site toolkit… </AccordionItem> <AccordionItem title="How is Publier different from other docs platforms?"> An open toolkit distributed via CLI. Own your content, your domain, and your deploy… </AccordionItem> <AccordionItem title="Which hosts does Publier deploy to?"> Anywhere you can serve static HTML… </AccordionItem></Accordion>Starting open
Pass open to have an item expanded on first render. Multiple items can be open at once — the accordion is stateless above the item level, so each <AccordionItem> owns its own open state.
This one starts open
Useful for the most important item in a list — the one a first-time reader should see without clicking.
These two start closed
Click the header to expand.
Multiple items can be open simultaneously
Each item’s state is independent — opening one doesn’t close the others.
<Accordion> <AccordionItem title="This one starts open" open> Useful for the most important item in a list… </AccordionItem> <AccordionItem title="These two start closed"> Click the header to expand. </AccordionItem></Accordion>Rich content inside items
Item bodies accept any MDX — paragraphs, code blocks, callouts, lists, even nested components:
Snippet with code and a callout
Install:
pnpm add @publier/primitivesProps
<Accordion>
Stateless wrapper. No props beyond class. Just contains <AccordionItem> children.
<AccordionItem>
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Header text shown on the summary trigger. Required. |
open | boolean | false | Whether the item starts expanded. |
name | string | — | Shared name for an exclusive-open group — browsers enforce that only one item with the same name is open at a time (Chrome 120+, Firefox 126+, Safari 17.4+). |
Body content passes through the default slot.
Behaviour
- Each item is a native
<details>/<summary>element — zero JavaScript, zero hydration. - Smooth open/close animation works at any content height.
- Chevron rotates 180° when an item is open.
- Items toggle independently by default; pass the same
nameto every sibling to create an exclusive-open group (accordion pattern) without any script. - Keyboard and screen-reader accessible through the native
<details>/<summary>semantics.