Future UI

Animated Accordion

◈ Inputs

Spine timeline accordion with morphing icons and CSS grid-rows transitions.

accordioncollapsecssanimationfaqtimeline

No preview available

Click a node to expand ~ spine timeline with morphing icons

Controls

#8b5cf6

Inputs / React Component

About Animated Accordion

Spine timeline accordion with morphing icons and CSS grid-rows transitions.

Category Inputs
Framework React + TypeScript
Tags accordion, collapse, css, animation, faq, timeline

Install Animated Accordion in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/animated-accordion.json?key=YOUR_LICENSE_KEY"

Usage example

import {
  AnimatedAccordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from './AnimatedAccordion';

export default function Example() {
  return (
    <AnimatedAccordion type="single" defaultValue="item-1" accentColor="#8b5cf6">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. Each trigger uses a button with aria-expanded,
          and the content panel is marked with aria-hidden.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          CSS grid-rows transitions handle smooth expand and
          collapse with no JavaScript measurement needed.
        </AccordionContent>
      </AccordionItem>
    </AnimatedAccordion>
  );
}