# Market Heatmap

> Squarified market map, each tile sized by market cap and colored by today's move, the hue says the direction and its strength says how big. The readout parks beside the tile it describes so it doesn't cover it, click pins it, and the arrow keys walk the companies from biggest to smallest. In a frame narrower than 460px the map re-lays itself so the labels keep their size. data and title 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: Finance, Heatmap, Market
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@ssychui/components/market-heatmap

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ssychui/market-heatmap?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/finance.md