# @microcharts/react
**Word-sized charts for React** — zero runtime dependencies, ~2–7 kB interactive · ~1–4 kB static, accessible
by default, and server-component safe.
[](https://www.npmjs.com/package/@microcharts/react)
[](https://microcharts.dev/docs/performance)
[](https://microcharts.dev)
[](https://microcharts.dev)
[](https://microcharts.dev/docs/quickstart)
[](./LICENSE)
[](https://argos-ci.com?utm_source=ganapativs/microcharts&utm_campaign=oss)
**[Docs](https://microcharts.dev)** · **[Gallery](https://microcharts.dev/docs/charts)** ·
**[Quickstart](https://microcharts.dev/docs/quickstart)** · **[AI usage](https://microcharts.dev/docs/ai)** ·
**[llms.txt](https://microcharts.dev/llms.txt)**
---
microcharts is **106 tiny, handcrafted chart types** built to sit _inside_ an interface: a sentence, a table cell, a KPI
card, a tab header, a streamed AI reply. The grammar is small enough for a model to emit correctly mid-sentence, and
every chart describes itself in words, so a chart an LLM streams into a chat reply is one a person can read and check.
> **Status:** tested and in production use, but not across every stack and edge yet. If you hit something, open an issue
> on [GitHub](https://github.com/ganapativs/microcharts/issues).
## Why
- **AI-native.** A chart is plain `data` plus a generated sentence. One grammar across all 106 types — a model that has
seen one chart can write them all. → [AI usage](https://microcharts.dev/docs/ai)
- **Zero dependencies.** No chart engine, no D3 — just SVG. React is the only peer. CI-enforced, forever.
- **Server-component safe.** Static charts are hook-free and render to HTML with **zero client JavaScript**.
Interactivity is a separate opt-in `/interactive` import.
- **Accessible by default.** Every chart is an `img` with a natural-language summary built from your data; it updates
when the numbers do. → [Accessibility](https://microcharts.dev/docs/accessibility)
- **Tiny.** **~2–7 kB interactive · ~1–4 kB static** gzip per chart, budget-gated in CI. Every type has one documented,
honest encoding channel and a stated precision.
- **Motion, opt-in.** Interactive charts draw on with `animate` plus one `import "@microcharts/react/motion"`, and glide
continuous marks when data updates. Entrances respect `prefers-reduced-motion` and never replay over server-rendered
HTML. → [Motion](https://microcharts.dev/docs/motion)
## Install
```bash
npm install @microcharts/react
```
Import the stylesheet **once** at the root of your app — it carries every theming token and chart style in a
low-specificity cascade layer, so your own styles always win:
```tsx
// app/layout.tsx
import "@microcharts/react/styles.css";
```
## Your first chart
Every chart renders from `data` alone. This works in a **React Server Component** with zero client JavaScript — pure
SVG, and its accessible name is generated from the data.
```tsx
import { Sparkline } from "@microcharts/react/sparkline";