Browse docsAccordion

Navigation

Glass Accordion

Sections that expand and collapse on glass, one at a time or several.

pnpm dlx shadcn@4.14.1 add @glassyui/glass-accordion

Preview

Demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Accordion

pnpm dlx shadcn@4.14.1 add @glassyui/glass-accordion
What this installs11 files, 2 packages

Direct registry declarations

These values belong to @glassyui/glass-accordion itself in registry.json.

Package dependencies

  • @radix-ui/react-accordion
  • clsx

Registry dependencies

  • @glassyui/glass-panel

File targets

  • components/glassyui/glass-accordion.tsx

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

  • @radix-ui/react-accordion
  • clsx

Installed files

  • components/glassyui/glass-accordion.tsx
  • components/glassyui/glass-panel.tsx
  • components/glassyui/glass-surface.tsx
  • components/glassyui/lib/merge-refs.ts
  • components/glassyui/lib/refraction-map.ts
  • components/glassyui/lib/use-refraction-filter.tsx
  • components/glassyui/lib/scene-context.ts
  • components/glassyui/glass-provider.tsx
  • components/glassyui/liquid-filters.tsx
  • components/glassyui/lib/preferences.ts
  • components/glassyui/styles/liquid.css

Usage

Usage

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

export function AccordionDemo() {
  return (
    <GlassAccordion type="single" collapsible>
      <GlassAccordionItem value="item-1">
        <GlassAccordionTrigger>Can I customize it?</GlassAccordionTrigger>
        <GlassAccordionContent>Yes. It is source-copy code.</GlassAccordionContent>
      </GlassAccordionItem>
    </GlassAccordion>
  );
}

Examples

Single item

<GlassAccordion type="single" collapsible>...</GlassAccordion>

API

GlassAccordion

Radix Accordion root.

GlassAccordionItem

Radix Accordion item.

GlassAccordionTrigger

Glass trigger inside a Radix header.

GlassAccordionContent

Panel-backed collapsible content.

Notes

Motion

The card opens and closes like a curtain, and the chevron turns with it. Reduced motion opens and closes it at once.

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.