Accordion

1import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@glinui/ui"
2
3export function AccordionBasicDemo() {
4return (
5  <Accordion type="single" collapsible>
6    <AccordionItem value="item-1">
7      <AccordionTrigger>What is Glin UI?</AccordionTrigger>
8      <AccordionContent>A liquid-glass component library for React.</AccordionContent>
9    </AccordionItem>
10  </Accordion>
11)
12}

1import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@glinui/ui"
2
3export function AccordionGlassDemo() {
4return (
5  <Accordion type="single" collapsible>
6    <AccordionItem value="one" variant="glass">
7      <AccordionTrigger variant="glass">Setup</AccordionTrigger>
8      <AccordionContent variant="glass">Install the package and import primitives.</AccordionContent>
9    </AccordionItem>
10    <AccordionItem value="two" variant="glass">
11      <AccordionTrigger variant="glass">Theming</AccordionTrigger>
12      <AccordionContent variant="glass">Use token variables for all surfaces.</AccordionContent>
13    </AccordionItem>
14  </Accordion>
15)
16}

1import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@glinui/ui"
2
3export function AccordionFrostedDemo() {
4return (
5  <Accordion type="single" collapsible>
6    <AccordionItem value="one" variant="frosted">
7      <AccordionTrigger variant="frosted">Installation</AccordionTrigger>
8      <AccordionContent variant="frosted">Run pnpm add @glinui/ui @glinui/tokens to get started.</AccordionContent>
9    </AccordionItem>
10    <AccordionItem value="two" variant="frosted">
11      <AccordionTrigger variant="frosted">Configuration</AccordionTrigger>
12      <AccordionContent variant="frosted">Import the CSS tokens in your root layout file.</AccordionContent>
13    </AccordionItem>
14    <AccordionItem value="three" variant="frosted">
15      <AccordionTrigger variant="frosted">Usage</AccordionTrigger>
16      <AccordionContent variant="frosted">Import components and apply variant props.</AccordionContent>
17    </AccordionItem>
18  </Accordion>
19)
20}