# @onvo-ai/react

> The react SDK for Onvo AI dashboard builder

Latest version **0.19.19** (published 2026-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @onvo-ai/react
pnpm add @onvo-ai/react
yarn add @onvo-ai/react
bun add @onvo-ai/react
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.19.19 |
| Published | 2026-05-29 |
| First published | 2024-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 56 |
| Unpacked size | 3.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ronnel Davis |
| Maintainers | ronneldavis, soman-das |
| Keywords | onvo, onvo-ai, react, sdk, dashboard, dashboard-builder, embedded-analytics, analytics, charts, data-visualization, bi, business-intelligence |

## Links

- npm: https://www.npmjs.com/package/@onvo-ai/react
- Repository: https://github.com/onvo-ai/sdks
- Homepage: https://github.com/onvo-ai/sdks#readme
- Issues: https://github.com/onvo-ai/sdks/issues
- npm.io page: https://npm.io/package/@onvo-ai/react

## Dependencies (56)

- [clsx](https://npm.io/package/clsx.md) ^2.1.1
- [dayjs](https://npm.io/package/dayjs.md) ^1.9.7
- [sonner](https://npm.io/package/sonner.md) ^2.0.1
- [numeral](https://npm.io/package/numeral.md) ^2.0.6
- [zustand](https://npm.io/package/zustand.md) ^4.5.2
- [chart.js](https://npm.io/package/chart.js.md) ^4.4.9
- [date-fns](https://npm.io/package/date-fns.md) ^4.1.0
- [cronstrue](https://npm.io/package/cronstrue.md) ^2.50.0
- [spacetime](https://npm.io/package/spacetime.md) ^7.4.8
- [css-loader](https://npm.io/package/css-loader.md) ^7.1.2
- [jwt-decode](https://npm.io/package/jwt-decode.md) ^4.0.0
- [react-scan](https://npm.io/package/react-scan.md) ^0.3.3
- [remark-gfm](https://npm.io/package/remark-gfm.md) ^4.0.0
- [@onvo-ai/js](https://npm.io/package/@onvo-ai/js.md) ^0.17.69
- [cron-converter](https://npm.io/package/cron-converter.md) ^2.0.1
- [react-markdown](https://npm.io/package/react-markdown.md) ^9.0.1
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^2.3.0
- [react-chartjs-2](https://npm.io/package/react-chartjs-2.md) ^5.2.0
- [react-data-grid](https://npm.io/package/react-data-grid.md) 7.0.0-beta.47
- [@heroicons/react](https://npm.io/package/@heroicons/react.md) ^2.1.5
- [@remixicon/react](https://npm.io/package/@remixicon/react.md) ^4.5.0
- [react-day-picker](https://npm.io/package/react-day-picker.md) 8.10.1
- [@hello-pangea/dnd](https://npm.io/package/@hello-pangea/dnd.md) ^18.0.1
- [mini-svg-data-uri](https://npm.io/package/mini-svg-data-uri.md) ^1.4.4
- [react-grid-layout](https://npm.io/package/react-grid-layout.md) ^1.5.0
- [react-multi-email](https://npm.io/package/react-multi-email.md) ^1.0.25
- [tailwind-variants](https://npm.io/package/tailwind-variants.md) ^0.2.1
- [chartjs-plugin-zoom](https://npm.io/package/chartjs-plugin-zoom.md) ^2.2.0
- [@monaco-editor/react](https://npm.io/package/@monaco-editor/react.md) ^4.6.0
- [@radix-ui/react-tabs](https://npm.io/package/@radix-ui/react-tabs.md) ^1.0.4
- [chartjs-chart-funnel](https://npm.io/package/chartjs-chart-funnel.md) ^4.1.8
- [chartjs-chart-matrix](https://npm.io/package/chartjs-chart-matrix.md) ^2.0.1
- [chartjs-chart-sankey](https://npm.io/package/chartjs-chart-sankey.md) ^0.14.0
- [react-error-boundary](https://npm.io/package/react-error-boundary.md) ^4.0.12
- [react-simple-wysiwyg](https://npm.io/package/react-simple-wysiwyg.md) ^3.0.2
- [@radix-ui/react-select](https://npm.io/package/@radix-ui/react-select.md) ^2.0.0
- [@radix-ui/react-slider](https://npm.io/package/@radix-ui/react-slider.md) ^1.2.1
- [@radix-ui/react-switch](https://npm.io/package/@radix-ui/react-switch.md) ^1.1.0
- [@react-aria/datepicker](https://npm.io/package/@react-aria/datepicker.md) ^3.11.4
- [react-resizable-panels](https://npm.io/package/react-resizable-panels.md) ^2.1.7
- [@internationalized/date](https://npm.io/package/@internationalized/date.md) ^3.5.6
- [@radix-ui/react-popover](https://npm.io/package/@radix-ui/react-popover.md) ^1.1.2
- [@radix-ui/react-tooltip](https://npm.io/package/@radix-ui/react-tooltip.md) ^1.1.2
- [chartjs-adapter-dayjs-4](https://npm.io/package/chartjs-adapter-dayjs-4.md) ^1.0.4
- [chartjs-chart-wordcloud](https://npm.io/package/chartjs-chart-wordcloud.md) ^4.4.4
- [react-autosize-textarea](https://npm.io/package/react-autosize-textarea.md) ^7.1.0
- [@radix-ui/react-checkbox](https://npm.io/package/@radix-ui/react-checkbox.md) ^1.0.4
- [chartjs-adapter-date-fns](https://npm.io/package/chartjs-adapter-date-fns.md) ^3.0.0
- [use-prefers-color-scheme](https://npm.io/package/use-prefers-color-scheme.md) ^1.1.3
- [@radix-ui/react-accordion](https://npm.io/package/@radix-ui/react-accordion.md) ^1.1.2
- [@react-stately/datepicker](https://npm.io/package/@react-stately/datepicker.md) ^3.10.3
- [chartjs-adapter-spacetime](https://npm.io/package/chartjs-adapter-spacetime.md) ^1.0.1
- [chartjs-plugin-datalabels](https://npm.io/package/chartjs-plugin-datalabels.md) ^2.2.0
- [@onvo-ai/chartjs-chart-map](https://npm.io/package/@onvo-ai/chartjs-chart-map.md) ^0.0.148
- [@radix-ui/react-dropdown-menu](https://npm.io/package/@radix-ui/react-dropdown-menu.md) ^2.0.7-rc.10
- [@tailwindcss/container-queries](https://npm.io/package/@tailwindcss/container-queries.md) ^0.1.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.19.19 (latest) — 2026-05-29
- 0.15.2 (beta) — 2025-06-22
- 0.19.18 — 2026-05-29
- 0.19.17 — 2026-05-25
- 0.19.16 — 2026-05-25
- 0.19.15 — 2026-03-17
- 0.19.14 — 2026-03-17
- 0.19.13 — 2026-03-17
- 0.19.9 — 2025-10-30
- 0.19.8 — 2025-10-21
- 0.19.7 — 2025-10-14
- 0.19.6 — 2025-10-14
- 0.19.5 — 2025-10-13
- 0.19.4 — 2025-10-12
- 0.19.3 — 2025-10-12
- … 413 more at https://npm.io/package/@onvo-ai/react/versions

## README

# Onvo AI react library

This react package can be used to display the list of dashboards available to a user or single dashboard from Onvo AI. The components are also completely customizable.

## Installation

You can install this UI library using npm or yarn:

```bash
npm install @onvo-ai/react
```

```bash
yarn add @onvo-ai/react
```

## Usage

To use this UI library in your project, import the components you need from the library and use them in your React apps.

```jsx
import { Wrapper, DashboardList } from "@onvo-ai/react";
const baseUrl = "https://dashboard.onvo.ai";

const ListPage = () => {
  const [accessToken, setAccessToken] = useState("");
  const userId = "123456";

  useEffect(() => {
    fetch("/api/get-token/" + userId)
      .then((data) => data.json())
      .then((data) => {
        setAccessToken(data.token);
      });
  }, []);

  return (
    <Wrapper baseUrl={baseUrl} token={accessToken}>
      <DashboardList />
    </Wrapper>
  );
};

const DashboardPage = (id) => {
  const [accessToken, setAccessToken] = useState("");
  const userId = "123456";

  useEffect(() => {
    fetch("/api/get-token/" + userId)
      .then((data) => data.json())
      .then((data) => {
        setAccessToken(data.token);
      });
  }, []);

  return (
    <Wrapper baseUrl={baseUrl} token={accessToken}>
      <Dashboard id={id} />
    </Wrapper>
  );
};
```

## Contributing

You can fork the repository and make a pull request with your changes. Make sure to also update the docs with any relevant changes you have made.

### Steps

- Fork the repository.
- Clone the repository to your local machine.
- Install the dependencies using `npm install`.
- View the components in the browser using `npm run storybook`.
- Make your changes.
- Test the changes using `npm test`.
- Build the library using `npm run build`.
- Commit the changes and push them to your forked repository.
- Publish the package on [npm](https://www.npmjs.com/).
- Install and use the package in your project.

---
_Source: https://npm.io/package/@onvo-ai/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
