# Index Card

> Market index card with 4 tabs, S&P 500, Dow 30, Nasdaq and Russell 2K, and a 1D, 5D and 1M switch. The line is measured against its baseline, the previous close on 1D, it's green above the dashed rule and red below it, and the move up top is worked out from the same numbers. Scrub it or use the arrow keys and the price follows the cursor while the rest of the line dims. indices and ranges are props. Light and dark via shadcn theme tokens, respects reduced motion. More dark, data-dense components at https://www.ssych.com/library?ref=21st.dev

- Author: [Savva Sicevs](https://21st.dev/@ssychui)
- Library: [ssych ui](https://21st.dev/@ssychui/library/ssicevs)
- License: mit
- Tags: Card, Finance, Chart, Market
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@ssychui/components/index-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ssychui/index-card?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/card.md