Time Field
Native time input styled to match the design system. Install Time Field from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
2 storiesView componentTimeline Scrubber
Range slider for scrubbing through canvas state playback, with optional milestone ticks. Install Timeline Scrubber from the VLLNT UI registry with the shadcn CLI. React Native source for Timeline Scrubber is included in VLLNT UI 0.4.0 for iOS and Android. It is source-only; npm publication is pending.
Supported platforms:WebNative
What it is and when to use
Timeline Scrubber is a controlled range slider for scrubbing through canvas or video-style playback in React. Reach for it when you need a thin timeline track with a draggable handle, optional milestone ticks, tone variants, and formatted value labels. It builds on a native input type=range, so keyboard, pointer, and screen-reader support come for free. The host owns the value and drives the playback loop; the component is pure presentation.
FormPreview
Switch between light and dark to inspect the embedded Storybook preview.
Range slider for scrubbing through canvas state playback, with optional milestone ticks. Part of the form family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | @vllnt/ui-native, react-native | Native-adapted interaction and accessibility |
Installation
Add Timeline Scrubber to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
# React Native is source-only; copy the React Native source aboveSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Timeline Scrubber?
- Timeline Scrubber is a controlled React range slider for scrubbing through playback, rendering a track with a value cursor and optional milestone ticks.
- How do I add Timeline Scrubber?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/timeline-scrubber.json` to install it into your project via the shadcn CLI.
- Is Timeline Scrubber keyboard accessible?
- Yes. It is built on a native input type=range, so keyboard navigation, pointer input, and screen-reader semantics work out of the box.