shadcn.io is not affiliated with official shadcn/ui
Developer Tools Command Menu Block for Radix UI
An in-app developer toolbar's command menu docked at the bottom end of a small app: switches that really draw a grid, outline every box and slow the fades, a render counter, and a clear-storage action.
Installation
Overview
Debug a layout from the keyboard with this developer tools command menu for React with Radix UI. It opens from the App panel of Lanternbar, an in-app developer toolbar, whose header holds an outline field with its ⌘ K cap, and a small drawn app sits under a soft scrim inside a hairline frame with a plus mark on each corner, the menu docked at its bottom end. The menu is the catalog Command with four switches and two actions. Show grid fades twelve columns over the app, Outline elements draws a dashed outline around every box, Slow animations stretches those fades from 300 to 900 ms, and Log renders counts the app's redraws, one for each tool you switch while it is on. Clear storage empties the three local keys the app holds, and Reset tools switches everything off. Enter runs the highlighted row, and so does Space while the field is empty; the menu stays open, and the foot names what is on, such as "Grid, outlines". The app behind it really changes. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same tools and query. For design systems, dashboards and any app that wants a developer toolbar one key away.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a small app, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a tool you switched in the copy is there in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
Do the tools really change the app behind the menu?
Yes, the drawn app. Show grid fades a twelve-column overlay over it, Outline elements sets a dashed outline on every box inside it, and Slow animations changes the --dur custom property those fades use from 300 ms to 900 ms, so with it on you can watch the grid arrive slowly. They are CSS on the drawing, not a hook into your page. In your app point the same switches at your own root: a class or an attribute that your stylesheet turns into the grid and the outlines.
What does Log renders count?
The drawn app's redraws as this demo defines them: it starts at 1, and each tool you switch while logging is on adds one. It is a count the block keeps, not React's profiler, and the row's hint says so. In your app count with the profiler's onRender callback, or a render counter ref in the component you are watching, and show the number in the foot the same way.
What does Clear storage clear?
Only the three keys the drawn app holds in the block's state; nothing real is touched, and the status line says so. The row shows the key count at its end ("3 keys"), then "Empty", and pressing it again says storage is already empty. In your app clear the keys you own, by name, and never localStorage.clear(), which empties other tools' keys too.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter runs a row, and Space does too while the field is empty. Escape closes the menu with focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.