How to Create Dashboard in React

Introduction

React continues to be one of the most popular frameworks for building interactive dashboards. With React 18's concurrent features, the rise of Vite as the build tool of choice, and modern TypeScript integration, creating dashboards in React is now more powerful and developer-friendly than ever.

This comprehensive guide walks you through creating dashboards in React using modern 2025 practices, then shows you how to supercharge your dashboards with Databrain's embedded analytics platform.

What you'll build:

• A modern React dashboard with Vite and TypeScript
• Integration with Databrain for production-ready analytics

Prerequisites:

• Node.js 20+ and npm 10+
• Basic React knowledge
• Familiarity with TypeScript (recommended)

Without Databrain: How to Create a Dashboard in React

Let's start by building a custom dashboard from scratch to understand the fundamentals.

Create a React App:

In 2025, Vite has replaced Create React App as the standard tool for React applications. Vite offers significantly faster development experience and better production builds.

Run the following command in your terminal: npx create-react-app my-app.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

This command sets up a new React application called "my-app" and generates all the necessary files and folder structure for you.

Why Vite in 2025?

• 10-100x faster than Create React App
• Native ESM (no bundling during development)
• TypeScript support out of the box
• Optimized production builds
• Hot Module Replacement that works instantly

‍

Clean Up App.tsx and App.css:

In your project folder, you'll find two important files: App.tsx and App.css

These files contain initial code for your React application. You should remove any code that you don't need to keep your project clean and organized.

import './App.css';

function App() {
  return (
    <div className="App">
      {/* We'll add our components here */}
    </div>
  );
}

export default App;

src/App.css:‍
Remove all existing styles - we'll add our own as we build

/* Clean slate - we'll add styles as needed */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Install Styling Library

Instead of Bootstrap, we'll use Tailwind CSS which has become the industry standard for React applications in 2025. It provides better performance, smaller bundle sizes, and more flexibility.

To use Tailwind CSS in your React app, you can install it by running:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This command downloads and adds the Tailwind CSS library to your project, allowing you to easily style your components.

Configure Tailwind CSS:

Update `tailwind.config.js`:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Update src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

‍

Create a Components Folder:

To keep your project organized, create a folder named "components" inside the "src" folder.

This "components" folder will house all the custom React components you'll create for your app.

Run this command : mkdir src/components

‍

Create a Navbar Component:

Inside the components folder, create a sub-folder named Navbar

In the Navbar folder, create two files: Navbar.tsx and Navbar.css

The Navbar.tsx file will hold the TypeScript/JSX code for your Navbar component, while the Navbar.css file will contain the styling for the Navbar.

Each component follows the same structure for uniformity across the code. Each component has two files: index.js and index.css. This helps keep things organized and easy to work with, making it clear where the component's code and styling can be found.
‍

src/components/Navbar/Navbar.tsx:

import { useState } from 'react';
import './Navbar.css';

interface NavItem {
  id: string;
  label: string;
  icon: string;
}

const Navbar = () => {
  const [activeItem, setActiveItem] = useState('home');

  const navItems: NavItem[] = [
    { id: 'home', label: 'Home', icon: '🏠' },
    { id: 'metrics', label: 'Metrics', icon: '📊' },
    { id: 'reports', label: 'Reports', icon: '📈' },
    { id: 'settings', label: 'Settings', icon: '⚙️' },
  ];

  return (
    <nav className="navbar">
      <div className="navbar-brand">
        <h2>Databrain</h2>
      </div>
      <ul className="navbar-menu">
        {navItems.map((item) => (
          <li
            key={item.id}
            className={`navbar-item ${activeItem === item.id ? 'active' : ''}`}
            onClick={() => setActiveItem(item.id)}
          >
            <span className="navbar-icon">{item.icon}</span>
            <span className="navbar-label">{item.label}</span>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Navbar;

src/components/Navbar/Navbar.css:

.navbar {
  width: 250px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: #ffffff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px 0;
}

.navbar-brand {
  padding: 0 20px 20px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}

.navbar-brand h2 {
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.navbar-menu {
  list-style: none;
  padding: 0;
}

.navbar-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #555;
}

.navbar-item:hover {
  background: #f8f9fa;
  color: #3498db;
}

.navbar-item.active {
  background: #e3f2fd;
  color: #3498db;
  border-left: 4px solid #3498db;
}

.navbar-icon {
  font-size: 20px;
  margin-right: 12px;
}

.navbar-label {
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .navbar {
    width: 100%;
    height: auto;
    position: relative;
  }
}

The Navbar will look like a vertical sidebar with interactive menu items. The Navbar will look like this:

Install Icons Library

For better icons, let's install React Icons which provides Font Awesome and many other icon sets:

Run this command : npm install react-icons‍

Why React Icons in 2025?

• Tree-shakeable (only imports icons you use)
• TypeScript support built-in
• Includes Font Awesome, Material Icons, and more
• No CSS files needed

You can now use icons in your components:

import { FaHome, FaChartBar, FaCog } from 'react-icons/fa';

// Use in JSX:
<FaHome className="icon" />

Header Component

The Header component will contain a search bar, notifications, and user profile section.

src/components/Header/Header.tsx:

import { useState } from 'react';
import { FaSearch, FaBell, FaUserCircle } from 'react-icons/fa';
import './Header.css';

const Header = () => {
  const [searchQuery, setSearchQuery] = useState('');

  return (
    <header className="header">
      <div className="search-container">
        <FaSearch className="search-icon" />
        <input
          type="text"
          placeholder="Search dashboards, metrics..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="search-input"
        />
      </div>
      <div className="header-actions">
        <button className="icon-button">
          <FaBell />
          <span className="notification-badge">3</span>
        </button>
        <button className="icon-button">
          <FaUserCircle size={24} />
        </button>
      </div>
    </header>
  );
};

export default Header;

src/components/Header/Header.css:

.header {
  height: 70px;
  background: white;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-container {
  position: relative;
  flex: 1;
  max-width: 500px;
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-input {
  width: 100%;
  padding: 10px 15px 10px 45px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.search-input:focus {
  border-color: #3498db;
}

.header-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.icon-button {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background 0.3s;
  font-size: 20px;
  color: #555;
}

.icon-button:hover {
  background: #f8f9fa;
}

.notification-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

This code defines a React functional component called Header, creating a header section with a search input field, a notification bell icon with a badge, and a profile icon, styled with modern CSS.

‍

Courses Component:

Now let's create a component to display course metrics. This demonstrates how to work with props and dynamic data.

src/components/Courses/Courses.tsx:

import './Courses.css';

interface Course {
  id: string;
  title: string;
  count: number;
  color: string;
  icon: string;
}

interface CoursesProps {
  courses: Course[];
}

const Courses = ({ courses }: CoursesProps) => {
  return (
    <div className="courses-container">
      {courses.map((course) => (
        <div key={course.id} className="course-card">
          <div className="course-icon" style={{ background: course.color }}>
            {course.icon}
          </div>
          <div className="course-info">
            <h3 className="course-title">{course.title}</h3>
            <p className="course-count">{course.count}</p>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Courses;

src/components/Courses/Courses.css:

.courses-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.course-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.course-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.course-info {
  flex: 1;
}

.course-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.course-count {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
}

In the above code, the color information is dynamically passed down from the parent component through the courses array and is subsequently applied to style the card. This approach allows for adaptable and flexible color rendering based on the provided data.

This approach allows for adaptable and flexible color rendering based on the provided data.

Course List Component:

This component displays a table of courses with their status.

src/components/CourseList/CourseList.tsx:

import './CourseList.css';

interface CourseData {
  id: string;
  title: string;
  level: 'Beginner' | 'Intermediate' | 'Advanced';
  date: string;
  status: 'Completed' | 'On Going' | 'Interested';
}

const courseData: CourseData[] = [
  {
    id: '1',
    title: 'Web Design',
    level: 'Advanced',
    date: '2nd Jan 2024',
    status: 'Completed'
  },
  {
    id: '2',
    title: 'React',
    level: 'Advanced',
    date: '9th April 2024',
    status: 'On Going'
  },
  {
    id: '3',
    title: 'MongoDB',
    level: 'Advanced',
    date: '5th June 2024',
    status: 'Interested'
  },
  {
    id: '4',
    title: 'TypeScript',
    level: 'Intermediate',
    date: '15th Aug 2024',
    status: 'On Going'
  },
  {
    id: '5',
    title: 'CSS',
    level: 'Intermediate',
    date: '2nd Feb 2024',
    status: 'Completed'
  }
];

const CourseList = () => {
  const getStatusClass = (status: CourseData['status']) => {
    switch (status) {
      case 'Completed':
        return 'status-completed';
      case 'On Going':
        return 'status-ongoing';
      case 'Interested':
        return 'status-interested';
      default:
        return '';
    }
  };

  return (
    <div className="course-list-container">
      <div className="course-list-header">
        <h2>My Courses</h2>
        <button className="see-all-btn">See All</button>
      </div>
      <div className="table-container">
        <table className="course-table">
          <thead>
            <tr>
              <th>Course Name</th>
              <th>Level</th>
              <th>Date</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {courseData.map((course) => (
              <tr key={course.id}>
                <td className="course-name">{course.title}</td>
                <td>{course.level}</td>
                <td>{course.date}</td>
                <td>
                  <span className={`status-badge ${getStatusClass(course.status)}`}>
                    {course.status}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default CourseList;

src/components/CourseList/CourseList.css:

.course-list-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.course-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.course-list-header h2 {
  font-size: 20px;
  color: #2c3e50;
  font-weight: 600;
}

.see-all-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
}

.see-all-btn:hover {
  text-decoration: underline;
}

.table-container {
  overflow-x: auto;
}

.course-table {
  width: 100%;
  border-collapse: collapse;
}

.course-table thead {
  background: #f8f9fa;
}

.course-table th {
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: #666;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.course-table td {
  padding: 16px 12px;
  border-top: 1px solid #e8e8e8;
  color: #2c3e50;
}

.course-name {
  font-weight: 500;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status-completed {
  background: #d4edda;
  color: #155724;
}

.status-ongoing {
  background: #fff3cd;
  color: #856404;
}

.status-interested {
  background: #d1ecf1;
  color: #0c5460;
}

@media (max-width: 768px) {
  .course-table {
    font-size: 12px;
  }
  
  .course-table th,
  .course-table td {
    padding: 8px;
  }
}

This code defines a React component named CourseList that displays a list of courses. It uses an array called courseData to hold information about each course, such as the title, level, date, and status. The status text color is dynamically determined based on the course's completion status, and the list is presented in a modern table format.

The status text color is dynamically determined based on the course's completion status, and the list is presented in a table format. 

Putting It All Together

Now let's update our main App component to use all the components we've created.

src/App.tsx:

import Navbar from './components/Navbar/Navbar';
import Header from './components/Header/Header';
import Courses from './components/Courses/Courses';
import CourseList from './components/CourseList/CourseList';
import './App.css';

function App() {
  const courseMetrics = [
    { id: '1', title: 'Total Courses', count: 24, color: '#e3f2fd', icon: '📚' },
    { id: '2', title: 'Completed', count: 12, color: '#d4edda', icon: '✅' },
    { id: '3', title: 'In Progress', count: 8, color: '#fff3cd', icon: '⏳' },
    { id: '4', title: 'Upcoming', count: 4, color: '#f8d7da', icon: '🎯' },
  ];

  return (
    <div className="app-container">
      <Navbar />
      <div className="main-content">
        <Header />
        <div className="dashboard-content">
          <h1 className="dashboard-title">Dashboard Overview</h1>
          <Courses courses={courseMetrics} />
          <CourseList />
        </div>
      </div>
    </div>
  );
}

export default App;

src/App.css:

.app-container {
  display: flex;
  min-height: 100vh;
  background: #f8f9fa;
}

.main-content {
  flex: 1;
  margin-left: 250px;
  display: flex;
  flex-direction: column;
}

.dashboard-content {
  padding: 30px;
}

.dashboard-title {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 20px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
  }
}

‍

Final Steps

We've assembled all the components, and now it's time to launch the live dashboard by running:

"npm run dev"

Visit http://localhost:5173 in your browser to see your dashboard in action!

The dashboard will feature:

• A fixed sidebar with navigation
• A sticky header with search and notifications
• Metric cards showing course statistics
• A detailed course list table with status indicators

What makes this 2025 approach better:

• Vite provides instant hot module replacement
• TypeScript ensures type safety and better developer experience
• Modern CSS with proper component encapsulation
• React 18 concurrent features available
• Tree-shaking eliminates unused code in production‍
• Optimized builds with automatic code splitting
  ‍

‍

Alternate Solution: With Databrain - Create React Dashboards in Minutes

Building a custom dashboard is great for learning, but production dashboards require significantly more features. This is where Databrain becomes valuable.

Connect to Your Database and Create a Dashboard

Databrain offers support for a range of databases, including PostgreSQL, MySQL, MongoDB, Snowflake, BigQuery, and 100+ more data sources.

In this guide, we'll walk you through the complete process step by step.

Step 1: Connect to Your Database

Before integrating Databrain into your React app, you need to set up your data source in the Databrain platform.

Connecting Your Data Source:

1. Sign up at Databrain
2. Create a workspace for your project
3. Go to "Data Sources" section
4. Click "Add New Datasource" button
5. Select your database type (e.g., MongoDB, PostgreSQL, MySQL)

For MongoDB Example:

When you activate the MongoDB BI Connector, it serves as an interface connecting MongoDB and Databrain. Activating the instance will make it easier to understand and use your MongoDB information for smarter decision-making.

Connection Details:

• Choose the database you want to connect to (e.g., workspace name: "Demo workspace")
• In the "Name" field, give your connection a descriptive name
• Specify the host (IP address or domain name) where your database is running
• Set the port (usually 3306 for MongoDB BI Connector, but check your configuration)
• Enter the username and password for your database cluster
• Click "Test Connection" to verify
• Click "Save" to store your connection

Supported Data Sources (100+):

• SQL Databases: PostgreSQL, MySQL, SQL Server, MariaDB
• Cloud Data Warehouses: Snowflake, BigQuery, Redshift, Azure Synapse
• NoSQL: MongoDB, DynamoDB, Cassandra
• Analytics: ClickHouse, DuckDB, Druid
• Query Engines: Trino, Presto, Athena
• APIs: REST APIs, GraphQL
• And many more...

Step 2: Create a Dashboard

Once your data source is connected, create your dashboard:

1. Click "Create New Workspace" button (with a plus icon) in the top right corner
2. Enter the workspace name and description
3. Click "Save" to create the workspace
4. Click "Create a New Dashboard"
5. Fill in the dashboard name (e.g., "React Analytics Dashboard")
6. Enter a unique dashboard ID (e.g., "react-dashboard") - you'll use this later for integration
7. Click "Save" to create your dashboard

Step 3: Design a Metric

1. Click "Create Metric" in the top right corner

2. Select the dataset from your connected data source

3. Choose your data fields:

1. Drag and drop data into rows and columns
2. For example: Select "Public" > "Users" and choose "id," "name," "email" for columns

4. Choose the chart type:

• Table
• Bar Chart
• Line Chart
• Pie Chart
• And 50+ more options

5. Customize your metric:

• Add filters (date ranges, categories, etc.)
• Set aggregations (SUM, AVG, COUNT, etc.)
• Customize colors and styling
• Add drill-downs and interactivity

6. Click "Save to Dashboard"

7. Enter a unique metric ID (e.g., "user-table")

Create as many metrics as you need by repeating this process. You can create:

• KPI cards showing single values
• Time-series charts for trends
• Tables for detailed data
• Heatmaps for correlations

And much more...

‍

Integrating with Your App

Now let's integrate your Databrain dashboard into your React application.

Step 4: Setup Your React App for Databrain

If you already have a React app from the previous section, great! If not, create one:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Clean and Organize Your App

After removing unnecessary files, your folder structure will look like this:

my-app/
├── src/
│   ├── App.tsx
│   ├── App.css
│   ├── main.tsx
│   └── index.css
├── public/
├── index.html
├── package.json
└── vite.config.ts

Remove all code from App.css and simplify App.tsx:

import './App.css';

function App() {
  return (
    <div className="App">
      {/* We'll add Databrain here */}
    </div>
  );
}

export default App;

Step 5: Integrate Databrain

Now let's install and integrate the Databrain package.

Install Databrain Package:

npm install @databrainhq/plugin

Create Environment Variables:

Create a `.env` file in your project root to store your Databrain credentials securely:

VITE_DATABRAIN_TOKEN=your-token-here
VITE_DATABRAIN_DASHBOARD_ID=your-dashboard-id

Important:

• Never commit your `.env` file to git
• Add `.env` to your `.gitignore` file
• Get your token from Databrain's Share menu

For a Dashboard:

A dashboard consists of various metrics put together. To integrate the entire dashboard, use the following code:

src/App.tsx:

import { useEffect } from 'react';
import '@databrainhq/plugin/web';
import './App.css';

// TypeScript declaration for Databrain web component
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'dbn-dashboard': {
        token: string;
        'dashboard-id': string;
        'disable-fullscreen'?: boolean;
        'enable-download-csv'?: boolean;
        'enable-email-csv'?: boolean;
      };
    }
  }
}

function App() {
  const token = import.meta.env.VITE_DATABRAIN_TOKEN;
  const dashboardId = import.meta.env.VITE_DATABRAIN_DASHBOARD_ID;

  useEffect(() => {
    console.log('Databrain dashboard loaded');
  }, []);

  return (
    <div className="App">
      <div className="dashboard-container">
        <h1>Analytics Dashboard</h1>
        <dbn-dashboard
          token={token}
          dashboard-id={dashboardId}
          enable-download-csv={true}
          enable-email-csv={true}
        />
      </div>
    </div>
  );
}

export default App;

src/App.css:

.App {
  min-height: 100vh;
  background: #f8f9fa;
}

.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

.dashboard-container h1 {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 30px;
  font-weight: 600;
}

dbn-dashboard {
  display: block;
  width: 100%;
  min-height: 600px;
}

For Individual Metrics:

If you want to integrate only specific metrics instead of the entire dashboard:

import '@databrainhq/plugin/web';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'dbn-metric': {
        token: string;
        'metric-id': string;
      };
    }
  }
}

function MetricView() {
  return (
    <div className="metric-container">
      <dbn-metric
        token={import.meta.env.VITE_DATABRAIN_TOKEN}
        metric-id="user-table"
      />
    </div>
  );
}

Getting Your Token and Dashboard ID:

1. Go to your dashboard in Databrain

2. Click the "Share" button (located near Create Metric)

3. Copy your token and dashboard ID

4. Paste them into your `.env` file

Run Your Application:

npm run dev

After this, visit `http://localhost:5173` and you will see the dashboard live and running in your browser!

What you get out of the box:

1. Real-time data updates
2. Interactive filtering and drill-downs
3. Export to CSV/PDF
4. Email scheduling
5. Mobile responsive
6. 50+ chart types
7. Role-based access control
8. Multi-tenant support

Step 6: Customize Your Dashboard

Once you've integrated Databrain into your React app and have your dashboard set up, you can customize it to fit your needs.

Tweak the Dashboard

Customizing your dashboard lets you tailor it to your specific needs and preferences. Here are examples of customization you can do:

1. Customize Layout: You can arrange the metrics and components on your dashboard by dragging and dropping them in the Databrain interface. You can also resize and rearrange them to create a visually appealing layout.

2. Add More Metrics: To add metrics, click on the "Add Metric" button in Databrain, and select the dataset and data points you want to display. You can choose different chart types, like tables, charts, or graphs, based on your data and visualization preferences.

3. Data Filtering: You can add filters to the metrics to allow users to interact with the data dynamically. These filters can be based on various attributes or dimensions of your data.

Example with filters in your React app:

function App() {
  const filters = {
    date_range: 'last_30_days',
    category: 'active_users'
  };

  return (
    <dbn-dashboard
      token={token}
      dashboard-id={dashboardId}
      filters={JSON.stringify(filters)}
    />
  );
}

4. Styling:

function App() {
  return (
    <dbn-dashboard
      token={token}
      dashboard-id={dashboardId}
      theme="dark"
      style={{
        '--primary-color': '#3498db',
        '--background-color': '#ffffff'
      }}
    />
  );
}

5. Interactivity:

Set up interactions between different components on your dashboard. For example, you can create drill-downs, tooltips, or pop-ups to provide more information when users interact with the dashboard.

Step 7: Make Your Dashboard Accessible
‍
Domain Whitelisting

To display the Databrain dashboard correctly on your website, you need to whitelist your domain:

1. Go to the 'Settings' section in Databrain

2. Find 'Embed Settings' and click on it

3. Select 'Whitelist Domains'

4. Paste your website's domain into the 'Allowed Origins' field

5. Click the 'Add' button

By following these steps, you'll ensure that the dashboard integrates seamlessly with your React app.

‍

User Permission

You can control who can access and modify the dashboard:

• Current User: Only you can see and edit the dashboard
• All Users: Everyone in your workspace can access the dashboard
• Custom Permissions: Set up role-based access control for specific users or groups

‍

Manual Dashboard vs Databrain Comparision

‍

Deployment Checklist

1. Replace demo tokens with production tokens  
2. Set up environment variables properly  
3. Add `.env` to `.gitignore`  
4. Enable code splitting for Databrain component  
5. Add error boundaries  
6. Test on mobile devices
7. Verify all data sources are connected  
8. Configure user permissions in Databrain  
9. Set up domain whitelisting  
10. Test loading states and error states  
11. Optimize bundle size  
12. Enable production build optimizations.

‍

Conclusion

You now have two powerful approaches for building React dashboards:

1. Custom Dashboard - Perfect for learning React and simple use cases
2. Databrain Integration - Production-ready analytics in hours instead of months

When to Use Each:

Build Custom:

• Learning React fundamentals
• Simple, static dashboards
• Full control over every detail

Use Databrain:

• Production SaaS applications
• Customer-facing analytics
• Multi-tenant architectures
• Need 50+ chart types
• Require RBAC and security
• Time-to-market is critical

Hybrid Approach (Recommended):

Most successful teams use both:

• Databrain for complex analytics, reporting, and customer-facing dashboards
• Custom components for simple metrics and app-specific UI

Next Step

• Start your free Databrain trial: https://www.usedatabrain.com
• View React integration docs
• Contact support: support@usedatabrain.com
• Watch video tutorials: https://www.youtube.com/@usedatabrain

Resources and Documentation

• React Documentation: https://react.dev
• Vite Documentation: https://vitejs.dev
• TypeScript Handbook: https://www.typescriptlang.org/docs/
• Databrain Documentation: https://docs.usedatabrain.com
• React Icons: https://react-icons.github.io/react-icons/

Related Reads

• How to create Dashboard in Angular
• How to create Dashboard in Nextjs
• How to create Dashboard in Python