1<script lang="ts"> 2 import * as Accordion from "./index.js"; 3 4 let value = $state("item-1"); 5</script> 6 7<div class="w-full max-w-md"> 8 <Accordion.Root type="single" bind:value> 9 <Accordion.Item value="item-1"> 10 <Accordion.Trigger>Product Information</Accordion.Trigger> 11 <Accordion.Content> 12 <p> 13 Our flagship product combines cutting-edge technology with sleek 14 design. Built with premium materials, it offers unparalleled 15 performance and reliability. 16 </p> 17 </Accordion.Content> 18 </Accordion.Item> 19 <Accordion.Item value="item-2"> 20 <Accordion.Trigger>Shipping Details</Accordion.Trigger> 21 <Accordion.Content> 22 <p> 23 We offer worldwide shipping through trusted courier partners. Standard 24 delivery takes 3–5 business days. 25 </p> 26 </Accordion.Content> 27 </Accordion.Item> 28 <Accordion.Item value="item-3"> 29 <Accordion.Trigger>Return Policy</Accordion.Trigger> 30 <Accordion.Content> 31 <p> 32 We stand behind our products with a comprehensive 30-day return 33 policy. Return the item in its original condition for a full refund. 34 </p> 35 </Accordion.Content> 36 </Accordion.Item> 37 </Accordion.Root> 38</div> 39

Installation

Usage

Use the accordion for FAQs, settings groups, and other content that should stay compact until expanded. Set type="single" for one open panel at a time, or type="multiple" to allow several open.

1<script lang="ts">
2	import * as Accordion from '~/components/accordion';
3</script>
4
5<Accordion.Root type="single" value="item-1">
6	<Accordion.Item value="item-1">
7		<Accordion.Trigger>Product Information</Accordion.Trigger>
8		<Accordion.Content>
9			<p>Key features include advanced processing and an intuitive interface.</p>
10		</Accordion.Content>
11	</Accordion.Item>
12	<Accordion.Item value="item-2">
13		<Accordion.Trigger>Shipping Details</Accordion.Trigger>
14		<Accordion.Content>
15			<p>Standard delivery takes 3–5 business days worldwide.</p>
16		</Accordion.Content>
17	</Accordion.Item>
18</Accordion.Root>