shadcn.io is not affiliated with official shadcn/ui
Font Showcase Carousel Block for React
Eight type specimens in a centre-snapped track where the centred face shows your own sample text in four weights with its classification and use, and its neighbours sit smaller and muted with a large Aa.
Installation
Overview
Try a type pairing with your own words, using this font showcase carousel for React with Base UI. Serifton, a type pairing guide, shows eight specimens in a centre-snapped track. The face in the middle is large and sets your sample text in four weights (300, 400, 500 and 700), with its classification (Sans, Serif or Mono) and a line on where it is used ("Long reads and essays"). Its neighbours sit smaller and muted with a large "Aa" and the name, and pressing one centres it. A "Sample text" Input in the header, up to 28 characters, retypes the centred specimen at once and keeps your words as the track moves. The foot says which specimen is centred, gives a dot for each and has Previous and Next Buttons. It is built from Carousel, Input, Badge, Button and Guides. The faces are your site's own sans, serif and mono stacks in different weights, styles and spacings, so nothing is loaded.
FAQ
How do I use my own faces?
Edit SPECIMENS. Each has an id, a name, a kind (Sans, Serif or Mono), a use line and a face: the Tailwind classes that set the family, style and spacing (font-serif italic). To add a face you load yourself, add its font-family class to your theme and use it in face. The four weights are in WEIGHTS.
What happens to the text I type?
It is held in the block and shown on whichever specimen is centred, so it stays as you move the track. It is cut at 28 characters, and an empty field shows a default line. On a narrow screen a long line wraps to two lines inside a fixed-height row, so the track never changes height as you type.
How does centring work?
Every specimen snaps to the middle, and the centred one is the current position. Sliding, dragging, pressing a neighbour, the dots, the arrow buttons and the arrow keys all end with one specimen centred, and the first and last can reach the middle. Embla aligns to the centre with its content not contained, so the ends can reach the middle.
How does it work with a keyboard?
Tab reaches the field, then the dots, Previous and Next; the neighbours are not tab stops and are hidden from screen readers, so only the centred face is read. With focus inside the panel the arrow keys move one specimen (mirrored in a right-to-left layout) and Home and End jump to the ends. The one polite line reads, for example, "Plain serif, 3 of 8, Serif".