shadcn.io is not affiliated with official shadcn/ui
Font Picker Command Menu Block for Ark UI
A document editor's font menu hung from the toolbar's font name, with six system font stacks each set in its own real CSS stack, a specimen band that follows the highlight, a row of weights and an italic toggle, and Enter to set the document's font.
Installation
Overview
See a font before you choose it with this font picker command menu for React with Ark UI. It hangs from the font name in the toolbar of Glyphmill, a document editor, whose header holds an outline field with its ⌘ K cap, and the editor, a toolbar over a page of text, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command with six stacks, System sans, Humanist serif, Mono, Rounded, Condensed and Slab, each named by the family it tries first and drawn in its own real CSS stack, so every row is set in the font it picks. A specimen band at the top of the menu follows the highlighted row, "The quick brown fox" large and a line at a smaller size, and a row of weights from 300 to 700 and an italic toggle restyle the specimen. Enter sets the document's font, weight and style on the page behind and closes the menu. Only system and generic families are used, so nothing is downloaded and a family a device lacks falls to the next in its stack. 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 weight and query. For editors, page builders and any product with a font setting.
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 with its specimen band drawn inline under a picture of the editor, 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 the weight you chose in the copy is the one the dialog opens with. 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.
Which fonts does it use, and does it download any?
None are downloaded. Each stack is a CSS font-family list of system and generic families, such as ui-rounded, "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", Calibri, sans-serif, and the browser picks the first one the device has. The row says which family the stack tries first and the specimen says what it falls back to, so on a device without Charter the Humanist serif is drawn in Cambria or in the generic serif. That is also why a font may not have all five weights: a family without a 300 is drawn in its nearest weight. In your app swap the stacks for your own, and load a web font with font-display: swap if you want one.
What follows the highlight, and what does Enter change?
The specimen follows the highlighted row, in the weight and style set above the list; the weights and the italic toggle change only the specimen. Enter sets the drawn document's font, weight and style together, puts a tick and the words ", in the document" on that row, names the choice on the status line and closes the menu with focus on the field. The document's title and text and the font name in the toolbar are drawn in what you chose.
Where does the sample text come from?
It is the block's own: a pangram for the specimen and two sentences for the document, written for this demo and typed in the block. Nothing is read from your documents, and in your app the specimen can show the first line of the selected text instead.
What stays local, and how do I wire it?
All of it. The stacks, the weight, the italic flag and the document's style are typed state in the block; nothing is saved and nothing leaves the page. In your app build STACKS from your own list, make pick write the family, weight and style to the selection or to the document's defaults, and keep the specimen as the preview.
Is it accessible from the keyboard?
Yes. Type to search by name, family or word ("serif", "mono", "rounded", "Rockwell"), the arrow keys move through the fonts, Enter uses the highlighted one and Escape closes the menu and puts focus on the field; Tab reaches the weights and the italic toggle, which sit above the input. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens. The specimen is a labelled region that is not read out as you move; the rows name each font.
How does it look on a phone?
The editor goes. The specimen shrinks to its one large line, the weights and the italic toggle stay (the toggle shows only its icon), and the copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.