shadcn.io is not affiliated with official shadcn/ui
Type Tester Gallery Block for Vue
A preview text field, a Weight slider, a Size slider and a Case control set one line in the theme's Sans, Serif and Mono stacks, above a table of the nine weights that marks the current one.
Installation
Overview
A type tester for Vue with Ark UI. The controls sit at the start: a preview text field, a Weight slider from 100 to 900, a Size slider from 16 to 72 px and a Case control (as typed, upper or lower). Across a divider, three specimen rows set that text in the theme's own Sans, Serif and Mono stacks at the weight, size and case you chose, and under them a table lists the nine weights in Sans with the current one marked by a dot and the word "current". No webfont is loaded: the page's fonts draw everything, so a family that ships fewer weights than the slider offers snaps to the nearest one it has. Each specimen row has a fixed height and shows one line, so nothing moves while you drag. On a phone the controls come first, then the specimens. It's built from Guides, InputGroup, Slider and ToggleGroup, with a native table. For type foundries, theme pages and font pickers.
FAQ
Which fonts does it show?
The theme's own: font-sans, font-serif and font-mono, whatever your project maps them to. Nothing is downloaded, so point those three tokens at your families and the block follows.
Why does the weight sometimes jump?
The slider sets a CSS font-weight from 100 to 900 in steps of a hundred. A variable font follows it exactly; a font that ships only a few weights draws the nearest one, so some steps look alike.
What happens to long text?
The field takes up to 48 characters, and each specimen shows one line in a fixed-height row, ending in an ellipsis when the line is wider than the row. Clearing the field shows the sample line again.
Does Case change what I typed?
No. It only changes how the specimens draw it, with CSS text transforms, so a screen reader still hears the text as you typed it.
How does the weights table work?
It is a native table, one row per weight, with the weight, its name and a sample in that weight. The row for the slider's weight is marked with a dot and the word current, so the mark does not depend on colour. On a phone the sample column is hidden and the names stay.