Observability span primitives for React
Headless, Radix-style primitives for rendering agent traces, sub-agent trees, and run timelines as collapsible waterfalls. Composable, unstyled, and fully reactive.
A live span waterfall. Collapse subtrees, and hold ⌘/Ctrl while scrolling to zoom the timeline.
Compose any trace UI
The same primitives drive a Gantt-style waterfall or a plain tree. You decide the layout; the resource handles the data.
running, completed, failed, and skipped each styled from data-span-status.
CollapseToggle removes a span's descendants from the visible list, not just hides them.
Push spans over time and the tree grows; running spans animate until they settle.
Why react-o11y?
Everything you need to build trace inspectors and run timelines, without fighting your styling framework or losing control.
Zero styling opinions. Every part is a plain element exposing data attributes; bring your own CSS or Tailwind.
Compound primitives you fully control. Root, Indent, CollapseToggle, StatusIndicator, TypeBadge, Name, Children.
Depth, child counts, collapse state, and the global time range are computed for you from a flat span array.
Built on the assistant-ui store. Push new spans and the UI updates live; running spans animate as they stream.
data-span-status and data-span-type drive your colors and badges with pure CSS, no conditional render logic.
Map spans from OpenTelemetry, Langfuse, LangSmith, or your own backend into SpanData and render in minutes.
Start building today