Animated Accordion

Installation

npx shadcn@latest add https://ui.thilina.dev/r/animated-accordion.json

The height animation uses the animate-accordion-down and animate-accordion-up utilities from tw-animate-css, which ship with the standard shadcn/ui Tailwind v4 setup.

Usage

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

export default function Page() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes, it is Radix underneath.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Same parts and API as the shadcn/ui Accordion. The panel height eases open on the Radix height variable while the revealed content blur-fades in a beat behind it, so the reveal reads as one motion.

Props

All parts accept their Radix Accordion props unchanged (type, collapsible, defaultValue, value, onValueChange, disabled).

Accessibility

Radix Accordion underneath: button semantics on triggers, arrow-key navigation between items, and aria-expanded state. Under prefers-reduced-motion the panels snap open and closed with no easing or blur.