Detail Dial
Choose how deep an explanation goes: short, detailed or full. Free, MIT · Content and social › Interactive explainers
One explanation at the depth the reader picks: a short answer, an explanation or a full breakdown, around a summary that stays put. The change is immediate (a fade only accompanies it), focus stays on the switcher and the new level's name is announced, not its whole text.
Installation
npx valyro-cli@latest add detail-dialnpx shadcn@latest add https://valyro.xyz/r/detail-dial.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { DetailDial } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
levels * | DetailLevel[] | Levels from the least to the most detailed, two to four. The texts are the author's: nothing is generated. | |
summary | ReactNode | The point that stays put above the changing text. | |
value | string | Id of the shown level. An unknown or disabled id shows the summary and an error. | |
defaultValue | string | Initial level when uncontrolled. Default: the first available. | |
onValueChange | (id: string) => void | Called with the new value when it changes. | |
orientation | 'horizontal' | 'vertical' | 'horizontal' | horizontal (default): a segmented control; vertical: a list of levels with their descriptions. |
transition | 'none' | 'fade' | 'fade' | How the text changes: fade (default) or none. Never animates the height; reduced motion drops the fade. |
labels | Partial<DetailDialLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Feature Hotspots — Numbered points on an image that open a note about each detail
- Exploded Layers — Prepared image layers pulled apart with captions
- Prediction Card — The reader guesses first, then sees the answer and the explanation
- Version Scrubber — Step through prepared versions of a design with one slider
- Page Minimap — Schematic map of a long page with the visible area
- Article Header — Article header: section, headline, lede, authors and date
- Byline — Byline: authors, published and updated dates, reading time
- Article Figure — Image with caption and photo credit
- Pull Quote — Pull quote with attribution
- Key Points — “Key points” summary block
- Editor Note — Update, correction, disclosure and sponsored-content notes
- Article Toc — Article table of contents that tracks the current section
Previous: Prediction Card · Next: Version Scrubber · All Content and social