Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Query Performance Dashboard Block for Ark UI

An index advisor with five candidate indexes you tick, the slow queries each one serves, the minutes a day it saves and the write cost it adds, and a table whose average times drop for the ticked ones.

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

Decide which indexes are worth creating, with this query performance panel for React with Ark UI. A hairline frame with a plus mark on each corner opens with five candidate indexes, each a Checkbox row that names the table and columns, how many slow queries it would serve, the minutes a day it would save and the extra write time it costs. Under them a table of the eight slowest queries shows each one's calls a day and average time, which drops, with the old figure struck through, for every query a ticked index serves. The header sentence adds it up ("2 indexes would save 49 minutes a day for 9% more write time"), and a Shine Button in the foot copies the CREATE INDEX statements and marks those rows as created. It's built from Checkbox, Badge, Shine Button and Guides. For database consoles and performance reviews.

FAQ

How do I fill it with my own queries?

Edit CANDIDATES and QUERIES. A candidate has a table, its columns, the CREATE INDEX statement and a write cost as a percentage. A query has its SQL, calls a day, the average milliseconds today and with an index, and the indexId of the candidate that serves it, or an empty string when none does. The counts, the minutes saved and the header sentence are all worked out from those.

Are the timings measured?

No. The before and after figures are typed, so the savings are what the data says, not a benchmark. To make it real, take the before figures from your slow query log, and the after figures from a hypothetical index tool or a replica where you have built the index.

What does Create the indexes do?

It copies the statements of the ticked indexes to your clipboard when the browser allows it, locks those rows as "Created in this demo" and says that nothing ran. No database is touched. To make it real, send the statements to a migration, ideally with CREATE INDEX CONCURRENTLY so writes are not blocked.

Why does each index show a write cost?

Every index has to be updated on each insert and update of its table, so more indexes mean slower writes. The panel adds the costs of the ticked indexes so you see the trade, not only the gain. The percentages are typed.

How does it look on a phone?

The candidates come first with their figures on a second line, the table drops its calls column and the query text truncates, and the foot stays pinned to the bottom of the screen.

All 200 dashboard blocks