Accordion

---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";

export function Example() {
  return (
    <Accordion defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>What is Astro?</AccordionTrigger>
        <AccordionContent>
          Astro is an web framework for building fast, scalable, and secure websites.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
        <AccordionContent>
          Astro provides a set of features that make it an ideal choice for building fast,
          scalable, and secure websites.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
        <AccordionContent>
          To get started with Astro, follow the instructions in the documentation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion type="multiple" defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";

export function Example() {
  return (
    <>
      <Accordion type="multiple" defaultValue={["item-1"]}>
        <AccordionItem value="item-1">
          <AccordionTrigger>What is Astro?</AccordionTrigger>
          <AccordionContent>
            Astro is an web framework for building fast, scalable, and secure websites.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
          <AccordionContent>
            Astro provides a set of features that make it an ideal choice for building fast,
            scalable, and secure websites.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
          <AccordionContent>
            To get started with Astro, follow the instructions in the documentation.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </>
  );
}

---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";
---

<Accordion defaultValue="item-3">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Astro?</AccordionTrigger>
    <AccordionContent>
      Astro is an web framework for building fast, scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
    <AccordionContent>
      Astro provides a set of features that make it an ideal choice for building fast,
      scalable, and secure websites.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
    <AccordionContent>
      To get started with Astro, follow the instructions in the documentation.
    </AccordionContent>
  </AccordionItem>
</Accordion>

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/starwind/accordion";

export function Example() {
  return (
    <>
      <Accordion defaultValue="item-3">
        <AccordionItem value="item-1">
          <AccordionTrigger>What is Astro?</AccordionTrigger>
          <AccordionContent>
            Astro is an web framework for building fast, scalable, and secure websites.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Why should I use Astro?</AccordionTrigger>
          <AccordionContent>
            Astro provides a set of features that make it an ideal choice for building fast,
            scalable, and secure websites.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>How do I get started with Astro?</AccordionTrigger>
          <AccordionContent>
            To get started with Astro, follow the instructions in the documentation.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </>
  );
}