Accordion

A modern, animated React component for rendering a list of collapsible items with smooth transitions, accessibility, and an optional interactive animated gradient. Perfect for FAQs, settings panels, or revealing progressive content.

This component is inspired by the best UX patterns for accordions in today's UI libraries.

Live Preview

Installation

You can install the Accordion component using the following CLI command, or copy the implementation below:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/accordion.json

Import

To use the Accordion component, import it in your code:

typescript-icon
1import Accordion from '@/components/accordion';

Props

The Accordion component accepts the following props:

PropTypeDefaultDescriptionRequired
itemsAccordionItem[]See belowArray of accordion sections to show. Each one includes a title and any React content.No

AccordionItem

typescript-icon
1interface AccordionItem {
2  title: string // The heading for the section
3  content: React.ReactNode // Rendered content when expanded
4}

Example usage

Basic usage (default demo items)

typescript-icon
1<Accordion />

With custom items

typescript-icon
1const items: AccordionItem[] = [
2  {
3    title: 'Getting Started',
4    content: <div>First, install QuartzUI...</div>,
5  },
6  {
7    title: 'Customizable',
8    content: <div>You can pass any React node as content...</div>,
9  },
10  {
11    title: 'Powered by motion and Tabler icons',
12    content: <div>Animations and icons are built-in.</div>,
13  },
14];
15
16<Accordion items={items} />

Features

  • Smooth animation: Expands and collapses with modern height and opacity transitions.
  • Animated pointer gradient: Interactive background gradient that follows your mouse for a lively look.
  • Accessible: All required ARIA roles and keyboard navigation.
  • Single open at a time: Only one section is open, making it perfect for FAQs and clean UI.
  • Custom content: Place any React node inside the content.
  • Works with dark mode: Fully compatible with Tailwind dark mode.

Accessibility Notes

  • Each item uses <button> with aria-expanded, aria-controls, and aria-labelledby.
  • The expanded content is always announced properly for screen readers.
  • Only one accordion section is open at any time (single-open, clean UX).

Customization

  • Change animation duration or timing by editing the transition or motion variants.
  • Gradient colors, stops, and radius (GRADIENT_RADIUS) are easily customized.
  • Uses Tailwind for style and dark mode out-of-the-box.

Troubleshooting

  • If the gradient or animation is missing, check that you have all needed dependencies and your environment supports CSS-in-JS.
  • Custom content must be a React node (JSX), not a plain string.