StatsRail

Horizontal/vertical stat selector with animated indicator.

Props

StatsRailProps

Prop	Type	Default	Description
items	StatsItem[]	Required	Stat items
activeId	string	-	Controlled active item
defaultActiveId	string	First item	Initial active item
onChange	(id: string) => void	-	Selection change handler
renderItem	(item, state) => ReactNode	-	Custom item renderer
breakpoint	'md' | 'lg' | 'xl' | '2xl'	'md'	Responsive breakpoint
ariaLabel	string	-	Navigation aria-label
className	string	-	Container class

StatsItem

Property	Type	Required	Description
id	string	Yes	Unique identifier
label	string	Yes	Stat label
value	string | number	Yes	Stat value
hint	string	No	Additional context
delta	string	No	Change indicator
icon	ReactNode	No	Optional icon
to	string	No	Navigation link

StatsRailRenderState

Property	Type	Description
active	boolean	Whether item is active
onClick	() => void	Click handler
tabIndex	number	Tab index

Example

<StatsRail
  items={[
    { id: 'users', label: 'Users', value: '1,234', delta: '+12%' },
    { id: 'revenue', label: 'Revenue', value: '$45K' },
  ]}
  onChange={(id) => setActiveMetric(id)}
/>

See also

• StatsRail (Conceptual)