Timeline

Smoothly animated timeline slider with resizable handles for interactive use.

Installation

npx shadcn@latest add @scrollxui/timeline

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

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.