React Component Library to Build Analytics Dashboard 10x Faster
Tags: analytics, dashboard
Published: 2023-08-12 20:12:22

---
title: React Component Library to Build Analytics Dashboard 10x Faster
published: true
date: 2023-08-09 00:44:00 UTC
tags: Analytics,Dashboard
canonical_url: https://reactjsexample.com/react-component-library-to-build-analytics-dashboard-10x-faster/
---

 ![React Component Library to Build Analytics Dashboard 10x Faster](https://reactjsexample.com/content/images/2023/08/code_2023-06-23-38-56.jpg)

[![React Component Library to Build Analytics Dashboard 10x Faster](https://github.com/frolicorg/frolic-react/raw/main/public/Frolic%20React%20Icon.png)](https://github.com/frolicorg/frolic-react/blob/main)

`frolic-react` is an open source react library to build UI for analytics dashboards much faster. It is built on top of [react](https://react.dev), [tailwindcss](https://tailwindcss.com) and [recharts](https://recharts.org). You can use `frolic-react` directly with [frolic](https://github.com/frolicorg/frolic) backend service to create full stack dashboards 10x faster.

[![React Component Library to Build Analytics Dashboard 10x Faster](https://user-images.githubusercontent.com/15258498/258067027-ec41611f-071e-4700-8d12-7f96d059fdb1.png)](https://user-images.githubusercontent.com/15258498/258067027-ec41611f-071e-4700-8d12-7f96d059fdb1.png)

## Installation

`frolic-react` can be installed directly through npm.

```
npm i frolic-react

```

In your `tailwind.config.js`, add the following code:

```
module.exports = {
  content: [
    ...
    'node\_modules/frolic-react/\*\*/\*.{js,ts,jsx,tsx}',
  ],
  ...
  plugins: [
    require('frolic-react'),
  ],
}
```

## Usage

```
import { Card, LineChart, BarChart } from 'frolic-react'

const data = [
    { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
    { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 }
];

const Page = () => {
  return (
    <div className="grid grid-cols-2 gap-5">
      <Card title="Line Chart">
        <LineChart data={data} metrics={["uv", "pv", "amt"]} dimensions={["name"]}></LineChart>
      </Card>
      <Card title="Bar Chart">
        <BarChart data={data} metrics={["uv", "pv", "amt"]} dimensions={["name"]}></BarChart>
      </Card>
    </div>
  );
};

export default Page;
```

## Components

Please refer to our [documentation](https://64cf50d65e63f6609ad6569e-jnacgivwdp.chromatic.com/?path=/docs/introduction--docs) which list all our components with their APIs.

## Integrations

You can use `frolic-react` directly with [frolic](https://github.com/frolicorg/frolic) backend service to create full stack dashboards much faster.

## Support and Community

Issues are inevitable. When you have one, our entire team and our active developer community is around to help.

💬 Ask for help on [Discord](https://discord.gg/NA9nkZaQnv)

⚠️ Open an issue right here on [GitHub](https://github.com/frolicorg/frolic-react/issues/new/choose)

## How to Contribute

We ❤️ our contributors. We’re committed to fostering an open, welcoming, and safe environment in the community.

📕 We expect everyone participating in the community to abide by our [Code of Conduct](https://github.com/frolicorg/frolic-react/wiki/Code-of-Conduct). Please read and follow it.

🤝 If you’d like to contribute, start by reading our [Contribution Guide](https://github.com/frolicorg/frolic-react/wiki/Guide-to-Contribution).

Lets build great software together.

## License

This project is available under the [Apache License 2.0](https://github.com/frolicorg/frolic-react/blob/prod/LICENSE)

## GitHub

[View Github](https://github.com/frolicorg/frolic-react?ref=reactjsexample.com)