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.
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 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