OOratiq

Accordion

Ready

Vertically stacked collapsible sections.

Requires radix-ui

We offer standard (5–7 days), express (2–3 days), and overnight shipping. Free shipping on international orders.

Installation

$ npx @oratiq-js/ui add accordion

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

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

Single and multiple

The trigger's chevron rotates on a vertical axis, so it must not be mirrored under RTL — unlike the horizontal chevrons in Breadcrumb and Pagination. Direction-aware mirroring is per-glyph, not blanket.

Accessibility

  • Triggers are buttons inside headings, so screen readers can navigate by heading.
  • aria-expanded reflects state; the panel is linked with aria-controls.
  • Up and down arrows move between triggers; Home and End jump to the ends.
  • Height animation reads the measured content height from a Radix CSS variable, so it works with dynamic content.

View source on GitHub → components/ui/accordion.tsx