Back to Registry

Animated Accordion

input

Collapsible FAQ sections with spring height transitions.

Colorblue-500
Width
Shadow

Live Preview

Kinetik is a curated registry of physics-driven, copy-paste UI components built with Framer Motion, Tailwind CSS, and TypeScript.
Install via CLI
npx shadcn@latest add https://kinetik.dev/r/animated-accordion.json

Requires shadcn CLI. Auto-installs deps and copies the component into your project.

Manual Install
npm add framer-motion lucide-react

Then copy the source code below into your project.

Usage
import { AnimatedAccordion } from '@/app/components/animated-accordion';

Source

'use client';

export function AnimatedAccordion() {
  // copy from registry component source
}

Dependencies

framer-motionlucide-react