This is the llms.txt documentation for the "dropdowns" directory of the Origin UI - Svelte project.
# "dropdowns" 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 15 components, each following best practices for accessibility, performance, and type safety.
## Components
## dropdown-01
> A type-safe, accessible dropdown-01 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-01`
- **Location**: `/src/lib/components/dropdowns/dropdown-01.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Option 1Option 2Option 3Option 4
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-01.svelte)
## dropdown-02
> A type-safe, accessible dropdown-02 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-02`
- **Location**: `/src/lib/components/dropdowns/dropdown-02.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Option 1Option 2Option 3Option 4
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-02.svelte)
## dropdown-03
> A type-safe, accessible dropdown-03 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-03`
- **Location**: `/src/lib/components/dropdowns/dropdown-03.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Copy
Edit
Group
Clone
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-03.svelte)
## dropdown-04
> A type-safe, accessible dropdown-04 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-04`
- **Location**: `/src/lib/components/dropdowns/dropdown-04.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Copy
Edit
Group
Clone
Delete
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-04.svelte)
## dropdown-05
> A type-safe, accessible dropdown-05 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-05`
- **Location**: `/src/lib/components/dropdowns/dropdown-05.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Label
Copy
Edit
Label
Group
Clone
Delete
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-05.svelte)
## dropdown-06
> A type-safe, accessible dropdown-06 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-06`
- **Location**: `/src/lib/components/dropdowns/dropdown-06.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
(sveltekit = checked)}
>
SvelteKit
(nextjs = checked)}>
Next.js
(remix = checked)}
disabled
>
Remix
(astro = checked)}>
Astro
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-06.svelte)
## dropdown-07
> A type-safe, accessible dropdown-07 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-07`
- **Location**: `/src/lib/components/dropdowns/dropdown-07.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
(framework = value)}>
SvelteKitNext.jsRemixAstro
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-07.svelte)
## dropdown-08
> A type-safe, accessible dropdown-08 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-08`
- **Location**: `/src/lib/components/dropdowns/dropdown-08.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Edit⌘EDuplicate⌘DArchive⌘AMoreMove to projectMove to folderAdvanced optionsShareAdd to favoritesDelete⌘⌫
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-08.svelte)
## dropdown-09
> A type-safe, accessible dropdown-09 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-09`
- **Location**: `/src/lib/components/dropdowns/dropdown-09.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
New⌘NFramework (framework = value)}>
SvelteKitNext.jsRemixAstroNotifications (emailNotifications = checked)}
>
Email
(pushNotifications = checked)}
>
Push
ShareArchiveDelete⌘⌫
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-09.svelte)
## dropdown-10
> A type-safe, accessible dropdown-10 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-10`
- **Location**: `/src/lib/components/dropdowns/dropdown-10.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Signed in ask.kennedy@originui-svelte.comOption 1Option 2Option 3Logout
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-10.svelte)
## dropdown-11
> A type-safe, accessible dropdown-11 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-11`
- **Location**: `/src/lib/components/dropdowns/dropdown-11.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Keith Kennedy
k.kennedy@originui-svelte.com
Option 1Option 2Option 3Option 4Option 5Logout
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-11.svelte)
## dropdown-12
> A type-safe, accessible dropdown-12 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-12`
- **Location**: `/src/lib/components/dropdowns/dropdown-12.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Keith Kennedy
k.kennedy@originui-svelte.com
Option 1Option 2Option 3Option 4Option 5Logout
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-12.svelte)
## dropdown-13
> A type-safe, accessible dropdown-13 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-13`
- **Location**: `/src/lib/components/dropdowns/dropdown-13.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Need help?
{#snippet child({ props })}
Documentation
{/snippet}
{#snippet child({ props })}
Support
{/snippet}
{#snippet child({ props })}
Contact us
{/snippet}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-13.svelte)
## dropdown-14
> A type-safe, accessible dropdown-14 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-14`
- **Location**: `/src/lib/components/dropdowns/dropdown-14.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Add block
Text
Start writing with plain text
Quote
Capture a quote
Divider
Visually divide blocks
Heading 1
Big section heading
Heading 2
Medium section subheading
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/dropdowns/dropdown-14.svelte)
## dropdown-15
> A type-safe, accessible dropdown-15 component for building modern UIs. This component is part of the dropdowns collection.
### Core Information
- **Component ID**: `dropdown-15`
- **Location**: `/src/lib/components/dropdowns/dropdown-15.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
(theme = 'light')}>
Light (theme = 'dark')}>
Dark (theme = 'system')}>
System