shadcn.io is not affiliated with official shadcn/ui
Font Manager CRUD Block for React
A studio's type library as cards set in the theme's own sans, serif and mono stacks, with weight toggles, an editable sample line, a dashed tile that adds a font in place and a Remove that leaves an Undo.
Installation
Overview
Keep a studio's fonts where its designers can change them, with this font manager for React with Base UI. A hairline frame with a plus mark on each corner holds one frame of fixed height that scrolls inside itself: six font cards in a hairline grid, two columns from the small breakpoint, each with the font's name, a category Badge and a specimen. The specimen is set in the theme's own sans, serif or mono stack, one line per weight that is on, so no font file is loaded or sent. A Toggle Group of 400, 500 and 600 changes the card at once, a sample line is an Input you can retype, and Remove takes the card out with an Undo in the foot. The last cell is a dashed "Add a font" tile that turns, in place, into a small form with a name Field and a Segment Group for Sans, Serif or Mono; its Add font is the only Shine Button. A name must be filled and not already in the library, and at least one weight always stays on. Emptying the library shows an Empty state without the frame changing height, and the bands are ruled by Guides. For design studios, brand kits and any library you add to and trim.
FAQ
How do I fill it with my fonts?
Edit FONTS. Each has an id, a name, a category of sans, serif or mono, a sample line and the weights that are on, from 400, 500 and 600. The counts, the cards and the idle sentence are all derived from that list. New fonts get their id from a counter held in state, never from the clock.
Why do the specimens not look like the font names?
Because no font file loads. A specimen uses the theme's own sans, serif or mono stack and the weight you toggle, so it shows what that category does at 400, 500 and 600 in your theme. In your app, load the real files, set a font-family per card and keep the toggles as they are.
What do the weight toggles do?
Each press changes the card at once: the specimen gains or loses a line at that weight and the polite line says which weights the font now has. The group is a set of toggles, so any mix works, but the last weight can't be switched off. The block says "Ledgeway Sans keeps at least one weight" and leaves the card as it was.
How does the Add a font tile work?
It is a button until pressed. Then it becomes a form in the same cell with a name and a category, and focus moves to the name. A name that is empty, over 28 characters or already in the library is refused with its reason in a line that is always there. Add font puts the new card last, marked New, with its sample line focused; Cancel puts the dashed tile back and focuses it.
What does Undo restore?
The last removal only. Removing a font stores the library as it was, and Undo puts it back, in its place, and focuses its Remove button. Adding a font replaces that Undo, and nothing times out.
What stays local, and how do I wire a real save?
The fonts live in React state in this tab and a reload brings the original six back; nothing is uploaded. In your app call your API in add, weights, sample and remove, update the list from the response, and show a server refusal in the same reason line the form already has.