Name: Default File
Availability: InStock
Author: Vignesh V

Installation

Install with the CLI, or copy the component source into your project.

Add timeline (npm)

1
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add timeline

Properties

Virtualized timeline with shared row scroll, time-scale bars, dependency routing, and snapped drag edits. Requires @tanstack/react-virtual.

Prop	Type	Default	Notes
rows	TimelineRow[]	-	Row models with id and label (required).
visibleRange	TimelineVisibleRange	-	Inclusive ISO date range for the scale ({ start, end }) (required).
dependencies	TimelineDependencyEdge[]	[]	Directed edges between row ids ({ fromId, toId }) drawn as dependency paths.
zoom	"day" \| "week" \| "month" \| "quarter"	"day"	Fine tick unit for the time scale.
loading	boolean	false	Show placeholder rows and set aria-busy.
emptyContent	ReactNode	-	Content when there are no rows and loading is false.
overscan	number	6	Extra virtual rows rendered outside the viewport.
estimateRowSize	number	-	Estimated row height in pixels for virtualization. Defaults to the kit row height token.
onBarChange	(id: string, next: TimelineBarChange) => void	-	Called when a bar finishes a pointer or keyboard edit with ISO start and due.
onRowClick	(id: string) => void	-	Called when a row is activated.
renderRowMeta	(row: TimelineRow) => ReactNode	-	Optional trailing content in the row label column.
aria-label	string	-	Accessible name for the treegrid. Defaults to the kit string catalogue. Override when the host supplies a visible heading.
className	string	-	Additional styles on the root.

Prop	Type	Default	Notes
id	string	-	Stable row id (required).
label	ReactNode	-	Label column content (required). Prefer a string so the bar cell can reuse it as part of its accessible name.
start	string	-	ISO start date for the bar.
due	string	-	ISO due date for the bar.
progress	number	-	Optional completion fraction for the bar fill.
colorToken	string	-	CSS custom property name used as the bar fill, for example --success.