Accordion

"use client";import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/registry/okibi/ui/accordion";export default function AccordionDemo() {  return (    <Accordion type="single" collapsible className="w-80 max-w-full">      <AccordionItem value="grid">        <AccordionTrigger index="01">Sec Grid</AccordionTrigger>        <AccordionContent>          Perimeter secure. All four nodes reporting in.        </AccordionContent>      </AccordionItem>      <AccordionItem value="ice">        <AccordionTrigger index="02">ICE Layer</AccordionTrigger>        <AccordionContent>          Black ICE armed across the subnet. No intrusion detected.        </AccordionContent>      </AccordionItem>      <AccordionItem value="uplink">        <AccordionTrigger index="03">Net Uplink</AccordionTrigger>        <AccordionContent>          Uplink locked to grid reference. Handshake verified.        </AccordionContent>      </AccordionItem>    </Accordion>  );}

Installation

npm install @radix-ui/react-accordion lucide-react

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section one</AccordionTrigger>
    <AccordionContent>Disclosure body…</AccordionContent>
  </AccordionItem>
</Accordion>

Anatomy

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">    {/* unique value per row */}
    <AccordionTrigger index="01" /> {/* mono index is a Trigger prop, not Item */}
    <AccordionContent />
  </AccordionItem>
</Accordion>

API Reference

Accordion

AccordionItem

AccordionTrigger

Accessibility

• Wraps Radix Accordion, which renders each trigger inside an AccordionPrimitive.Header and wires the button/region disclosure semantics and data-state.
• Full keyboard model from the primitive: Enter/Space toggle a row, arrow keys move between triggers, Home/End jump to the first/last.
• Triggers carry the standard square signal focus ring (ring-2 ring-ring with offset); disabled items are skipped and dimmed to opacity-60.
• The chevron reticle is decorative (aria-hidden) and rotates via data-state=open, so its motion conveys nothing assistive tech needs.
• type='single' allows one open row (add collapsible to close it); type='multiple' lets several stay open — the toggle state is announced by Radix.

Guidelines

Do

• Put the mono index on AccordionTrigger, where it renders ahead of the label.
• Add collapsible to a type='single' accordion when the open row should be closable back to all-collapsed.
• Give each AccordionItem a unique value so open state tracks correctly.

Don't

• Do not pass index to AccordionItem — it is an AccordionTrigger prop and is ignored on the item.
• Do not bury primary actions inside a collapsed row; the content is hidden until the user opens it.
• Do not re-add JS motion — the height keyframes are CSS-only and already reduced-motion gated.