shadcn.io is not affiliated with official shadcn/ui
Database Metrics Dashboard Block for React
Four readings and an hour of queries a second against p95 latency over seven slow statements you can sort, with the full SQL, a copy button, a cost-barred query plan and an index hint for the one you choose.
Installation
Overview
Find the statement that costs a database the most, with this metrics panel for React with Base UI. A hairline frame with a plus mark on each corner holds four readings for an hour of Indexcard traffic (average queries a second, the peak and its minute, the latest p95, how many statements average over 50 ms), a chart of queries a second against p95 latency, and a table of seven slow statements with the SQL cut short in mono, average ms, calls and total ms. Every column header sorts the table. Choosing a statement fills the side cell with the whole statement in Syntax Text with a Copy Button, and its query plan as an indented list with a cost bar per step and, where one fits, an index hint such as "Missing index on orders(customer_id)". It's built from Syntax Text, Copy Button and Guides, with CSS entrances only. For database consoles, performance reviews and on-call handovers.
FAQ
How do I fill it with my own statements?
Edit STATEMENTS. Each has an id, the sql, a mean time avg in ms, a calls count, a plan of steps (a label, a depth and a cost) and a hint that is an empty string when no index would help. The total column is avg times calls, worked out when the table renders, and the readings above the chart are worked out from the two hourly series.
Where do the chart numbers come from?
QPS and P95 are 60 values, one per minute, made by a small seeded generator so they are the same on every render and on the server. A real panel would read them from your metrics store. The chart is drawn as SVG with fixed-width strokes, and a visually hidden table lists every fifth minute for screen readers.
What do the plan bars mean?
Each step's bar is its planner cost as a share of the most expensive step in that plan, so bars compare steps inside one plan and never across statements. The depth indents the step under the one that calls it, like the output of EXPLAIN.
What stays local, and how do I wire it for real?
Everything is typed or seeded and nothing is measured. Copying uses the browser's clipboard and nothing else. To use real data, take statements from your database's statistics view and plans from EXPLAIN, and replace QPS and P95 with the last hour from your metrics store.
Can I use it without a pointer?
Yes. The column headers and statements are real buttons, the sorted header carries aria-sort, the chosen statement is marked with aria-current, the code is a named region you can scroll with the keyboard, and a polite status line says which statement is shown and how the table is sorted. An index hint is words, never only a colour.