Accordions

Examples

Single item

Settings

Theme, language, accessibility preferences.

Vanilla CSS

<div class="accordion">
  <details class="accordion-item">
    <summary class="accordion-summary">Settings</summary>
    <div class="accordion-content">
      Theme, language, accessibility preferences.
    </div>
  </details>
</div>

React

<Accordion>
  <Accordion.Item>
    <Accordion.Summary>Settings</Accordion.Summary>
    <Accordion.Content>
      Theme, language, accessibility preferences.
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Grouped items

Account

Name, email, password.

Notifications

Email digests, push, in-app banners.

Billing

Plan, payment methods, invoices.

Vanilla CSS

<div class="accordion">
  <details class="accordion-item">
    <summary class="accordion-summary">
      <i class="ti ti-user" aria-hidden="true"></i>
      Account
    </summary>
    <div class="accordion-content">Name, email, password.</div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-summary">
      <i class="ti ti-bell" aria-hidden="true"></i>
      Notifications
    </summary>
    <div class="accordion-content">Email digests, push, in-app banners.</div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-summary">
      <i class="ti ti-credit-card" aria-hidden="true"></i>
      Billing
    </summary>
    <div class="accordion-content">Plan, payment methods, invoices.</div>
  </details>
</div>

React

<Accordion>
  <Accordion.Item>
    <Accordion.Summary>
      <IconUser size={16} aria-hidden />
      Account
    </Accordion.Summary>
    <Accordion.Content>Name, email, password.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Summary>
      <IconBell size={16} aria-hidden />
      Notifications
    </Accordion.Summary>
    <Accordion.Content>
      Email digests, push, in-app banners.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Summary>
      <IconCreditCard size={16} aria-hidden />
      Billing
    </Accordion.Summary>
    <Accordion.Content>Plan, payment methods, invoices.</Accordion.Content>
  </Accordion.Item>
</Accordion>

Open by default

Already expanded

Visible without a click.

Vanilla CSS

<details class="accordion-item" open>
  <summary class="accordion-summary">Already expanded</summary>
  <div class="accordion-content">Visible without a click.</div>
</details>

React

<Accordion.Item open>
  <Accordion.Summary>Already expanded</Accordion.Summary>
  <Accordion.Content>Visible without a click.</Accordion.Content>
</Accordion.Item>

Reference

React

Part	Renders	Class
Accordion	<div>	accordion
Accordion.Item	<details>	accordion-item
Accordion.Summary	<summary>	accordion-summary
Accordion.Content	<div>	accordion-content

No props of its own — each part takes the native attributes of the element it renders, so open on Accordion.Item and name for a single-open group both come from <details>. State lives in the DOM; there is no controlled mode.

Vanilla

Class	Effect
accordion	Vertical stack. Rounds the first and last item and collapses the shared borders
accordion-item	On <details>: bordered surface panel
accordion-summary	Row trigger: 1rem/0.75rem padding, text-sm medium, hover tint, trailing chevron that rotates when open
accordion-content	Body: 1rem/0.75rem padding, text-sm, divided from the summary by a top border

Built on <details>/<summary>, so the disclosure needs no JavaScript in either bundle: open starts an item expanded, and a shared name attribute makes a group single-open. The default marker is hidden and replaced by the CSS chevron.

The open/close is animated with interpolate-size: allow-keywords on the item plus a ::details-content transition, which lets height: 0 interpolate to auto; browsers without it toggle instantly. Closed content keeps content-visibility: visible so it still contributes intrinsic width — otherwise a shrink-to-fit parent would reflow narrower on close.