shadcn.io is not affiliated with official shadcn/ui
Cache Purge Command Menu Block for Radix UI
A CDN console's command menu shown open over its cache page: four stores with size bars and hit rates, a purge that empties a bar, a confirm row for purging all, and an Undo that stands for eight seconds.
Installation
Overview
Purge a cache and take it back with this cache command menu for React with Radix UI. It opens from the cache page in Hoardhouse, a CDN console, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command, narrow: four stores (Edge, Browser, Data and Image) as rows with a size bar in proportion to the biggest and a hit rate, and a Purge all caches row that asks for Enter twice. Enter on a store empties it, its bar goes to nothing on the page behind the menu, and a band above the field says what was purged and offers Undo, a button or Alt Z, for eight seconds with a thin bar draining. 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 stores and query. For CDN, build and storage consoles where a destructive action should be quick and reversible.
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 cache page, 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 purge or an undo in the copy is 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.
How long does the undo last?
Eight seconds from the purge, with the Undo button or Alt Z (Option Z on a Mac). A thin bar in the band drains over those seconds, and under reduced motion it is hidden and the status line carries the offer instead. When the time runs out the band goes back to its idle line and the status line says the purge can no longer be undone. A second purge starts a new offer and replaces the first.
Why does Purge all ask twice?
Because it is the destructive one. The first Enter changes the row to "Press Enter again to purge all" and says so on the status line; the second purges every store that holds something, with one undo for all of them. Typing, or choosing a store, cancels the question, and an empty set of stores says they are already empty instead of purging nothing.
What do the bars show?
Each bar is the store's current size as a share of 20 GB, drawn in a left-to-right figure so it does not flip in right-to-left languages, with the size and the hit rate as words beside it. The drawn cards behind the menu use the same bars, so a purge empties them too. The bars animate their width briefly, and not under reduced motion.
What stays local, and how do I wire it?
All of it. The four sizes and hit rates are typed constants and "purging" sets a number to zero, so nothing is deleted anywhere. In your app call your purge endpoint in purge, keep the previous sizes only if the undo is a real restore (most CDNs cannot restore, so offer a re-warm instead), and read the sizes and hit rates from your metrics.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter purges, Alt Z undoes, and Tab reaches the Undo button. Escape closes the menu with focus on the field, and 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.