Timeline

A visually appealing and interactive timeline component with smooth animations, sticky labels, and a gradient scrolling effect.

API

Prop Name	Type	Default	Description
`containerClass`	`string`	`""`	Additional CSS classes for the timeline container.
`class`	`string`	`""`	Additional CSS classes for styling.
`items`	`{ id: string; label: string; }[]`	`[]`	List of timeline items, each with an ID and label.
`title`	`string`	`""`	Title of the timeline section.
`description`	`string`	`""`	Description text displayed below the title.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/timeline.json"

You can copy and paste the following code to create this component:

Timeline.vue

Animated Scroll Effect: The timeline bar animates smoothly as the user scrolls.
Sticky Labels: Each event label remains visible while scrolling.
Gradient Progress Bar: A visually appealing timeline indicator with gradient effects.
Slot Support: Custom content can be placed within each timeline item.
Responsive Design: Adapts seamlessly to different screen sizes.
Dark Mode Support: Automatically adjusts to light or dark themes.

On This Page