Extras & data-viz

Tree view, Timeline, Bar list, Sparkline, Gauge.

stable

Source: src/components/ui/

Rendered example — light + dark

Light

Tree view

Timeline

Issue filed
09:14
FeedbackFAB pre-filled diagnostics.
PR opened
09:41
forja implemented, centinela validated.
Merged & deployed
10:02
Issue closed automatically.

Bar list

/gallery

1,840

/docs

1,210

/demos

760

/blog

320

Sparkline

Gauge

72%uptime

Dark

Tree view

Timeline

Issue filed
09:14
FeedbackFAB pre-filled diagnostics.
PR opened
09:41
forja implemented, centinela validated.
Merged & deployed
10:02
Issue closed automatically.

Bar list

/gallery

1,840

/docs

1,210

/demos

760

/blog

320

Sparkline

Gauge

72%uptime

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source file src/components/ui/ for the full API.

import { Timeline } from '@/components/ui/timeline';
import { BarList } from '@/components/ui/bar-list';

export function Activity() {
  return (
    <div className="space-y-6">
      <Timeline items={[{ title: 'Opened', at: '09:00' }, { title: 'Merged', at: '11:30' }]} />
      <BarList data={[{ name: '/gallery', value: 421 }, { name: '/docs', value: 188 }]} />
    </div>
  );
}

Props API

ButtonProps

Prop	Type	Default	Description
`asChild` opt	`boolean`	`false`	—

CalloutProps

Prop	Type	Default	Description
`title`	`string`	—	—
`variant` opt	`'default' \| 'success' \| 'warning' \| 'error'`	`'default'`	—
`icon` opt	`React.ReactNode`	—	Optional icon node (e.g. a Lucide icon element) shown beside the title.

DataTableProps

Prop	Type	Default	Description
`columns`	`ColumnDef<TData, TValue>[]`	—	—
`data`	`TData[]`	—	—
`initialColumnVisibility` opt	`VisibilityState`	`{}`	Initial column visibility — column id to visible boolean.
`initialGlobalFilter` opt	`string`	`''`	Initial global filter string.
`height` opt	`string \| number`	`'500px'`	Height of the scroll container in CSS units. Defaults to '500px'.
`estimateRowSize` opt	`number`	`40`	Estimated row height in px for virtualization. Defaults to 40.
`syncToUrl` opt	`boolean \| { key: string }`	`false`	Sync filter/sort/visibility/sizing to URLSearchParams so views are shareable and survive page refresh. Pass `{ key: 'myTable' }` to namespace URL params when multiple DataTables share a page. Defaults to false (no URL syncing).

DividerProps

Prop	Type	Default	Description
`children` opt	`React.ReactNode`	—	Optional centered text label rendered between two rules.

MetricProps

Prop	Type	Default	Description
`value`	`string \| number`	—	—
`label` opt	`string`	—	—
`delta` opt	`{ value: number; /** Semantic trend direction. Controls col…`	—	—

ProgressBarProps

Prop	Type	Default	Description
`value`	`number`	—	Completion percentage, clamped to [0, 100].
`label` opt	`string`	—	Accessible name for screen readers.

TrackerProps

Prop	Type	Default	Description
`data`	`TrackerBlock[]`	—	—