Building Core Layout & UI Components

Introduction

The foundation of a great dashboard is a well-structured and responsive UI. In this chapter, we will focus on creating a scalable and reusable layout that includes:

• A sidebar for navigation
• A top navigation bar for quick actions
• A content area for displaying various data views
• Reusable UI components like buttons, modals, and alerts
• Dark mode support

By the end of this chapter, you will have a fully functional dashboard shell that can be expanded with data-driven components in later chapters.

1. Creating a Responsive Layout

A dashboard layout generally consists of three main sections:

• Sidebar Navigation: Contains links to different sections of the dashboard.
• Top Navigation Bar: Displays user profile info, notifications, and settings.
• Main Content Area: Shows data tables, charts, and widgets.

1.1 Setting Up the Base Layout Component

Create a new folder inside src/components/layout and add a DashboardLayout.jsx file:

import Sidebar from "./Sidebar";
import TopNav from "./TopNav";

const DashboardLayout = ({ children }) => {
  return (
    <div className="flex h-screen">
      {/* Sidebar */}
      <Sidebar />

      {/* Main Content */}
      <div className="flex-1 flex flex-col bg-gray-100 dark:bg-gray-900">
        <TopNav />
        <main className="p-6">{children}</main>
      </div>
    </div>
  );
};

export default DashboardLayout;

1.2 Implementing the Sidebar

The sidebar will provide navigation to different sections of the dashboard. Add Sidebar.jsx inside src/components/layout/.

import { Link } from "react-router-dom";
import { Home, BarChart, Settings } from "lucide-react";

const Sidebar = () => {
  return (
    <div className="w-64 bg-white dark:bg-gray-800 h-screen p-4 shadow-md flex flex-col">
      <h2 className="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6">Dashboard</h2>
      <nav>
        <Link to="/" className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
          <Home size={20} />
          <span>Home</span>
        </Link>
        <Link to="/analytics" className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
          <BarChart size={20} />
          <span>Analytics</span>
        </Link>
        <Link to="/settings" className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
          <Settings size={20} />
          <span>Settings</span>
        </Link>
      </nav>
    </div>
  );
};

export default Sidebar;

1.3 Implementing the Top Navigation Bar

The top navigation bar contains a search bar, notifications, and a profile dropdown.

Create TopNav.jsx inside src/components/layout/.

import { Bell, User } from "lucide-react";

const TopNav = () => {
  return (
    <div className="flex justify-between items-center px-6 py-4 bg-white dark:bg-gray-800 shadow-md">
      <h1 className="text-lg font-medium text-gray-700 dark:text-gray-200">Dashboard</h1>
      <div className="flex items-center space-x-4">
        <button className="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
          <Bell size={20} />
        </button>
        <button className="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
          <User size={20} />
        </button>
      </div>
    </div>
  );
};

export default TopNav;

2. Creating Reusable UI Components

A good UI design relies on consistent, reusable components like buttons, modals, and alerts. These elements enhance maintainability and improve the development speed.

2.1 Creating a Button Component

Create a Button.jsx file inside src/components/ui/.

const Button = ({ children, onClick, className }) => {
  return (
    <button
      onClick={onClick}
      className={`px-4 py-2 rounded-lg text-white bg-blue-600 hover:bg-blue-700 ${className}`}
    >
      {children}
    </button>
  );
};

export default Button;

2.2 Creating a Modal Component

Modals are useful for displaying forms and alerts. Create Modal.jsx inside src/components/ui/.

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
      <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg w-1/3">
        {children}
        <button onClick={onClose} className="mt-4 text-blue-600 hover:underline">
          Close
        </button>
      </div>
    </div>
  );
};

export default Modal;

3. Implementing Dark Mode

Dark mode enhances user experience and is a standard in modern dashboards. We can use Tailwind’s dark mode feature.

Modify index.css to enable dark mode.

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

html {
  @apply dark:bg-gray-900 dark:text-gray-200;
}

Then, create a ThemeToggle.jsx component inside src/components/ui/.

const ThemeToggle = () => {
  const toggleTheme = () => {
    document.documentElement.classList.toggle("dark");
  };
  return (
    <button onClick={toggleTheme} className="p-2 rounded-lg bg-gray-300 dark:bg-gray-700">
      Toggle Dark Mode
    </button>
  );
};

export default ThemeToggle;

Conclusion

In this chapter, we successfully built the foundation of our React dashboard:

✅ Created a responsive layout with a sidebar and top navigation. ✅ Built reusable UI components (buttons, modals, alerts). ✅ Implemented dark mode using Tailwind CSS.

Next, we’ll move on to integrating APIs and fetching dynamic data in our dashboard.