Accordion

Component 38

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 {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "../components/ui/accordion";

export default function AccordionDemo() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <Accordion type="single" collapsible defaultValue="item-1" className="w-80">
        <AccordionItem value="item-1">
          <AccordionTrigger>What is this component?</AccordionTrigger>
          <AccordionContent>
            A fluid accordion with smooth spring animations, collapsible sections, and proximity hover effects when grouped.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>How does it animate?</AccordionTrigger>
          <AccordionContent>
            It uses Framer Motion spring transitions for height changes, chevron rotation, and font weight shifts on hover.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>Is it accessible?</AccordionTrigger>
          <AccordionContent>
            Yes, built on Radix UI Accordion primitives with full keyboard navigation and ARIA attributes.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}