This is the llms.txt documentation for the "timelines" directory of the Origin UI - Svelte project.
# "timelines" 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 12 components, each following best practices for accessibility, performance, and type safety.
## Components
## timeline-01
> A type-safe, accessible timeline-01 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-01`
- **Location**: `/src/lib/components/timelines/timeline-01.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.title}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-01.svelte)
## timeline-02
> A type-safe, accessible timeline-02 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-02`
- **Location**: `/src/lib/components/timelines/timeline-02.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.date}
{item.title}
{item.description}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-02.svelte)
## timeline-03
> A type-safe, accessible timeline-03 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-03`
- **Location**: `/src/lib/components/timelines/timeline-03.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.date}
{item.title}
{item.description}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-03.svelte)
## timeline-04
> A type-safe, accessible timeline-04 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-04`
- **Location**: `/src/lib/components/timelines/timeline-04.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.title}
{item.description}
{item.date}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-04.svelte)
## timeline-05
> A type-safe, accessible timeline-05 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-05`
- **Location**: `/src/lib/components/timelines/timeline-05.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.date}
{item.title}
{item.description}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-05.svelte)
## timeline-06
> A type-safe, accessible timeline-06 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-06`
- **Location**: `/src/lib/components/timelines/timeline-06.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.title}
{item.description}
{item.date}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-06.svelte)
## timeline-07
> A type-safe, accessible timeline-07 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-07`
- **Location**: `/src/lib/components/timelines/timeline-07.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.title}
{item.action}
{item.description}
{item.date}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-07.svelte)
## timeline-08
> A type-safe, accessible timeline-08 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-08`
- **Location**: `/src/lib/components/timelines/timeline-08.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.date}
{item.title}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-08.svelte)
## timeline-09
> A type-safe, accessible timeline-09 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-09`
- **Location**: `/src/lib/components/timelines/timeline-09.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.description}
{item.date.toLocaleDateString('en-US', {
day: 'numeric',
month: 'long',
year: 'numeric'
})}
at
{item.date.toLocaleTimeString('en-US', {
hour: 'numeric',
hour12: true,
minute: '2-digit'
})}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-09.svelte)
## timeline-10
> A type-safe, accessible timeline-10 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-10`
- **Location**: `/src/lib/components/timelines/timeline-10.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
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-10.svelte)
## timeline-11
> A type-safe, accessible timeline-11 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-11`
- **Location**: `/src/lib/components/timelines/timeline-11.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.date}
{item.title}
{item.description}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-11.svelte)
## timeline-12
> A type-safe, accessible timeline-12 component for building modern UIs. This component is part of the timelines collection.
### Core Information
- **Component ID**: `timeline-12`
- **Location**: `/src/lib/components/timelines/timeline-12.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#each items as item (item.id)}
{item.date}
{item.title}
{item.description}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-12.svelte)