Glass Accordion

Component

About

A collapsible accordion styled as a liquid-glass surface, with inset (shared glass panel) or separated (each item its own glass card) variants.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Accordion to your project and fits it to your theme.

Code

How Glass Accordion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  GlassAccordion,
  GlassAccordionItem,
  GlassAccordionTrigger,
  GlassAccordionContent,
} from "@/components/ui/glass-accordion";

export default function GlassAccordionDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-md">
        <GlassAccordion
          variant="inset"
          type="single"
          collapsible
          defaultValue="item-1"
        >
          <GlassAccordionItem value="item-1">
            <GlassAccordionTrigger>What is liquid glass?</GlassAccordionTrigger>
            <GlassAccordionContent>
              A rendering technique that refracts the backdrop through an SVG
              displacement map, giving UI surfaces a real glass-like bend of
              light.
            </GlassAccordionContent>
          </GlassAccordionItem>
          <GlassAccordionItem value="item-2">
            <GlassAccordionTrigger>
              Can I use separated cards?
            </GlassAccordionTrigger>
            <GlassAccordionContent>
              Yes — switch the `variant` prop to "separated" and each item
              renders as its own glass card that grows open independently.
            </GlassAccordionContent>
          </GlassAccordionItem>
          <GlassAccordionItem value="item-3">
            <GlassAccordionTrigger>Is it accessible?</GlassAccordionTrigger>
            <GlassAccordionContent>
              It is built on Radix UI's Accordion primitive, so keyboard
              navigation and ARIA semantics come for free.
            </GlassAccordionContent>
          </GlassAccordionItem>
        </GlassAccordion>
      </div>
    </div>
  );
}