This is the llms.txt documentation for the "tabs" directory of the Origin UI - Svelte project.
# "tabs" 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
## tab-01
> A type-safe, accessible tab-01 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-01`
- **Location**: `/src/lib/components/tabs/tab-01.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-01.svelte)
## tab-02
> A type-safe, accessible tab-02 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-02`
- **Location**: `/src/lib/components/tabs/tab-02.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-02.svelte)
## tab-03
> A type-safe, accessible tab-03 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-03`
- **Location**: `/src/lib/components/tabs/tab-03.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-03.svelte)
## tab-04
> A type-safe, accessible tab-04 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-04`
- **Location**: `/src/lib/components/tabs/tab-04.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-04.svelte)
## tab-05
> A type-safe, accessible tab-05 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-05`
- **Location**: `/src/lib/components/tabs/tab-05.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-05.svelte)
## tab-06
> A type-safe, accessible tab-06 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-06`
- **Location**: `/src/lib/components/tabs/tab-06.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-06.svelte)
## tab-07
> A type-safe, accessible tab-07 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-07`
- **Location**: `/src/lib/components/tabs/tab-07.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-07.svelte)
## tab-08
> A type-safe, accessible tab-08 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-08`
- **Location**: `/src/lib/components/tabs/tab-08.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Overview
Repositories
3
Packages
New
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-08.svelte)
## tab-09
> A type-safe, accessible tab-09 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-09`
- **Location**: `/src/lib/components/tabs/tab-09.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Overview
Repositories
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-09.svelte)
## tab-10
> A type-safe, accessible tab-10 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-10`
- **Location**: `/src/lib/components/tabs/tab-10.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Overview
Repositories
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-10.svelte)
## tab-11
> A type-safe, accessible tab-11 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-11`
- **Location**: `/src/lib/components/tabs/tab-11.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Overview
Repositories
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-11.svelte)
## tab-12
> A type-safe, accessible tab-12 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-12`
- **Location**: `/src/lib/components/tabs/tab-12.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Overview
Repositories
3
Packages
New
Team
Insights
Settings
Content for Tab 1
Content for Tab 2
Content for Tab 3
Content for Tab 4
Content for Tab 5
Content for Tab 6
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-12.svelte)
## tab-13
> A type-safe, accessible tab-13 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-13`
- **Location**: `/src/lib/components/tabs/tab-13.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Overview
Repositories
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-13.svelte)
## tab-14
> A type-safe, accessible tab-14 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-14`
- **Location**: `/src/lib/components/tabs/tab-14.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
3
Overview
0
Repositories
7
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-14.svelte)
## tab-15
> A type-safe, accessible tab-15 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-15`
- **Location**: `/src/lib/components/tabs/tab-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}
Overview
{#snippet child({ props })}
3
{/snippet}
Repositories
{#snippet child({ props })}
{/snippet}
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-15.svelte)
## tab-16
> A type-safe, accessible tab-16 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-16`
- **Location**: `/src/lib/components/tabs/tab-16.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}
Overview
{#snippet child({ props })}
3
{/snippet}
Repositories
{#snippet child({ props })}
{/snippet}
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-16.svelte)
## tab-17
> A type-safe, accessible tab-17 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-17`
- **Location**: `/src/lib/components/tabs/tab-17.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Overview
Repositories
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-17.svelte)
## tab-18
> A type-safe, accessible tab-18 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-18`
- **Location**: `/src/lib/components/tabs/tab-18.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Overview
Repositories
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-18.svelte)
## tab-19
> A type-safe, accessible tab-19 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-19`
- **Location**: `/src/lib/components/tabs/tab-19.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Overview
Repositories
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-19.svelte)
## tab-20
> A type-safe, accessible tab-20 component for building modern UIs. This component is part of the tabs collection.
### Core Information
- **Component ID**: `tab-20`
- **Location**: `/src/lib/components/tabs/tab-20.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Overview
Repositories
Packages
Content for Tab 1
Content for Tab 2
Content for Tab 3
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/tabs/tab-20.svelte)