Skip to component details
EXEPERTAI LAB
ProductCapabilitiesTrustFAQUI GalleryBlogNews
Sign inOpen app ↗
ProductCapabilitiesTrustFAQUI GalleryBlogNewsSign in
← Browse gallery
Data·@exepert/ui / TraceTimeline

Trace Timeline

A chronological view of request steps, timing, and provider events.

Open in Playground ↗All components

Variants and states

4 copy-ready examples

Request trace

A short request with provider and tool spans.

Open in Playground ↗
Preview loads on approach
import { TraceTimeline } from "@exepert/ui";
import "@exepert/ui/styles.css";
export default function Example() {
  return (
    <TraceTimeline items={[{ id: "request", title: "Request", time: "1.8s", status: "complete" }, { id: "model", title: "Model response", time: "1.2s", status: "active" }, { id: "tool", title: "Tool call", time: "420ms", status: "pending" }]} />
  );
}

Usage

Keep the time scale and event labels visible.

Props

  • items: array
  • status: complete | active | pending | error

Accessibility

  • Each event has a readable name and duration in document order.
  • Use text labels alongside timing marks.

Install

Install the pinned public release, then import the component and stylesheet.

npm install @exepert/ui@0.1.0

import { TraceTimeline } from "@exepert/ui";

import "@exepert/ui/styles.css";

EXEPERTAI LAB

Compare supported models, inspect system behaviour, and understand the context around each result.

PrivacyTermsContact

EXEPERT AI is an independent software and AI research lab in Malaysia

Malaysia · hello@exepert.com

Open in Gmail ↗

© 2026 EXEPERT AI. All rights reserved.