Accordion

Component 11

About

A fluid accordion with spring animations, collapsible sections, proximity hover effects in grouped mode, and smooth content transitions. Built on Radix UI with Framer Motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Accordion to your project and fits it to your theme.

Code

How Accordion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  AccordionGroup,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "../components/ui/accordion";

export default function AccordionGroupedDemo() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <AccordionGroup type="single" collapsible defaultValue="item-1" className="w-80">
        <AccordionItem value="item-1" index={0}>
          <AccordionTrigger>Getting Started</AccordionTrigger>
          <AccordionContent>
            Install the package and import the components. The grouped mode adds a proximity hover effect that follows your cursor between items.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2" index={1}>
          <AccordionTrigger>Customization</AccordionTrigger>
          <AccordionContent>
            Supports single and multiple expansion modes, custom animations via Framer Motion springs, and flexible styling through className props.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3" index={2}>
          <AccordionTrigger>Proximity Hover</AccordionTrigger>
          <AccordionContent>
            The grouped accordion tracks mouse position to highlight the nearest item, creating a fluid interactive experience.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-4" index={3}>
          <AccordionTrigger>Accessibility</AccordionTrigger>
          <AccordionContent>
            Full keyboard support with focus-visible ring, screen reader compatibility, and proper ARIA roles via Radix UI primitives.
          </AccordionContent>
        </AccordionItem>
      </AccordionGroup>
    </div>
  );
}