shadcn.io is not affiliated with official shadcn/ui
Unit Converter Command Menu Block for Radix UI
A unit converter's command menu shown open over a drawn page of recent conversions: type 12 km in mi for the answer and its formula, a swap button that reverses the units, 25 units in five kinds, and typed rates as of 9 Oct 2026.
Installation
Overview
Convert a unit by typing what you mean with this converter command menu for React with Radix UI. It opens from a page of recent conversions in Metrewell, a unit converter, 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: the field reads phrases such as 12 km in mi, 72 f in c or 5 usd in eur, and the first row is the answer, "7.46 mi", with its formula under it, "12 km × 0.621371 = 7.46 mi". Rows for the other units of the same kind follow, a number with one unit lists everything it can become, and with nothing typed the list is pairs by kind (Length, Mass, Temperature, Volume, Currency) that fill the field. A band above the field shows what is being converted, and its swap button, or Alt S, reverses the units. Enter copies the answer and files it on the drawn page. Currency uses typed reference rates as of 9 Oct 2026. 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 phrase. For recipes, shipping tools, spreadsheets and any app where units are typed in the wrong system.
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 page of recent conversions, 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 phrase or a swap 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.
What phrases does it understand?
A number, a unit, then optionally in, to, as or into and a second unit: 12 km in mi, 72 f to c, 5 usd as eur. Units can be written as codes or as words (km, kilometres, miles, feet, °C, celsius, lbs), in any case, and numbers may have thousands commas. A number and a unit alone lists every unit of the same kind; a unit it does not know says so and suggests a few; two units of different kinds, such as km and kg, say they measure different things.
Are the currency rates live?
No. They are typed reference rates as of 9 Oct 2026, stated in the formula line of every currency answer ("rate as of 9 Oct 2026"), and the demo does not fetch anything. Lengths, masses and volumes use exact factors, and temperatures use their own formulas, shown in the row, such as (72 − 32) × 5/9 = 22.22 °C. In your app replace the currency factors with rates from your provider and keep the date next to the answer.
What does the swap do?
It reverses the units and keeps the number, so 12 km in mi becomes 12 mi in km, and says so on the status line. It is a real button above the field, kept quiet and not removed when there is nothing to swap (so the band never changes height), and Alt S (Option S on a Mac) does the same from the field. The button keeps focus where it was when you click it.
What stays local, and how do I wire it?
The conversions and the page are local, and the clipboard write is real. The 25 units and the rates are typed constants, and filing an answer only adds a line to the drawn page. In your app load UNITS from your catalogue, write the answer into the field you are filling in pick, and keep the formula text so users can check the arithmetic.
Is it accessible from the keyboard?
Yes. Type a phrase, the arrow keys move through the answer and the other units, Enter copies, and Alt S swaps the units. 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.