Skip to main content

Stacked Liquid Accordion

A reusable accordion built with shadcn/ui, Radix and Framer Motion. Smooth layout transitions, dynamic border morphing for a fluid stacked effect.

Micro InteractionReactFramer MotionRadix UI
CSSshadcn

Manual

Create a file and paste the following code into it.

src/index-demo.tsx
1
2
3
4
5
6
7
8
9
import { LiquidAccordion } from "@/components/ui/liquid-accordion";

export default function Demo() {
  return (
    <div className="flex h-dvh w-full items-center justify-center bg-white p-8">
      <LiquidAccordion />
    </div>
  );
}

Update the import paths to match your project setup.

Similar components

Status Badge Table

Max

Morphing Dropdown

SVG Branch Connector

Tool Calls Section

Live Preview

Resource details

PublishedMarch 2, 2026
CategoryMicro Interaction
ReactFramer MotionRadix UI