Accordion (Animated)
An animated accordion that uses motion-powered icons from the Iconiq library to bring each section to life.
Use it to group related content into collapsible sections, each with its own animated icon that responds to user interaction.
Install using the shadcn CLI to add the accordion component to your application, then replace the icons with any animated icons from the Iconiq library.
Preview
Hover and click the sections to expand and collapse them while the icons animate in response.
Monitor response times, traffic spikes, and throughput to keep your product fast under real-world workloads.
Props
accordion-animatedProps
- items
- Array of sections to render. Each item includes
value,title, optionalsubtitle,content, and an animatedicon. - defaultValue
- The initially opened item values (for example
["documents"]). - className
- Optional classes applied to the accordion root for custom spacing or borders.