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.
Category
Micro InteractionReact
CSS
shadcn
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.