Glass Accordion

A frosted glass accordion — collapsible sections with a smooth height transition and hairline separators.

A refraction effect that bends the page behind a lens using an SVG displacement filter run as a backdrop-filter.

Chromium today. Safari and Firefox fall back to a frosted blur automatically.

Via the shadcn CLI — each component is copied into your project as source you own.

Playground

Edit the props live and copy the config.

An SVG displacement filter run as a backdrop-filter.

Chromium; Safari/Firefox fall back to frost.

Type

Tint

0.4

<GlassAccordion type="single" tint={0.4} defaultValue={["a"]}>
  <GlassAccordionItem value="a">
    <GlassAccordionTrigger>Question</GlassAccordionTrigger>
    <GlassAccordionContent>Answer</GlassAccordionContent>
  </GlassAccordionItem>
</GlassAccordion>

Install

npx shadcn@latest add https://websiteglass.com/r/glass-accordion.json

Usage

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

<GlassAccordion type="single" defaultValue={["a"]}>
  <GlassAccordionItem value="a">
    <GlassAccordionTrigger>Section A</GlassAccordionTrigger>
    <GlassAccordionContent>Content A</GlassAccordionContent>
  </GlassAccordionItem>
</GlassAccordion>

Props

GlassAccordion

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	`single` keeps one section open at a time.
`value`	`string[]`	—	Controlled open items.
`defaultValue`	`string[]`	`[]`	Initially open items.
`onValueChange`	`(v: string[]) => void`	—	Fires on change.
`tint`	`number`	`0.4`	Frosted tint of the panel.

Content height animates via a grid-template-rows transition (no JS measuring). Each item is composed from GlassAccordionItem / GlassAccordionTrigger / GlassAccordionContent.