Docs

Molecules

Accordion

Vertically stacked collapsible section headers.

5 examplesOverlay ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { Accordion } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Single Open (FAQ)

One panel open at a time, automatically collapsing others.

Single Open (FAQ) rendered preview

Multiple Open Sections

Allow several panels to stay expanded simultaneously.

Multiple Open Sections rendered preview

Free standard shipping on orders over $50.

30-day return window on unused items.

With Leading Icons

Pair each accordion trigger with a visual icon.

With Leading Icons rendered preview

Disabled Item

Accordion item in a non-interactive disabled state.

Disabled Item rendered preview

Includes 3 active projects, community support, and standard SLA.

Nested Rich Controls

Interactive settings inputs and switches inside accordion panels.

Nested Rich Controls rendered preview

Overview

Accordion is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.

Accessibility Details

  • Uses semantic HTML or Radix primitives where applicable.
  • Interactive components expose keyboard/focus behavior through native controls or Radix.
  • ARIA roles, states, and labels are applied where relevant.

Styling

  • Uses semantic design tokens such as bg-background, text-foreground, border-border, bg-popover, and text-muted-foreground.
  • Motion-heavy components include reduced-motion compatible classes where applicable.

Accessibility & Keyboard

Accordion adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/accordion.json