# @antv/component
> Visualization components for AntV, based on G.
Latest version **2.1.11** (published 2025-11-21) · MIT license · 0 weekly downloads
## Install
```sh
npm install @antv/component
pnpm add @antv/component
yarn add @antv/component
bun add @antv/component
```
## Health
**Score 60/100 (C)** — status: stable.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 2.1.11 |
| Published | 2025-11-21 |
| First published | 2018-09-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 3.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 66 |
| Author | AntV |
| Maintainers | lvisei, freestyle21, soundquiet, elaine.q.10, sturuby, sakuya223, serializedowen, xdzhao, yangzhanmei, wjgogogo, leungwensen, dori, iaaron, yard, simaq, dxq613, intchous, susan_ann, jinke.li, lzxue, army8735, atool, baizn, dengfuping, neoddish, jeffy2012, zqlu, afc163, pomelo-nwu, kopiluwaky, ccnuzindex, panyuqi, bubkoo, zengyue, kasmine, boyu.zlj, l1ud0ngq1, newbyvector, winniexing, chenluli, kn9117, xdddst, semious2020, esora, nadia_liu, bbsqq, mxz96102, openwayne, pearmini, pddpd, yiqianyao, zhanba, cxxxxxn, laixingui.lxg, susiwen8, yanxiong, zeyuwang, rainy25ghz, zhangjunjie-loki, flash1, yisi.wang, dreammy23, biupiubiupiu, basketduck, xuying1027, banxuan, bqxbqxbqx, duxinyue023, wang1212, leondt1, gaofuhong, xcf(-_-), boyyangzai, siqishen, interstellarmt, moayuisuda |
| Keywords | antv, visualization, ui, component |
## Links
- npm: https://www.npmjs.com/package/@antv/component
- Repository: https://github.com/antvis/component
- Homepage: https://github.com/antvis/component#readme
- Issues: https://github.com/antvis/component/issues
- npm.io page: https://npm.io/package/@antv/component
## Dependencies (4)
- [@antv/g](https://npm.io/package/@antv/g.md) ^6.1.11
- [@antv/util](https://npm.io/package/@antv/util.md) ^3.3.10
- [@antv/scale](https://npm.io/package/@antv/scale.md) ^0.4.16
- [svg-path-parser](https://npm.io/package/svg-path-parser.md) ^1.1.0
## Alternatives
- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads
## Recent versions
- 2.1.11 (latest) — 2025-11-21
- 2.1.1-alpha.3 (alpha) — 2024-10-24
- 1.0.1-beta.7 (beta) — 2024-03-13
- 0.9.7 (next) — 2023-06-05
- 0.8.32-beta.0 (tooltip-patch) — 2022-10-12
- 0.5.0-beta.18 (publish) — 2020-01-06
- 2.1.10 — 2025-11-19
- 2.1.9 — 2025-11-05
- 2.1.8 — 2025-11-05
- 2.1.7 — 2025-09-09
- 2.1.6 — 2025-08-25
- 2.1.5 — 2025-07-21
- 2.1.4 — 2025-06-05
- 2.1.3 — 2025-05-15
- 2.1.2 — 2024-11-25
- … 178 more at https://npm.io/package/@antv/component/versions
## README
@antv/component
Visualization components for AntV, based on [G](https://github.com/antvis/g) which is a flexible rendering engine for visualization.
[](https://github.com/antvis/component/actions/workflows/build.yml)
[](https://coveralls.io/github/antvis/component?branch=master)
[](https://www.npmjs.com/package/@antv/component)
[](https://www.npmjs.com/package/@antv/component)
[](https://www.npmjs.com/package/@antv/component)
## ✨ Features
- **Rich** - Contains 20+ Visualization components, for AntV [G2](https://github.com/antvis/G2), [G6](https://github.com/antvis/G6), [L7](https://github.com/antvis/L7).
- **Powerful** - Each component has powerful abilities and flexible scalability.
- **Well Design** - Continuous optimization and iteration.
- **Powerful Renderer** - Based on the powerful renderer [G](https://github.com/antvis/G), we can render the components using `Canvas`, `SVG` or `WebGL` with same code.
## 📦 Installation
```bash
$ npm install @antv/component
```
```bash
$ yarn add @antv/component
```
## 🔨 Getting Started
```ts
import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-canvas';
import { Button } from '@antv/component';
// 1. New a canvas.
const canvas = new Canvas({
container: 'container',
width: 600,
height: 600,
renderer: new Renderer(),
});
// 2. Create a button with configure.
const button = new Button({
/* ... */
});
// 3. Append into G canvas.
canvas.appendChild(button);
// 4. Render.
canvas.render();
```
## 📎 Documents
- [API](./docs/api.md)
- UI components
- [Axis](./docs/components/axis.md)
- [Legend](./docs/components/legend.md)
- [Tooltip](./docs/components/tooltip.md)
- [Slider](./docs/components/slider.md)
- [Scrollbar](./docs/components/scrollbar.md)
- [Button](./docs/components/button.md)
- [Checkbox](./docs/components/checkbox.md)
- [Navigator](./docs/components/navigator.md)
- [Breadcrumb](./docs/components/breadcrumb.md)
- [Sparkline](./docs/components/sparkline.md)
## 📮 Contribution
```bash
$ git clone git@github.com:antvis/component.git
$ cd component
$ npm install
$ npm run dev
```
Then send a pull request on GitHub.
## 📄 License
MIT@[AntV](https://github.com/antvis).
---
_Source: https://npm.io/package/@antv/component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._