caliper uidocs
DemoSign inGet Pro

Clip timeline

Pro

Tracks of clips under a ruler and a playhead you scrub or play: drag clips (they snap and never overlap), or move them with Alt and the arrows.

Installs components/ui/clip-timeline.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/clip-timeline
0:00 / 0:30
0:000:050:100:150:200:250:30
Video
Voice
Music

When to use #

Use it for

  • Video, audio and presentation editors.
  • Scheduling blocks along a single timeline.

Skip it when

  • Calendars; use the resource timeline.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/clip-timeline

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { ClipTimeline } from "@/components/ui/clip-timeline"

The worked example comes with Pro

The 12-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

ClipTimeline

component
PropTypeDefaultDescription
tracks *readonly TimelineTrack[]—
duration *number—Length of the whole timeline in seconds.
onTracksChange *(tracks: TimelineTrack[]) => void—
classNamestring—

Accessibility #

It exposes slider, group and status semantics, with aria-label, aria-hidden, aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
→Moves to the next item or value.
←Moves to the previous item or value.
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.