Browse docsAccordion

Navigation

Glass Accordion

Collapsible glass sections that open one at a time or several at once.

Preview

Demos ready. Update 0.

Installation

For React 19+ apps with Tailwind CSS 4.

npx shadcn@4.14.1 add @glassyui/glass-accordion

Adds 12 files to components/glassyui and installs @radix-ui/react-accordion and clsx.

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 reference

GlassAccordion

PropTypeDefaultDescription
typeRequired'single' | 'multiple'NoneWhether one item or several can be open at once.
value / defaultValuestring (single) | string[] (multiple)NoneControlled or uncontrolled open item or items.
onValueChange(value: string) => void | (value: string[]) => voidNoneCalled with the open item or items.
collapsiblebooleanfalseWith type single, lets the open item close again.

Also accepts Radix Accordion.Root props.

GlassAccordionItem

PropTypeDefaultDescription
valueRequiredstringNoneIdentifies the item in value and defaultValue.

Also accepts Radix Accordion.Item props.

GlassAccordionTrigger

A glass button with a chevron, wrapped in an h3.

Also accepts Radix Accordion.Trigger props.

GlassAccordionContent

The item's panel on a glass card.

PropTypeDefaultDescription
classNamestringNoneApplies to the glass card.

Also accepts Radix Accordion.Content props.

Accessibility
Each trigger sits inside an h3 that you cannot change, so place the accordion where an h3 fits the page outline.