Beta
Index Card
The markets sidebar card — one big price over a full-bleed line you can scrub, a tab underline that walks between indices, and the one-paragraph read below. Scrubbing dims everything right of the cursor and recomputes the headline off the hovered sample.
Index Card
The markets sidebar card — one big price over a full-bleed line you can scrub, a tab underline that walks between indices, and the one-paragraph read below. Scrubbing dims everything right of the cursor and recomputes the headline off the hovered sample.
When to use it
For a small set of benchmarks the reader switches between rather than compares side by side. Scrubbing recomputes the headline from the hovered sample, so the number and the chart never disagree.
Install
Adds Index Card and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/index-card.jsonProps · IndexCard
| Prop | Type | Default |
|---|---|---|
| eyebrow? | string | "Markets" |
| indices? | IndexQuote[] | DEFAULT_INDICES |
| defaultIndex? | numberWhich tab opens selected. | 3 |
| openMinutes? | number | 570 |
| closeMinutes? | number | 960 |
| onSelect? | (index: IndexQuote, i: number) => void className?: stringFires when a tab is chosen. | — |
Generated from the component source. Run npm run props:extract after changing a signature.