Market Snapshot
Price snapshot card — animated headline price, a period-sliced line chart with crosshair scrubbing and a date-stamp tooltip, and a period switcher with a gliding underline.
Market Snapshot
Price snapshot card — animated headline price, a period-sliced line chart with crosshair scrubbing and a date-stamp tooltip, and a period switcher with a gliding underline.
When to use it
The single-instrument card for a sidebar or a summary row, where one price and its recent shape are enough. Use it when a full chart would be more instrument than the question deserves.
Install
Adds Market Snapshot and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/market-snapshot.jsonProps · MarketSnapshot
| Prop | Type | Default |
|---|---|---|
| symbol? | stringticker shown top-right | "AMZN" |
| name? | stringcompany name above the price | "Amazon.com Inc." |
| values? | number[] | DEFAULT_VALUES |
| exchange? | stringfooter-right caption | "NASDAQ · USD" |
| updatedAt? | stringfooter-left caption | "Updated 1:54 PM" |
Generated from the component source. Run npm run props:extract after changing a signature.