Timeline

Timelines present ordered events in a way that feels more narrative than a plain list.

Installation

Add the timeline component to your project:

npx velyx@latest add timeline

pnpm dlx velyx@latest add timeline

yarn dlx velyx@latest add timeline

bunx --bun velyx@latest add timeline

Alpine.js Required: The timeline component uses Alpine.js for staged reveal animations.

Timeline

Live preview rendered from the registry in an isolated iframe.

Loading preview...

Failed to load preview

Code

Timeline

Full preview from the registry iframe.

Open in tab

Loading preview...

Timeline

Live preview rendered from the registry in an isolated iframe.

Loading preview...

Failed to load preview

Code

Timeline

Full preview from the registry iframe.

Open in tab

Loading preview...

Prop	Type	Default	Description
`items`	`array`	`[]`	Ordered timeline entries
`variant`	`string`	`'vertical'`	Layout mode: `vertical` or `horizontal`
`size`	`string`	`'md'`	Size preset
`lineStyle`	`string`	`'solid'`	Connector style: `solid`, `dashed`, or `dotted`
`animated`	`bool`	`true`	Enables staged reveal transitions
`alternating`	`bool`	`false`	Alternates sides in vertical mode