DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

React Component Library to Build Analytics Dashboard 10x Faster

React Component Library to Build Analytics Dashboard 10x Faster

React Component Library to Build Analytics Dashboard 10x Faster

frolic-react is an open source react library to build UI for analytics dashboards much faster. It is built on top of react, tailwindcss and recharts. You can use frolic-react directly with frolic backend service to create full stack dashboards 10x faster.

React Component Library to Build Analytics Dashboard 10x Faster

Installation

frolic-react can be installed directly through npm.

npm i frolic-react

Enter fullscreen mode Exit fullscreen mode

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

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

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;
Enter fullscreen mode Exit fullscreen mode

Components

Please refer to our documentation which list all our components with their APIs.

Integrations

You can use frolic-react directly with 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

⚠️ Open an issue right here on GitHub

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. Please read and follow it.

🤝 If you’d like to contribute, start by reading our Contribution Guide.

Lets build great software together.

License

This project is available under the Apache License 2.0

GitHub

View Github

Top comments (1)

Collapse
 
respect17 profile image
Kudzai Murimi

Well-said!