Extras & data-viz

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

stable client:visible

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 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>
  );
}