shadcn.io is not affiliated with official shadcn/ui
Reading Preferences Blog Block for React
Reader preferences with a live preview: a Slider for text size, a ToggleGroup for serif or sans, a Select for line spacing and a Switch for justified text, with a framed sample article that follows every control and a Reset button.
Installation
Overview
A reading-preferences panel for React with Base UI, written for Kernwick, a typography blog. A start-aligned header sits over a split behind a divider. At the start are four controls on hairline rows: a Slider for the text size (14 to 20 pixels), a ToggleGroup for serif or sans, a Select for the line spacing and a Switch for justified text, then a ghost Reset. At the end a framed sample article follows every control at once. The preview is scoped to its own frame: only the sample changes, never the page, and nothing is saved. The frame holds its height, so moving a control never shifts the layout. It is built from Guides, Slider, ToggleGroup, Select, Switch and Button. For reading apps, long-form blogs and documentation sites.
FAQ
Does it change the whole page?
No. The controls set a font size and a line height as CSS variables on the sample only, plus a typeface and an alignment class. Nothing is stored. To apply the choices to a real article, save them (a cookie or your user settings) and put the same variables on your article element.
Why does the frame never change height?
Larger text and roomier lines would make the sample taller and push everything below it. Two unseen copies of the sample, one serif and one sans, at the largest settings share its grid cell, so the frame is always as tall as the worst case and the live sample sits at its top.
Which controls are used, and how do they work from the keyboard?
A Slider (arrow keys move by two pixels, Home and End jump to the ends), a ToggleGroup that always keeps one choice, a Select, and a Switch. All are foreground-toned, so the page has no primary control. The sample size is read out with the slider as "18 pixels".
Related
- Pro
Speed Select Audio Blog
Audio, video, photosA read-aloud list: a Select picks the playback speed and every article's listening time and the total recompute, beside a waveform drawn from the title's letters with chapter ticks.
- Pro
Reading Time Blog
Reading toolsPosts by length with a reading-speed Slider: every post shows its words, a length bar against the longest post and the minutes it takes at your speed, with a total that recalculates as you move the slider.
- Pro
Post Summaries Blog
Article partsLong-read summaries with a length toggle: One line, Three bullets or Paragraph switches every post summary at once, each labelled as written by the author, in rows that never change height.
- Pro
Scrolling Article Table of Contents Blog
Article partsA framed, fixed-height essay with six sections beside a rail that follows the section in view with a sliding bar, and a Jump to select on phones; choosing a section scrolls the essay, never the page.
- Pro
Reaction Bar Blog
Reader feedbackA reaction bar under a review: five icon reactions with rolling counts in one raised strip, any number on at once, and a line that names the top reaction from the counts.
- Pro
Reader Poll Blog
Reader feedbackA reader poll in a split: a RadioGroup of four choices and a Vote button at the start, result bars with percentages, vote counts and a total at the end, and a Change vote button that takes your vote back.