Timeline

Smoothly animated timeline slider with resizable handles for interactive use.

MAKE WEBSITES10X MODERNwith

ScrollX UI

Installation

npx shadcn@latest add https://scrollxui.dev/registry/timeline.json

Usage

import { Timeline, TimelineText } from "@/components/ui/timeline";

<Timeline 
  rotation={-2.76}
  containerClassName="border-blue-500"
  handleClassName="border-blue-500"
  handleIndicatorClassName="bg-blue-500"
>
  <TimelineText>Video Editor</TimelineText>
</Timeline>

Examples

Custom

MAKE WEBSITES10X MODERNwith

ScrollX UI

API Reference

Timeline

Smoothly animated timeline slider with resizable handles for interactive use.

Props

Property	Type	Default	Description
`children`	ReactNode	`required`	Content inside the timeline container. Required in Timeline.
`rotation`	number	`-2.76`	Rotation angle of the timeline in degrees.
`initialLeft`	number	`0`	Initial left handle position in pixels.
`minWidth`	number	`56`	Minimum width in pixels between left and right handles.
`className`	string	`-`	Optional class applied to the main timeline wrapper.
`containerClassName`	string	`-`	Optional class applied to the timeline content container.
`handleClassName`	string	`-`	Optional class applied to both left and right draggable handles.
`handleIndicatorClassName`	string	`-`	Optional class applied to the small indicator inside handles.