shadcn.io is not affiliated with official shadcn/ui
Type Tester Gallery Block for React
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 React with Base 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.
Related
- Pro
Color Token Grid Gallery
Design assetsTwelve of the theme's own colour tokens as swatches on shared hairlines, each with its name and its painted value in the format you choose, and a Copy button that copies exactly that text.
- Pro
Pattern Kit Gallery
Design assetsTwelve tileable CSS surfaces in cells on shared hairlines, with a Scale slider and a Contrast slider that repaint every cell live, and a Copy CSS button that copies the real rule for the pattern you choose.
- Pro
Searchable Icon Grid Gallery
Design assetsForty-eight drawn glyphs on shared hairlines with a search field, category tabs, a size toggle and a stroke slider, where pressing a glyph copies its name and confirms it in place.
- Pro
Logo Lockups Gallery
Design assetsFour drawn logo lockups in framed cells with a Show clear space toggle that lays the margin over every lockup, and real SVG and PNG downloads under each.
- Pro
Component Catalogue Gallery
Design assetsTwelve components drawn in plain boxes on shared hairlines, each with a status badge and a variant count, a status filter, and a Show variants switch that turns every drawing into its list of variants.
- Pro
Brand kit tabs About
Press and recognitionA brand kit for a brand-kit product: tabs for the mark, the theme's own colour tokens with a copy button, a type specimen, and do and don't pairs.