Period tabs

Range selector tabs (1D / 5D / 1M / 1Y / ALL) — companion to ChartNavigator. Pure controlled component.

Primitive: ChartPeriodTabs

Interactive demo

Usage

import { ChartPeriodTabs } from '@ramtt/charts'

<ChartPeriodTabs
  periods={['1M', '3M', '6M', '1Y', 'ALL']}
  selected="1Y"
  onChange={setPeriod}
/>

Props

Prop	Type	Default	Description
periods*	`string[]`	—	Period labels in display order
selected*	`string`	—	Currently selected period
onChange*	`(period: string) => void`	—	Called when a tab is clicked
className	`string`	—	Additional Tailwind classes