Admin Dashboard EBS - Setup Guide

This guide details how to install the package and prepare your project for customization.

1. Installation

Install the package along with the required peer dependencies (lucide-react and react-router-dom).

npm install admin-dashboard-ebs lucide-react react-router-dom

2. Configure App.tsx

Update your src/App.tsx to import the dashboard and the styles.

import { EbsDashboard } from "admin-dashboard-ebs";
import "admin-dashboard-ebs/style.css";

function App() {
  return <EbsDashboard basePath="/" />;
}

export default App;

3. Configure index.css

Reset your src/index.css to ensure the dashboard renders correctly (removes default centering styles).

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  display: block;
  min-width: 320px;
  min-height: 100vh;
}

4. Eject Source Code

To modify the dashboard pages, run the ejection script included in the package.

./node_modules/admin-dashboard-ebs/eject-dashboard.ps1

Note: After running the script, your project will contain the source code in src/components, src/layouts, and src/pages. To start using these local files, you will need to update src/App.tsx to import them instead of EbsDashboard.