shadcn.io is not affiliated with official shadcn/ui
Settings Command Menu Block for Radix UI
A calendar app's command menu shown open under its Preferences button: nine settings in three groups with switches that stay open, and three of them redraw the month behind it.
Installation
Overview
Switch preferences without leaving the page with this settings command menu for React with Radix UI. It opens from the month view of Prefmoor, a calendar app, whose header holds an outline field with its ⌘ K cap, and the month is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, its Preferences button at the end of the bar and the menu hanging below it. The menu is the catalog Command over nine settings in three groups, Appearance, Notifications and Privacy, each a row with a label, a hint and a drawn switch. Enter flips the highlighted setting, and so does Space while the field is empty; the menu stays open so several can be set in a row, and the foot counts "3 of 9 on". Three of the rows change the drawn month: Compact density tightens its rows, Week numbers adds a column of ISO weeks and Dim past events fades the days that have gone. 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 settings and query. For calendars, editors and any app with a long list of preferences that a keyboard user wants to reach by name.
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 the month view, 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 setting you flipped 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.
Are the switches real switches?
No, and on purpose. A row of a command menu is already the control: it is the option you press, and a switch inside it would be a second control in the same place. The switch is a drawn picture of the row's state, and the state is said in words after the label, "on" or "off", so a screen reader hears it once. Pressing the row with Enter or Space, or clicking it, flips the setting.
What do the settings change?
Three of the nine reach the drawn month: Compact density, Week numbers and Dim past events. The status line says when one does ("The month behind it is tighter"), and the other six change only their own state and the count in the foot. The drawing is a picture, aria-hidden, so the status line and the foot are where the change is announced.
Why does Space only flip when the field is empty?
The field is where you search, and a search can have spaces in it. While it is empty there is nothing to protect, so Space flips the highlighted setting and the hint in the foot shows only then. Enter always works. With nothing highlighted, Space says so on the status line instead of guessing.
What stays local, and how do I wire it?
All of it. The nine settings are state in the block, and the status line ends each change with "Kept in this demo only". In your app load START from your preferences API, save from flip (debounce it, and show the failure on the status line if the save fails), and replace the drawn month with the real view reading the same settings.
Is it accessible from the keyboard?
Yes. Type to search the labels, the hints and a few hidden words, the arrow keys move through the rows, Enter flips, and Escape closes the menu with focus on the field. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then, because the site's own search owns the key everywhere else. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.