KQ-632 · PERFORMANCE/LINE
Performance Line
A performance chart whose period selector redraws the trace instead of cross-fading it: switching remounts a clip rectangle at zero width that opens across the plate on a durations.page tween, wiping the new line and its fill in from the left. The pill under the chosen period travels on a useId-prefixed layoutId on snap, the return figure rolls its digits on the same spring with a caret that turns to match the sign, and the start marker labels itself once the wipe has passed. The selector is a real tablist with a roving tabindex — Left and Right step, Home and End jump, focus activates — and the plate is its panel with an aria-label sentence stating the whole period.
Period 1Y · Return +52.76% since 4 Sep 2025
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/performance-line
Props
- periods
- PerformancePeriod[]
- default —
- Each period's id, short tab label, an already-formatted start label, and its closes oldest first.
- value / defaultValue
- string
- default —
- Controlled or initial period id; defaults to the first period.
- onValueChange
- (id: string) => void
- default —
- Fires from the click or key that changed the period.
- format
- (value: number) => string
- default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
- Formats the current value and the start chip's opening figure.
- label
- React.ReactNode
- default —
- Visible heading beside the selector; omit it and pass aria-label.
- height
- number
- default 132
- Plate height in px. The width is fluid and every marker is placed in percentages.
| Prop | Type | Default | Description |
|---|---|---|---|
| periods | PerformancePeriod[] | — | Each period's id, short tab label, an already-formatted start label, and its closes oldest first. |
| value / defaultValue | string | — | Controlled or initial period id; defaults to the first period. |
| onValueChange | (id: string) => void | — | Fires from the click or key that changed the period. |
| format | (value: number) => string | Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }) | Formats the current value and the start chip's opening figure. |
| label | React.ReactNode | — | Visible heading beside the selector; omit it and pass aria-label. |
| height | number | 132 | Plate height in px. The width is fluid and every marker is placed in percentages. |