React Dashboard Kit is a collection of reusable, customizable, and responsive components designed to help you build modern dashboards and admin panels quickly. This library includes a variety of components such as cards, modals, tables, forms, and more, all styled with Tailwind CSS for easy integration into your projects.
To install the React Dashboard Kit, run the following command:
npm i react-dashboard-kit
The Card
component is a reusable UI element designed to display information in a structured and visually appealing manner. It can be used for various purposes such as displaying blog posts, products, user profiles, etc.
-
image
: (String) URL of the image to display. Falls back to a placeholder if not provided. -
title
: (String) Main heading of the card. -
subtitle
: (String, Optional) Subheading under the title, useful for extra context like a category or price. -
content
: (String, Optional) The main text or description inside the card. Truncated to 5 lines usingline-clamp-5
. -
tags
: (Array of Strings, Optional) Array of strings, displayed as small labels under the content. -
onEdit
: (Function, Optional) Function to handle the edit action. The edit button appears if this function is provided. -
onDelete
: (Function, Optional) Function to handle the delete action. The delete button appears if this function is provided.
import { Card } from 'react-dashboard-kit';
<Card
image="https://example.com/image.jpg"
title="Card Title"
subtitle="Subtitle"
content="This is the main content of the card."
tags={["Tag1", "Tag2"]}
onEdit={() => console.log("Edit clicked")}
onDelete={() => console.log("Delete clicked")}
/>
The Sidebar
component is a responsive navigation bar that can be used in dashboards. It adjusts its layout based on the screen size, displaying as a vertical sidebar on desktop and a bottom navigation bar on mobile devices.
-
isOpen
: (Boolean) Controls whether the sidebar is expanded or collapsed. -
items
: (Array of Objects) Represents the sidebar items withtitle
andIcon
properties.
import { Sidebar } from 'react-dashboard-kit';
const items = [
{ title: "Dashboard", Icon: DashboardIcon },
{ title: "Settings", Icon: SettingsIcon },
];
<Sidebar isOpen={true} items={items} />
The Navbar
component is a top navigation bar that includes a logo, a menu button to toggle the sidebar, and a logout button.
-
logo
: (String) URL of the custom logo. Falls back to a placeholder if not provided. -
isSidebarOpen
: (Boolean) Determines the state of the sidebar (open/closed). -
setIsSidebarOpen
: (Function) Function to toggle the sidebar visibility. -
onLogout
: (Function) Callback function triggered when the logout icon is clicked.
import { Navbar } from 'react-dashboard-kit';
<Navbar
logo="https://example.com/logo.png"
isSidebarOpen={true}
setIsSidebarOpen={setIsSidebarOpen}
onLogout={() => console.log("Logged out")}
/>
The TableDetailedView
component is used to display a list of contact requests in a table format, with the ability to view detailed information about a specific contact and delete contacts.
import { TableDetailedView } from 'react-dashboard-kit';
<TableDetailedView />
The ArrayField
component is a reusable form field that allows users to input multiple values in a list format. Users can add or remove items from the list.
-
fieldName
: (String) Name of the field. -
values
: (Array) Array of values to be displayed in the input fields. -
onChange
: (Function) Function to handle changes in the input fields. -
onAdd
: (Function) Function to add a new input field. -
onRemove
: (Function) Function to remove an input field. -
placeholder
: (String) Placeholder text for the input fields.
import { ArrayField } from 'react-dashboard-kit';
<ArrayField
fieldName="tags"
values={tags}
onChange={(index) => (e) => handleChange(index, e)}
onAdd={handleAdd}
onRemove={(index) => () => handleRemove(index)}
placeholder="Tag"
/>
The DateInputField
component is a reusable date input field that can be used in forms.
-
id
: (String) ID of the input field. -
name
: (String) Name of the input field. -
value
: (String) Value of the input field. -
onChange
: (Function) Function to handle changes in the input field. -
placeholder
: (String) Placeholder text for the input field. -
required
: (Boolean) Determines if the input field is required.
import { DateInputField } from 'react-dashboard-kit';
<DateInputField
id="date"
name="date"
value={date}
onChange={(e) => setDate(e.target.value)}
placeholder="Select Date"
required={true}
/>
The Modal
component is a reusable modal dialog that can be used for various purposes such as confirmations, form inputs, or displaying important information.
-
isOpen
: (Boolean) Determines whether the modal is visible or not. -
onClose
: (Function) Function to handle the closing of the modal. -
title
: (String) The title displayed in the modal header. -
children
: (React Node) The content of the modal. -
ariaLabelClose
: (String, Optional) The accessible label for the close button (defaults to "Close modal"). -
maxWidth
: (String, Optional) Defines the maximum width of the modal (e.g.,sm
,md
,lg
). Defaults tosm
.
import { Modal } from 'react-dashboard-kit';
<Modal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
title="Modal Title"
ariaLabelClose="Close modal"
maxWidth="md"
>
<p>Modal content goes here.</p>
</Modal>
The Tabs
component is a reusable tabbed interface that allows users to switch between different content sections.
-
content
: (Array of Objects) An array of objects representing each tab. Each object should contain:-
title
: (String) The title of the tab. -
content
: (React Node) The content to display when this tab is active. -
icon
: (React Node, Optional) The icon displayed beside the tab title.
-
import { Tabs } from 'react-dashboard-kit';
const tabsContent = [
{ title: "Tab 1", content: <p>Content for Tab 1</p>, icon: <Tab1Icon /> },
{ title: "Tab 2", content: <p>Content for Tab 2</p>, icon: <Tab2Icon /> },
];
<Tabs content={tabsContent} />
The Dashboard
component serves as the primary layout for presenting an overview of statistics and key metrics. It dynamically fetches data for each statistic (if required) and renders a grid of StatCard
components. Designed for flexibility and reusability, this component can accommodate various dashboard layouts.
-
stats
: (Array of Objects) An array of objects representing each statistic to be displayed. Each object should include:-
title
: (String) The title of the statistic. -
count
: (Number or String) The value or count to display for the statistic. -
icon
: (React Node) The icon to display alongside the statistic. -
bg
: (String) The background color or class for theStatCard
. -
url
: (String, Optional) The API endpoint to fetch data dynamically. If provided, theDataFetcher
component will be used to fetch and update the statistic. -
setter
: (Function, Optional) The function to update the statistic's data after fetching. -
requiresData
: (Boolean, Optional) Determines whether the statistic requires data fetching. -
redirectUrl
: (String, Optional) The URL to redirect to when theStatCard
is clicked. If not provided, thesetActiveContent
function will be used instead.
-
-
setActiveContent
: (Function) A callback function to handle the click event on aStatCard
(used whenredirectUrl
is not provided).
import React from "react";
import { Dashboard } from 'react-dashboard-kit';
import { FaUsers, FaChartLine, FaBox, FaMoneyBill } from "react-icons/fa";
const stats = [
{
title: "Total Users",
count: 1500,
icon: <FaUsers />,
bg: "bg-blue-500",
url: "/api/users",
setter: (data) => setUserCount(data.count),
requiresData: true,
},
{
title: "Sales",
count: "$50,000",
icon: <FaChartLine />,
bg: "bg-green-500",
redirectUrl: "/sales",
},
{
title: "Products",
count: 120,
icon: <FaBox />,
bg: "bg-purple-500",
},
{
title: "Revenue",
count: "$75,000",
icon: <FaMoneyBill />,
bg: "bg-yellow-500",
},
];
function App() {
const setActiveContent = (content) => {
console.log("Active content:", content);
};
return (
<Dashboard stats={stats} setActiveContent={setActiveContent} />
);
}
export default App;
The DataFetcher
component is a utility component designed to fetch data from a specified API endpoint and update the state using a provided setter
function. It is commonly used in conjunction with other components (e.g., Dashboard
) to dynamically fetch and display data.
-
url
: (String) The API endpoint from which data will be fetched. -
setter
: (Function) A state-updating function that will be called with the fetched data. This function is responsible for updating the state in the parent component. -
requiresData
: (Boolean, Optional) Determines how the fetched data is structured before being passed to thesetter
. Defaults tofalse
.- If
true
, the component assumes the response contains adata
field and extracts it (result.data
). - If
false
, the entire response is passed to thesetter
.
- If
import React, { useState } from "react";
import { DataFetcher } from 'react-dashboard-kit';
function App() {
const [userData, setUserData] = useState([]);
return (
<div>
<DataFetcher
url="/api/users"
setter={setUserData}
requiresData={true}
/>
<ul>
{userData.map((user, index) => (
<li key={index}>{user.name}</li>
))}
</ul>
</div>
);
}
export default App;
The RemovableFieldGroup
component is a reusable React component that renders a removable section containing a title input and description textarea. It is useful for managing lists of items where each item has a title and description, such as features, FAQs, testimonials, or any similar content structure.
-
data
: (Object) Object containingtitle
anddescription
fields. -
onChange
: (Function) Callback function that receives the field name and handles input changes. -
onRemove
: (Function) Callback function to handle removal of the field group. -
index
: (Number) Index of the field group in its parent list. -
titlePlaceholder
: (String, Optional) Custom placeholder text for the title input (default: "Enter title"). -
descriptionPlaceholder
: (String, Optional) Custom placeholder text for the description textarea (default: "Enter description").
import { RemovableFieldGroup } from 'react-dashboard-kit';
const MyComponent = () => {
const [items, setItems] = useState([
{ title: '', description: '' }
]);
const handleChange = (index) => (field) => (e) => {
const newItems = [...items];
newItems[index][field] = e.target.value;
setItems(newItems);
};
const handleRemove = (index) => () => {
setItems(items.filter((_, i) => i !== index));
};
return (
<div>
{items.map((item, index) => (
<RemovableFieldGroup
key={index}
data={item}
onChange={handleChange(index)}
onRemove={handleRemove(index)}
index={index}
titlePlaceholder="Enter feature title"
descriptionPlaceholder="Describe your feature"
/>
))}
</div>
);
};
This project is licensed under the MIT License. See the LICENSE file for details.