Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Database Query Tool Card AI Block for Solid

A finished database call as a tool card: the SQL with Copy, four explained clauses that mark their place in the query when pressed, and a sortable result table of six rows with the time taken.

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

Let people see what an assistant asked the database and why, with this query card for Solid with Ark UI. Rowbrook, a query tool, opens on a header that reads "Ran a query on orders" with a check, a badge for six rows and one for 42 ms. At the start the SQL sits in a monospace pane with a real Copy Button; at the end an explanation lists the four clauses (SELECT, FROM, WHERE, GROUP BY), each with one plain sentence. Focusing or pressing a clause marks its line in the query, and Clear mark takes the mark off. Under both a Table shows the result, and each column head sorts it with the right aria-sort. For agent tool logs, audit trails and any place a query needs a second look.

FAQ

What stays in the page, and how do I make it real?

Everything. The SQL, the explanations and the six rows are typed in the file, and the row count in the badges is counted from the rows. No database is reached, as the line under the panel says. To wire it for real, fill CLAUSES from the parsed query your tool ran and RESULTS from its rows.

How does a clause mark its line?

Each explanation is a button. Focusing it or pressing it sets the marked clause, and the matching line in the query gets a darker background and a bar at its start, and a hidden "(marked)" for screen readers. The mark stays until you press another clause or choose Clear mark, so it also works on touch.

How does sorting work?

Pressing a column head sorts by it; pressing it again flips the direction. Text sorts A to Z first and numbers high to low first. The head you sorted by carries aria-sort and an arrow, and the status line says how the rows are ordered.

How does it work from the keyboard?

The query is a focusable region you can scroll sideways, the clauses and the sort heads are buttons, and the Copy button copies the whole query. Tab order follows the reading order: query, explanation, result.

How does it look on a phone?

The explanation stacks under the query, and the result table keeps its three columns, which fit at 320 pixels. Long SQL lines scroll sideways inside the query pane.

Does it work in a right-to-left language?

The explanations follow the direction. The SQL and the keywords stay left to right, as do the dollar amounts, and the mark bar flips to the other side with the text.

All 100 ai blocks