Accordion

A vertically stacked set of disclosure sections, styled after the shadcn / ngrok.com accordion.

Its defining feature: collapsed content is never removed from the DOM. Closed sections keep their content with hidden="until-found" (which applies content-visibility: hidden rather than unmounting it), so the browser's find-in-page (⌘F / Ctrl+F) can find text inside a closed section and automatically expand it. The beforematch event — fired right before the browser reveals a match — syncs that reveal back into the accordion's state. It's built on plain <div> and <button> elements (matching native <details>/<summary> accessibility: the item is a role="group" and the trigger a <button aria-expanded>), so a section header can be any layout.

Add a CNAME record at your DNS provider that targets the CNAME value shown on your reserved domain, then start your tunnel with the matching --domain flag.

Yes. ngrok can validate webhook signatures from providers like Stripe, GitHub, and Slack at the edge before the request ever reaches your service.

The free plan includes ephemeral endpoints and one reserved domain — enough to demo a deployment or prototype an integration.

1import { Accordion } from "@ngrok/mantle/accordion";2 3<Accordion.Root type="single" defaultValue="dns">⋯4	<Accordion.Item value="dns">⋯5		<Accordion.Trigger>⋯6			How do I point my custom domain at an ngrok endpoint?7			<Accordion.TriggerIcon />8		</Accordion.Trigger>9		<Accordion.Content>Add a CNAME record at your DNS provider…</Accordion.Content>10	</Accordion.Item>11</Accordion.Root>;

note

Collapse every section above, then press ⌘F and search for a word that only appears inside a closed section (for example "Stripe" or "prototype"). The matching section expands on its own. Find-in-page reveal requires Chrome 97+, Firefox 139+, or Safari 26.2+; older browsers fall back to a normal collapsed section.

When to use

FAQ pages, settings panels, and docs where users scan headings and drill into one topic at a time.
Long-form content you still want discoverable: because collapsed sections stay in the DOM, find-in-page matches text inside them and auto-expands the section.
Dense layouts — like the dashboard's Traffic Policy GUI — where each section needs its own header controls beside the toggle.

When not to use

Switching between mutually exclusive views of the same region — use Tabs instead.
A single, always-relevant block of content — don't hide it behind a toggle; just render it.
Content a user must not miss — a collapsed section is easy to overlook, so keep critical information visible.

Examples

Multiple sections open at once

Use type="multiple" to let any number of sections be open at once. Pass defaultValue (uncontrolled) or value + onValueChange (controlled) as a string[].

This section starts expanded.

Open me without closing the first one.

1<Accordion.Root type="multiple" defaultValue={["one"]}>⋯2	{/* …items… */}3</Accordion.Root>

Controlled

Drive the open state yourself with value + onValueChange when another control needs to open or collapse sections. In type="single" the value is a string (use "" for "nothing open"); in type="multiple" it's a string[].

Connect a processor and manage payouts.

Invite teammates and assign roles.

Open section: payments

1import { Accordion } from "@ngrok/mantle/accordion";2import { useState } from "react";3 4function Settings() {⋯5	const [value, setValue] = useState("payments");6 7	return (8		<Accordion.Root type="single" value={value} onValueChange={setValue}>⋯9			<Accordion.Item value="payments">⋯10				<Accordion.Trigger>⋯11					Payments12					<Accordion.TriggerIcon />13				</Accordion.Trigger>14				<Accordion.Content>Connect a processor and manage payouts.</Accordion.Content>15			</Accordion.Item>16			{/* …items… */}17		</Accordion.Root>18	);19}

Custom header with an inline action

The dashboard's Traffic Policy GUI puts a monospace label, a count badge, and an always-visible Add Rule action in each header. Because the Item is a plain <div> and the Trigger is a real <button>, the header is just a flex row holding the Trigger, a divider, and the action button as siblings — a clean composition with no overlay and no absolute positioning. The Trigger toggles its section; the Add Rule button is an independent sibling that never toggles it; and the Content spans full-width below. Override the defaults (space-y-* on Root, border-b-0 on Item, w-auto on Trigger so it sizes to its label) for the spaced-card look.

Proident irure consequat Lorem incididunt ullamco.

Excepteur amet laboris occaecat anim minim reprehenderit.

This phase does not have any rules defined

1// The header is a plain flex row: the Trigger button, a divider, and the action2// button are siblings — no overlay, no absolute positioning. The Add Rule button3// is outside the Trigger, so it never toggles the section; Content is full-width.4<Accordion.Root type="multiple" className="space-y-2.5">⋯5	<Accordion.Item value="on_tcp_connect" className="border-b-0">⋯6		<div className="mx-4 flex items-center gap-2">⋯7			<Accordion.Trigger className="w-auto gap-1.5">⋯8				<span className="font-mono text-sm font-medium">on_tcp_connect</span>9				<Badge appearance="muted" color="neutral" className="rounded-full">⋯10					311				</Badge>12				<Accordion.TriggerIcon />13			</Accordion.Trigger>14			<Separator orientation="horizontal" className="flex-1" />15			<Button type="button" appearance="link" icon={<PlusIcon />}>⋯16				Add Rule17			</Button>18		</div>19		<Accordion.Content>⋯20			<Card.Root>⋯21				<Card.Body>Proident irure consequat Lorem incididunt ullamco.</Card.Body>22			</Card.Root>23		</Accordion.Content>24	</Accordion.Item>25</Accordion.Root>

Custom indicator icon

Pass svg to Accordion.TriggerIcon to replace the default caret. The indicator still rotates 180° on open; override its className to change that — here a right caret rotates 90° into a downward one for a file-tree feel.

Inspect recent requests, status codes, and latency.

Track throughput and error rates over time.

1import { CaretRightIcon } from "@phosphor-icons/react/CaretRight";2 3<Accordion.Trigger>⋯4	Request logs5	<Accordion.TriggerIcon⋯6		svg={<CaretRightIcon weight="bold" />}7		className="group-data-[state=open]:rotate-90"8	/>9</Accordion.Trigger>;

Accessibility

The accessibility mirrors a native <details>/<summary>: each Accordion.Item is a role="group", and each Accordion.Trigger is a real <button> whose aria-expanded reflects its section's open state. Because the trigger is a genuine button, keyboard support is the browser's own — there is no custom key handling to get wrong:

Tab / Shift+Tab — move focus between triggers (and any other focusable controls in a header).
Enter / Space — toggle the focused section.

Collapsed content stays in the DOM but is hidden via content-visibility, so it leaves the accessibility tree exactly like a closed <details> — and the browser's find-in-page can still match and reveal it. The open/close slide respects prefers-reduced-motion, and the component is SSR-safe (the hidden="until-found" enhancement only activates in browsers that support it).

Composition

Compose the parts of an Accordion together to build your own:

Accordion.Root└── Accordion.Item    ├── Accordion.Trigger    │   └── Accordion.TriggerIcon    └── Accordion.Content

API Reference

The Accordion owns its open/closed state and stays in sync whether a section is opened by a click, by keyboard, or by the browser's find-in-page.

Accordion.Root

Owns the accordion state and renders a wrapping <div> (or your own element via asChild). The type prop is a discriminated union that shapes the open value:

type="single" — at most one section open at a time. value / defaultValue are a string (use "" for none), and onValueChange receives the newly open value.
type="multiple" — any number open. value / defaultValue are a string[], and onValueChange receives the new list.

Provide value + onValueChange for controlled usage, or defaultValue for uncontrolled usage. Accepts all <div> props, plus:

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`		Required. Whether at most one section may be open (`"single"`) or any number (`"multiple"`).
`value?`	`string \| string[]`		The controlled open value(s). A `string` in `single` mode, a `string[]` in `multiple` mode.
`defaultValue?`	`string \| string[]`		The initial open value(s) when uncontrolled. Typed per `type`, like `value`.
`onValueChange?`	`(value: string) => void \| (value: string[]) => void`		Called when the open value(s) change. Receives a `string` in `single` mode, a `string[]` in `multiple`.
`asChild?`	`boolean`	`false`	Render the single child element as the container instead of a `<div>`, merging container props onto it.

Accordion.Item

A single collapsible section, rendered as a <div role="group"> — the role a native <details> carries. Its open state is derived from Root. Because the item is a plain <div>, its header can be any layout, including a flex row with the Trigger beside a separate, non-toggling action button. Accepts all <div> props, plus:

Prop	Type	Default	Description
`value`	`string`		Required. Unique identifier for this item within its accordion.

Accordion.Trigger

The clickable header that toggles its section, rendered as a <button aria-expanded> — the disclosure semantics a native <summary> provides, via a real button so the role is consistent across browsers. Defaults to full-width with the TriggerIcon pushed to the trailing edge; set w-auto when placing it in a custom header row. A consumer onClick runs first and the section still toggles afterward (calling preventDefault() does not stop the toggle). Accepts all <button> props except type, which is always "button".

Accordion.TriggerIcon

The indicator icon. Defaults to a downward caret that rotates 180° when its section opens. Accepts all Icon props (notably className and style), plus:

Prop	Type	Default	Description
`svg?`	`ReactNode`	a downward caret	The icon to render. Rotation-on-open still applies — override `className` to change the motion.

Accordion.Content

The collapsible body, rendered as a <div> that is always present in the DOM. When collapsed (in supporting browsers) it carries hidden="until-found" so its text stays discoverable by find-in-page, and a beforematch listener opens the section when the browser reveals a match. It is flow content, so it may contain anything — including interactive elements (buttons, links, inputs) or a nested Accordion. Accepts all <div> props.