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
Activity
{#each items as item (item.id)} {@const ActionIcon = getActionIcon(item.action)} {item.user} {getActionText(item.action)} {getRelativeTimeString(item.date)} {/each}
``` ### 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)