Navigation
Glass Accordion
Collapsible glass sections that open one at a time or several at once.
Preview
Demos ready. Update 0.
The preview runs the React version. On iOS 26 and later, the React Native version uses the system’s own glass. See it on a phone.
Installation
For React 19+ apps with Tailwind CSS 4.
npx shadcn@4.14.1 add @glassyui/glass-accordionAdds 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>
);
}React Native usage
import {
GlassAccordion,
GlassAccordionContent,
GlassAccordionItem,
GlassAccordionTrigger,
} from '@/components/glassyui/glass-accordion';
export default function AccordionExample() {
return (
<GlassAccordion collapsible defaultValue="returns">
<GlassAccordionItem value="returns">
<GlassAccordionTrigger>Can I return an order?</GlassAccordionTrigger>
<GlassAccordionContent>Yes, within 30 days of delivery.</GlassAccordionContent>
</GlassAccordionItem>
<GlassAccordionItem value="shipping">
<GlassAccordionTrigger>How long does shipping take?</GlassAccordionTrigger>
<GlassAccordionContent>Three to five working days.</GlassAccordionContent>
</GlassAccordionItem>
</GlassAccordion>
);
}
Examples
Single item
<GlassAccordion type="single" collapsible>...</GlassAccordion>API reference
GlassAccordion
| Prop | Type | Default | Description |
|---|---|---|---|
typeRequired | 'single' | 'multiple' | None | Whether one item or several can be open at once. |
value / defaultValue | string (single) | string[] (multiple) | None | Controlled or uncontrolled open item or items. |
onValueChange | (value: string) => void | (value: string[]) => void | None | Called with the open item or items. |
collapsible | boolean | false | With type single, lets the open item close again. |
Also accepts Radix Accordion.Root props.
GlassAccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
valueRequired | string | None | Identifies 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.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | None | Applies 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.
The React Native props and exports are in the component’s source.