Dev Design LibraryAnimated Accordion Components
Dev Design Library indexes 112 Animated accordion components from 38 open-source UI libraries, with the most coming from Watermelon UI, FLX UI, ReUI, sv-efferd and Spectrum UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the accordion components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Accordion components belong to the Data display group.
Accordionshadcn/ui · ReactA vertically stacked set of interactive headings that each reveal a section of content.
Accordion GalleryReact Bits · ReactPanels expand on hover or focus, revealing parallax imagery and captions.
AccordionChakra UI · ReactUsed to show and hide sections of related content on a page
AccordionHeroUI · ReactA collapsible content panel for organizing information in a compact space
AccordionReact Spectrum · ReactA group of disclosures that can be expanded and collapsed.
Accordiontransitions.dev · HTML/CSS
A basic single-expand accordionReUI · ReactA basic single-expand accordion
Accordion LoaderAmicro Micro Transitions · ReactAccordion Loader loading animation.
AccordionLobe UI · ReactA vertically stacked set of interactive headings whose items reveal titled content with controlled or uncontrolled…
disclosure-groupIntent UI · Reactdisclosure-group
Bouncy AccordionbeUI · ReactSingle-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.
AccordionSpectrum UI · Reactcomponent for the Accordion
Faq AccordionVengeance UI · ReactAnimated expanding FAQ list
AccordionFluid Functionalism · ReactCollapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode…
AccordionPanel UI · React NativeCollapsible sections with single or multiple selection.
Accordion FoldPixel Perfect · ReactA paper map of hinged panels that folds itself up like an accordion and flattens back out.
AccordionOSuselayouts · ReactInteractive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay…
Accordion SpringKinetics · HTML/CSSMax-height transition with rotating chevron
AccordionGreatUI · React
AccordionNexvyn UI · ReactA vertically stacked set of interactive headings that each reveal a section of content, with a grid-rows unfold…
AccordionShark UI · ReactA collapsible for displaying content.
AccordionSona UI · ReactAn accessible Base UI accordion with controlled and uncontrolled state, four visual variants, interruptible disclosure…
AccordionWatermelon UI · React
FAQ Fivesv-efferd · SvelteA searchable FAQ page with category filters, empty state handling, and structured dividers.
AccordionArc Library · ReactProgressively reveal supporting information in place.
AccordionUI Lab · ReactAnswers unfold from under their question like a folded flap, and the row you clicked never moves.
AccordionHextaUI · ReactStacked headings that each reveal a panel, with height motion you can reverse mid-way and panels that stay searchable…
AccordionCojeev UI · ReactOrganizes related sections into expandable panels so readers can open the details they need.
BasicFLX UI · ReactOnly one section open at a time, type="single" collapsible. The default behavior.
Centered FAQ accordionVelora UI · ReactCentered heading over an accordion of eight questions, closed by a contact row.
AccordionHalaska UI · React
Basicsv-particles · Svelte
AccordionSpaceUI · ReactAllows you to display content in collapsible panels, making it easy for users to explore details on demand while…
AccordionSora UI · ReactAn animated FAQ accordion with expandable panels, powered by Motion.
Liquid AccordionLiquefy UI · ReactAccordion in liquid glass style: translucent panels that refract the background.
AccordionEaseUI · ReactExpanding sections that grow to their natural height with no measuring, with arrow key navigation and closed panels…
Glass AccordionOpaline · ReactCollapsible sections on one glass panel, or as separate glass cards that grow open.
AccordionReactFrame · ReactAn accessible accordion with single or multiple open panels, default, card and filled variants, chevron or plus…
DisclosureHeroUI · ReactA disclosure is a collapsible section with a header containing a heading and a trigger button, and a panel that wraps…
Tailwind Disclosure GroupReact Spectrum · React
Accordion with rotating arrow indicatorReUI · ReactAccordion with rotating arrow indicator
AI Reasoning Trace AccordionAmicro Micro Transitions · ReactCollapsible chain-of-thought reasoning trace with active thought timer, pulsating brain wave, and sequential step…
Base Ui AccordionLobe UI · React
FAQ Tabs CardSpectrum UI · ReactA tabbed FAQ card with animated accordion answers and a support footer.
Accordion (Base UI)Fluid Functionalism · ReactCollapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode. Base…
FAQ AccordionNexvyn UI · ReactA two column FAQ accordion with a contact line.
Accordion 03Watermelon UI · React
FAQ Foursv-efferd · SvelteA categorized FAQ explorer with topic switching and softly framed accordion rows.
FAQ sectionArc Library · ReactFAQs as an accordion, a topic rail, or a searchable list that highlights matches.
Accordion GalleryCojeev UI · ReactA selected image panel opens to reveal its label, story and action.
MultipleFLX UI · Reacttype="multiple" keeps several sections open at once.
Two-column FAQVelora UI · ReactSticky intro and contact card on the left, an accordion of questions on the right.
Controlledsv-particles · Svelte
Bouncy AccordionSpaceUI · ReactSpring accordion that splits rounded rows when a panel opens.
Base AccordionSora UI · ReactAn animated accordion component built on Base UI with spring physics, height collapse mask gradient, blur transitions…
Disclosure GroupHeroUI · ReactContainer that manages multiple Disclosure items with coordinated expanded states
Vanilla Disclosure GroupReact Spectrum · React
Accordion pattern for onboarding or setup steps with icons, badges, and QR codesReUI · ReactAccordion pattern for onboarding or setup steps with icons, badges, and QR codes
Square AccordionAmicro Micro Transitions · ReactSquare Accordion loading animation.
Mega Sitemap FooterSpectrum UI · ReactA five-column sitemap with region and language selectors and mobile accordions.
Accordion 04Watermelon UI · React
FAQ Onesv-efferd · SvelteA compact FAQ stack with a centered heading and a classic single-column accordion.
With iconsFLX UI · ReactLeading icon beside each trigger label.
Multiple Panelssv-particles · Svelte
Detachable AccordionSpaceUI · ReactAn interactive accordion with spring motion where the expanded item physically detaches with animated gaps and rounded…
Radix AccordionSora UI · ReactAn animated accordion component built on Radix UI with spring physics, height collapse mask gradient, blur…
Accordion with plus/minus indicatorsReUI · ReactAccordion with plus/minus indicators
Accordion BlindAmicro Micro Transitions · React
Trust Center FooterSpectrum UI · ReactCompliance marks that expand to scope, over a logo row and link columns.
Accordion 05Watermelon UI · React
FAQ Threesv-efferd · SvelteA guided editorial FAQ with divider rails and decorative timeline markers.
FAQFLX UI · ReactA titled question-and-answer list.
With One Panelsv-particles · Svelte
Accordion with borders and rounded cornersReUI · ReactAccordion with borders and rounded corners
Accordion 1Watermelon UI · React
FAQ Twosv-efferd · SvelteA split FAQ layout with a fixed intro column and full-height answer rail.
Separated cardsFLX UI · ReactEach item is a bordered card with spacing between them.
Accordion embedded within a CardReUI · ReactAccordion embedded within a Card
Accordion 10Watermelon UI · React
Plus / minus iconFLX UI · ReactPlus icon on each trigger that turns into a minus when open, instead of a chevron.
Accordion with disabled items and highlighted stateReUI · ReactAccordion with disabled items and highlighted state
Accordion 11Watermelon UI · React
Left chevronFLX UI · ReactRotating chevron placed before the label instead of after it.
Advanced accordion with custom icons and badgesReUI · ReactAdvanced accordion with custom icons and badges
Accordion 12Watermelon UI · React
Rich contentFLX UI · ReactLists, links, and a button inside the panel body.
Accordion items integrated within Frame and FramePanelReUI · ReactAccordion items integrated within Frame and FramePanel
Accordion 13Watermelon UI · React
Disabled itemFLX UI · ReactOne trigger disabled while the others stay interactive.
Nested accordion example with bordered itemsReUI · ReactNested accordion example with bordered items
Accordion 14Watermelon UI · React
NestedFLX UI · ReactAn accordion rendered inside another panel body.
User list accordion with avatars and role indicatorsReUI · ReactUser list accordion with avatars and role indicators
Accordion 15Watermelon UI · React
GhostFLX UI · ReactBorderless minimal rows with an active color on open.
Accordion 16Watermelon UI · React
Filled triggerFLX UI · ReactEach trigger sits on a muted, rounded background.
Accordion 2Watermelon UI · React
Expand allFLX UI · ReactControlled value with expand-all / collapse-all buttons.
Accordion 3Watermelon UI · React
Settings sectionsFLX UI · ReactGrouped switch rows revealed inside each panel.
Accordion 4Watermelon UI · React
With subtitleFLX UI · ReactTwo-line trigger pairing a title with helper text.
Accordion 5Watermelon UI · React
Accordion 6Watermelon UI · React
Accordion 7Watermelon UI · React
Accordion 8Watermelon UI · React
Accordion 9Watermelon UI · React
Accordion MultiselectWatermelon UI · React
Animated AccordionWatermelon UI · React
Card Split AccordionWatermelon UI · React
Card Split Accordion BaseWatermelon UI · React
Libraries with Animated accordion components
Related categories
- Accordion Components
- React Accordion Components
- Tailwind CSS Accordion Components
- Svelte Accordion Components
- shadcn/ui Accordion Components
- Animated Data Display Components
- Animated Card Components
- Animated Chart Components
- Animated Carousel Components
- Animated Stat Components
- Animated Collapsible Components
- Animated Card Stack Components
- Animated Counter Components
- Animated List Components
- Animated Avatar Components
- Animated Table Components
- Animated Tree View Components
- Animated Avatar Group Components
- Animated Line Chart Components
- Animated Timeline Components
- Animated Testimonial Components