Detent Tabs
A range switcher with 2 to 4 options and a draggable thumb with magnetic detents. Continuous chart interpolation, value blending, and collision-free axis fading.
Dependencies
motionclsxtailwind-merge
Interaction
Direct manipulation range switcher. Dragging the thumb interpolates the chart SVG paths and metric values in real time with magnetic detent pull, settling into detents with tuned spring dynamics.
Props
| Prop | Type | Description |
|---|---|---|
| ranges | DetentTabsRange[] | Array of 2 to 4 range definitions with id, label, value, delta, points, and axis labels. |
| title | string | Heading text displayed in the header row. |
| formatValue | (n: number) => string | Formatter function for the headline numerical value. |
| index | number | Controlled index for the active range detent. |
| defaultIndex | number | Uncontrolled initial active range index. |
| onIndexChange | (i: number) => void | Callback fired when a detent commits on release, click, or keyboard navigation. |
| className | string | Optional CSS classes merged with the root container. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.