About
A collapsible accordion list with frosted, translucent "liquid glass" panels that expand and collapse to reveal content, animated with framer-motion.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Glass Accordion to your project and fits it to your theme.
Code
How Liquid Glass Accordion is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { LiquidGlassAccordion } from "@/components/ui/liquid-glass-accordion";
export default function LiquidGlassAccordionDemo() {
const items = [
{
id: "1",
title: "What is Liquid Glass?",
content:
"Apple's next-gen design language with translucent, frosted glass surfaces.",
},
{
id: "2",
title: "How does blur work?",
content:
"CSS backdrop-filter with high blur + saturation creates frosted glass.",
},
];
return (
<div className="flex min-h-screen w-full items-center justify-center bg-[var(--lg-bg)] p-6">
<div className="w-full max-w-md">
<LiquidGlassAccordion items={items} defaultOpen={["1"]} />
</div>
</div>
);
}
Dependencies
More by obaidqatan
View all
Liquid Glass Breadcrumb
23
Liquid Glass Hover Card
9
Liquid Glass Input
Liquid Glass Avatar