Accordion

1import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Accordion type="single" collapsible>
6      <AccordionItem value="item-1">
7        <AccordionTrigger>Is it accessible?</AccordionTrigger>
8        <AccordionContent>Yes. Built on Radix with full WAI-ARIA support.</AccordionContent>
9      </AccordionItem>
10      <AccordionItem value="item-2">
11        <AccordionTrigger>Is it styled?</AccordionTrigger>
12        <AccordionContent>Yes. Ships with glass, outline, and ghost variants.</AccordionContent>
13      </AccordionItem>
14      <AccordionItem value="item-3">
15        <AccordionTrigger>Is it animated?</AccordionTrigger>
16        <AccordionContent>Yes. Smooth transitions with reduced-motion fallback.</AccordionContent>
17      </AccordionItem>
18    </Accordion>
19  )
20}

1import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Accordion type="single" collapsible>
6      <AccordionItem value="item-1" variant="glass">
7        <AccordionTrigger variant="glass">Glass accordion</AccordionTrigger>
8        <AccordionContent variant="glass">Frosted content surface.</AccordionContent>
9      </AccordionItem>
10    </Accordion>
11  )
12}

1import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Accordion type="single" collapsible>
6      <AccordionItem value="item-1" variant="separated">
7        <AccordionTrigger variant="separated">What is glinui?</AccordionTrigger>
8        <AccordionContent variant="separated">A glassmorphic component library built on Radix UI.</AccordionContent>
9      </AccordionItem>
10      <AccordionItem value="item-2" variant="separated">
11        <AccordionTrigger variant="separated">Is it customizable?</AccordionTrigger>
12        <AccordionContent variant="separated">Yes. Every token and variant is configurable.</AccordionContent>
13      </AccordionItem>
14      <AccordionItem value="item-3" variant="separated">
15        <AccordionTrigger variant="separated">Does it support dark mode?</AccordionTrigger>
16        <AccordionContent variant="separated">Yes. All components respect the color scheme automatically.</AccordionContent>
17      </AccordionItem>
18    </Accordion>
19  )
20}