Navigation Fancy Stable
Timeline
Vertical timeline with scroll-driven progress line and sticky labels
Preview
svelte
<script lang="ts">
import { Timeline } from "fancy-ui-svelte";
const items = [
{ id: "step-3", label: "Step 3" },
{ id: "step-2", label: "Step 2" },
{ id: "step-1", label: "Step 1" },
];
</script>
<Timeline {items} title="Project Timeline" description="Key milestones and updates.">
{#snippet content(item)}
<div class="space-y-4">
<h3 class="text-foreground text-lg font-semibold md:hidden">{item.label}</h3>
<div class="bg-card rounded-lg border p-4">
<h4 class="mb-2 font-semibold">{item.label}</h4>
<p class="text-muted-foreground text-sm">
Content for {item.label}. The timeline shows scroll-driven progress.
</p>
</div>
</div>
{/snippet}
</Timeline>Installation
pnpm add fancy-ui-svelte
import { Timeline } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { Timeline } from 'fancy-ui-svelte';
</script>
<Timeline />Examples
Basic Usage
svelte
<script lang="ts">
import { Timeline } from "$lib/fancy-ui/timeline";
const items = [
{ id: "step-3", label: "Step 3" },
{ id: "step-2", label: "Step 2" },
{ id: "step-1", label: "Step 1" },
];
</script>
<Timeline {items} title="Project Timeline" description="Key milestones and updates.">
{#snippet content(item)}
<div class="space-y-4">
<h3 class="text-foreground text-lg font-semibold md:hidden">{item.label}</h3>
<div class="bg-card rounded-lg border p-4">
<h4 class="mb-2 font-semibold">{item.label}</h4>
<p class="text-muted-foreground text-sm">
Content for {item.label}. The timeline shows scroll-driven progress.
</p>
</div>
</div>
{/snippet}
</Timeline>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | TimelineItem[] | [] | Timeline entries with id and label |
title | string | - | Heading text |
description | string | - | Subheading text |
Slots
| Slot | Description |
|---|---|
content | Content snippet called for each timeline item, receives the item as argument |
Links
Related components
Br
Breadcrumb
A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.
Navigation Stable
Co
CommandMenu
A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.
Navigation Stable
Co
ContextMenu
A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.
Navigation Stable