Core Primitives HTML5 <details> interpolate-size Zero-JS Tailwind v4

Accordion

Pure HTML <details> and <summary> accordion with smooth height expansion animation and animated rotating chevrons.

Interactive Preview

Live Edit & Viewport Resizer

Variants:

Installation

Add the Accordion component to your project via CLI:

terminal bash

npx plain-ui add accordion

Features

✓ 100% Zero-JS with native HTML5 <details name='faq-group'>
✓ Native single-open exclusivity using name attribute
✓ Smooth CSS height expansion animation via interpolate-size: allow-keywords
✓ Custom rotating chevron indicator on open state

Variants & Examples

Multi-Open Accordion

Allows multiple accordion panels to remain open simultaneously.

accordion-multi-open-accordion.html html

<div class="max-w-md mx-auto space-y-2 p-4">
  <details class="group rounded-lg border border-zinc-200 dark:border-zinc-800 p-3 bg-zinc-50 dark:bg-zinc-900">
    <summary class="flex items-center justify-between font-semibold text-sm cursor-pointer list-none">
      <span>Database Configuration</span>
      <span class="text-zinc-400 group-open:rotate-90 transition-transform">›</span>
    </summary>
    <p class="mt-2 text-xs text-zinc-500">PostgreSQL 16 with pgvector extension enabled.</p>
  </details>
  <details class="group rounded-lg border border-zinc-200 dark:border-zinc-800 p-3 bg-zinc-50 dark:bg-zinc-900">
    <summary class="flex items-center justify-between font-semibold text-sm cursor-pointer list-none">
      <span>Cache Settings</span>
      <span class="text-zinc-400 group-open:rotate-90 transition-transform">›</span>
    </summary>
    <p class="mt-2 text-xs text-zinc-500">Redis cluster with 15-minute TTL caching.</p>
  </details>
</div>

Attributes & Classes

Attribute / Prop	Type	Default	Description
name	string	-	Grouping name attribute for exclusive single-panel opening.
open	boolean	false	Specifies that details section should be visible by default.

Accessibility & Keyboard Navigation

• Native HTML5 <details> and <summary> elements provide built-in screen reader support and keyboard Enter/Space expansion.

← Bento Grid Tabs →