This is the llms.txt documentation for the "accordions" directory of the Origin UI - Svelte project.
# "accordions" directory
> A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications.
This documentation covers 20 components, each following best practices for accessibility, performance, and type safety.
## Components
## accordion-01
> A type-safe, accessible accordion-01 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-01`
- **Location**: `/src/lib/components/accordions/accordion-01.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
W/ chevron
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-01.svelte)
## accordion-02
> A type-safe, accessible accordion-02 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-02`
- **Location**: `/src/lib/components/accordions/accordion-02.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
W/ plus-minus
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-02.svelte)
## accordion-03
> A type-safe, accessible accordion-03 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-03`
- **Location**: `/src/lib/components/accordions/accordion-03.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
W/ left chevron
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-03.svelte)
## accordion-04
> A type-safe, accessible accordion-04 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-04`
- **Location**: `/src/lib/components/accordions/accordion-04.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
W/ left plus-minus
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-04.svelte)
## accordion-05
> A type-safe, accessible accordion-05 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-05`
- **Location**: `/src/lib/components/accordions/accordion-05.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
W/ icon and chevron
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-05.svelte)
## accordion-06
> A type-safe, accessible accordion-06 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-06`
- **Location**: `/src/lib/components/accordions/accordion-06.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
W/ icon and plus-minus
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-06.svelte)
## accordion-07
> A type-safe, accessible accordion-07 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-07`
- **Location**: `/src/lib/components/accordions/accordion-07.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
W/ sub-header and chevron
{#each items as item (item.id)}
{item.title}
{#if item.sub}
{item.sub}
{/if}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-07.svelte)
## accordion-08
> A type-safe, accessible accordion-08 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-08`
- **Location**: `/src/lib/components/accordions/accordion-08.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
W/ sub-header and plus-minus
{#each items as item (item.id)}
{item.title}
{#if item.sub}
{item.sub}
{/if}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-08.svelte)
## accordion-09
> A type-safe, accessible accordion-09 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-09`
- **Location**: `/src/lib/components/accordions/accordion-09.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
W/ icon, sub-header, and chevron
{#each items as item (item.id)}
{item.title}
{#if item.sub}
{item.sub}
{/if}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-09.svelte)
## accordion-10
> A type-safe, accessible accordion-10 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-10`
- **Location**: `/src/lib/components/accordions/accordion-10.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
W/ icon, sub-header, and plus-minus
{#each items as item (item.id)}
{item.title}
{#if item.sub}
{item.sub}
{/if}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-10.svelte)
## accordion-11
> A type-safe, accessible accordion-11 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-11`
- **Location**: `/src/lib/components/accordions/accordion-11.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Tabs w/ chevron
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-11.svelte)
## accordion-12
> A type-safe, accessible accordion-12 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-12`
- **Location**: `/src/lib/components/accordions/accordion-12.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Tabs w/ plus-minus
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-12.svelte)
## accordion-13
> A type-safe, accessible accordion-13 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-13`
- **Location**: `/src/lib/components/accordions/accordion-13.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Tabs w/ left chevron
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-13.svelte)
## accordion-14
> A type-safe, accessible accordion-14 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-14`
- **Location**: `/src/lib/components/accordions/accordion-14.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Tabs w/ left plus-minus
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-14.svelte)
## accordion-15
> A type-safe, accessible accordion-15 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-15`
- **Location**: `/src/lib/components/accordions/accordion-15.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Table w/ chevron
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-15.svelte)
## accordion-16
> A type-safe, accessible accordion-16 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-16`
- **Location**: `/src/lib/components/accordions/accordion-16.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Table w/ plus-minus
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-16.svelte)
## accordion-17
> A type-safe, accessible accordion-17 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-17`
- **Location**: `/src/lib/components/accordions/accordion-17.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Table w/ left chevron
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-17.svelte)
## accordion-18
> A type-safe, accessible accordion-18 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-18`
- **Location**: `/src/lib/components/accordions/accordion-18.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Table w/ left plus-minus
{#each items as item (item.id)}
{item.title}
{item.content}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-18.svelte)
## accordion-19
> A type-safe, accessible accordion-19 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-19`
- **Location**: `/src/lib/components/accordions/accordion-19.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Table w/ left plus-minus
{#each items as item (item.id)}
{item.title}
{#each item.collapsibles as collapsible (collapsible.title)}
{@render CollapsibleDemo({
content: collapsible.content,
open: collapsible.open ?? false,
title: collapsible.title
})}
{/each}
{/each}
{#snippet CollapsibleDemo({
content,
open,
title
}: {
content: string;
open: boolean;
title: string;
})}
{title}
{content}
{/snippet}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-19.svelte)
## accordion-20
> A type-safe, accessible accordion-20 component for building modern UIs. This component is part of the accordions collection.
### Core Information
- **Component ID**: `accordion-20`
- **Location**: `/src/lib/components/accordions/accordion-20.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Table w/ left plus-minus
{#each items as item (item.id)}
{item.title}
{#each item.collapsibles as collapsible (collapsible.title)}
{@render CollapsibleDemo({
content: collapsible.content,
Icon: collapsible.icon,
open: collapsible.open ?? false,
title: collapsible.title
})}
{/each}
{/each}
{#snippet CollapsibleDemo({
content,
Icon,
open,
title
}: {
content: string;
Icon: typeof Gauge;
open: boolean;
title: string;
})}
{title}
{content}
{/snippet}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/accordions/accordion-20.svelte)