127 Components
Segmented Range Picker
NavigationFinancial timeframe range selector (1D, 1W, 1M, 1Y, ALL) with a sliding pill highlight, synchronized animated chart transitions, interval resolution badge, and high/low metric cards.
BTC/USD Market Overview
+2.45%
$68,420.50 5m interval
Range High$68,910.00
Range Low$66,780.00
Volume (1D)$24.8B
Time Interval5m interval
Active Window: 1D
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/segmented-range-picker.json"
Props
TypeScript props supported by <SegmentedRangePicker />.
| Prop | Type | Default | Description |
|---|---|---|---|
| ranges | ("1D" | "1W" | "1M" | "1Y" | "ALL")[] | ["1D", "1W", "1M", "1Y", "ALL"] | Array of timeframe options displayed in the segmented control. |
| defaultRange | "1D" | "1W" | "1M" | "1Y" | "ALL" | "1D" | Initially active timeframe option. |
| onRangeChange | (range: TimeRange) => void | — | Callback function fired whenever the selected timeframe changes. |
| className | string | — | Additional CSS classes to apply to the root container. |
Key Features
- Shared layoutId sliding pill highlight with Hooke's Law spring dynamics.
- Synchronized chart morphing and data transition between daily, weekly, monthly, and yearly windows.
- Integrated range metrics displaying interval resolution, range high, range low, and volume.
- Seamless switching between smooth spline curve and volume histogram view.
- Contextual emerald/rose colorway reflecting positive or negative net return across the selected range.
Keyboard & Accessibility
- Operates as a standard WAI-ARIA segmented tablist with arrow key navigation.
- Clear visual focus rings and contrast ratios exceeding WCAG AAA standards.
- Respects reduced-motion preferences with crossfade fallbacks for graph transitions.