Core components, app shell patterns, and theme tokens ready for production work.
Accordion
A component that allows users to toggle the visibility of content sections.
The Accordion Component
Basic Usage
Code Snippet
<script lang="ts"> import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '$lib/components'; let value = $state('starter');</script> <Accordion bind:value={value}> <AccordionItem value="starter"> <AccordionTrigger>What is included?</AccordionTrigger> <AccordionContent> Core components, app shell patterns, and theme tokens ready for production work. </AccordionContent> </AccordionItem> <AccordionItem value="theming"> <AccordionTrigger>How does theming work?</AccordionTrigger> <AccordionContent> Light and dark mode both inherit the same shared app tokens exposed through Tailwind. </AccordionContent> </AccordionItem> <AccordionItem value="customization"> <AccordionTrigger>Can I customize the layout?</AccordionTrigger> <AccordionContent> Yes. Compose the primitives directly and layer route-specific structure around them as needed. </AccordionContent> </AccordionItem></Accordion>Examples
Single
Opens one item at a time for focused reading.
Core components, app shell patterns, and theme tokens ready for production work.
Single Non-Collapsible
Keeps one section open at all times.
Orders sync within five minutes and delivery estimates update automatically.
Multiple
Lets users expand several sections together.
Keep credentials, scopes, and rate-limit guidance open at the same time.
Multiple mode works well when operators compare related details across sections.
Disabled Item
Prevents interaction for items that are unavailable.
Update account details, display name, and workspace preferences.