Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Response Times Trace Dashboard Block for Ark UI

Five slow requests to pick from and the chosen one drawn as a trace waterfall on a shared time axis, nested by service, with the slowest span marked and a toggle for spans over 10 ms.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Find where a slow request spent its time with this trace panel for React with Ark UI. A hairline frame with a plus mark on each corner lists five slow Slowlane requests as radio rows with the route, the total time and the status. Under them, the picked request is drawn as a waterfall: each span is a bar on one shared time axis, nested by indent (gateway, auth, the service, its database and cache calls), with its name and milliseconds beside it. The span with the most time of its own is solid and named in a polite line, such as "db.query: 142 ms, 61% of the request". A Toggle Group in the header switches between all spans and the ones over 10 ms, and a hidden table lists the same spans. It's built from Toggle Group and Guides. For backend teams reading traces.

FAQ

How do I fill it with my traces?

Edit TRACES: an id, the route, the total ms, a status and spans, each with a name, a depth, a start offset and a duration ms, in the order a trace viewer lists them. The axis, the bars, the slowest span and the sentences are all worked out from those.

How is the slowest span chosen?

By the time spent in the span itself: its duration minus its direct children's. A gateway span that wraps everything is long but spends little time of its own, so the span that does the waiting is the one marked.

What does Over 10 ms hide?

Spans of 10 ms or less, such as a cache lookup, so the bars that matter stand out. The drawing keeps its height, the count above it says how many of the spans show, and the slowest span is never hidden.

What stays local, and how do I wire it for real?

Everything: the traces are typed and nothing is recorded. To wire it, load a trace from your tracing backend when a request is picked and convert its spans to start and ms relative to the root.

Is the waterfall available to screen readers?

Yes. The bars are decorative, the same spans are in a hidden table with their start, duration and own time, and the slowest span is read in the status line.

How does it look on a phone?

The axis stays across the full width and each span name sits above its bar instead of beside it.

All 200 dashboard blocks