Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More

App.css

@import url('https://cdn.syncfusion.com/ej2/material.css');

.sidebar {
  box-shadow: rgb(113 122 131 / 11%) 0px 7px 30px 0px;
}
.nav-item,
.navbar {
  z-index: 10000;
}
@media  screen and (max-width:800px) {
  .sidebar{
    z-index: 10000000;
  }
}

.e-dlg-center-center, .e-quick-popup-wrapper.e-device{
  z-index: 1000000 !important;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: rgb(216, 216, 216);
  border-radius: 40px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* color-picker style  */

 #preview {
  background: transparent
    url('https://ej2.syncfusion.com/react/demos/src/color-picker/images/pen.png')
    no-repeat;
  display: inline-block;
  height: 80px;
  margin: 10px 0;
  min-width: 300px;
  max-width: 600px;
  background-color: #008000;
}

.e-input-group:not(.e-float-icon-left), .e-input-group.e-success:not(.e-float-icon-left), .e-input-group.e-warning:not(.e-float-icon-left), .e-input-group.e-error:not(.e-float-icon-left), .e-input-group.e-control-wrapper:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){
  border: none;
}

craco.config.js

// craco.config.js
module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  };

index.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

body {
    margin: 0;
    padding:0;
    font-family: "Open Sans", sans-serif;
}

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

index.jsx (components)

export { default as Button } from './Button';
export { default as ThemeSettings } from './ThemeSettings';
export { default as Sidebar } from './Sidebar';
export { default as Navbar } from './Navbar';
export { default as Footer } from './Footer';
export { default as Cart } from './Cart';
export { default as Chat } from './Chat';
export { default as Notification } from './Notification';
export { default as UserProfile } from './UserProfile';
export { default as SparkLine } from './Charts/SparkLine';
export { default as LineChart } from './Charts/LineChart';
export { default as Stacked } from './Charts/Stacked';
export { default as Pie } from './Charts/Pie';
export { default as ChartsHeader } from './ChartsHeader';
export { default as Header } from './Header';

index.jsx (pages)

export { default as Ecommerce } from './Ecommerce';
export { default as Kanban } from './Kanban';
export { default as Orders } from './Orders';
export { default as Employees } from './Employees';
export { default as Editor } from './Editor';
export { default as Customers } from './Customers';
export { default as ColorPicker } from './ColorPicker';
export { default as Calendar } from './Calendar';
export { default as Area } from './Charts/Area';
export { default as Bar } from './Charts/Bar';
export { default as ColorMapping } from './Charts/ColorMapping';
export { default as Financial } from './Charts/Financial';
export { default as Line } from './Charts/Line';
export { default as Pie } from './Charts/Pie';
export { default as Pyramid } from './Charts/Pyramid';
export { default as Stacked } from './Charts/Stacked';

package.json

{
  "name": "project_syncfusion_dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@syncfusion/ej2": "^19.4.48",
    "@syncfusion/ej2-react-calendars": "^19.4.48",
    "@syncfusion/ej2-react-charts": "^19.4.50",
    "@syncfusion/ej2-react-dropdowns": "^19.4.52",
    "@syncfusion/ej2-react-grids": "^19.4.50",
    "@syncfusion/ej2-react-inputs": "^19.4.52",
    "@syncfusion/ej2-react-kanban": "^19.4.48",
    "@syncfusion/ej2-react-popups": "^19.4.52",
    "@syncfusion/ej2-react-richtexteditor": "^19.4.50",
    "@syncfusion/ej2-react-schedule": "^19.4.50",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.6",
    "tailwindcss": "^3.0.19"
  }
}

SparkLine.jsx

import React from 'react';
import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';

class SparkLine extends React.PureComponent {
  render() {
    const { id, height, width, color, data, type, currentColor } = this.props;

    return (
      <SparklineComponent
        id={id}
        height={height}
        width={width}
        lineWidth={1}
        valueType="Numeric"
        fill={color}
        border={{ color: currentColor, width: 2 }}
        tooltipSettings={{
          visible: true,
          // eslint-disable-next-line no-template-curly-in-string
          format: '${x} : data ${yval}',
          trackLineSettings: {
            visible: true,
          },
        }}
        markerSettings={{ visible: ['All'], size: 2.5, fill: currentColor }}
        dataSource={data}
        xName="x"
        yName="yval"
        type={type}
      >
        <Inject services={[SparklineTooltip]} />
      </SparklineComponent>
    );
  }
}

export default SparkLine;

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: 'class',
  theme: {
    fontFamily: {
      display: ['Open Sans', 'sans-serif'],
      body: ['Open Sans', 'sans-serif'],
    },
    extend: {
      fontSize: {
        14: '14px',
      },
      backgroundColor: {
        'main-bg': '#FAFBFB',
        'main-dark-bg': '#20232A',
        'secondary-dark-bg': '#33373E',
        'light-gray': '#F7F7F7',
        'half-transparent': 'rgba(0, 0, 0, 0.5)',
      },
      borderWidth: {
        1: '1px',
      },
      borderColor: {
        color: 'rgba(0, 0, 0, 0.1)',
      },
      width: {
        400: '400px',
        760: '760px',
        780: '780px',
        800: '800px',
        1000: '1000px',
        1200: '1200px',
        1400: '1400px',
      },
      height: {
        80: '80px',
      },
      minHeight: {
        590: '590px',
      },
      backgroundImage: {
        'hero-pattern':
          "url('https://demos.wrappixel.com/premium-admin-templates/react/flexy-react/main/static/media/welcome-bg-2x-svg.25338f53.svg')",
      },
    },
  },
  plugins: [],
};

It's not recognizing my FiSettings

@belvpassos for recognized your import by your IDE you should first declare where are you importing from (react-icons/fi)then it will give you the recommendation of FiSettins. If that does not work then you may check your dependencies in package.json ("react-icons": "^4.3.1", Version may differ) it should be present in the package.json file . You may let me know if the problem still persist .

@Faizy-khan Same issue. The two points suggested by you,fall in place. However, problem still persists.

so what should i do in the hero-pattern image it's just a white background

same issues here

so what should i do in the hero-pattern image it's just a white background

same issues here

It's a premium image now, you can easily download a good image and replace it!! Or directly replace the URL with another image URL :)

When I used "bg-hero-pattern", I didn't see any background, it was just plain white, and also, other subsequent code which generated icons for the button which has numbers assigned to them didn't work as well.

Hi, my code is not running anything at all, wat should i do

syncfusion components are not working. How I solve this issue? please anyone help.

syncfusion components are not working. How I solve this issue? please anyone help.

What Syncfusion components did not work? Or all of them?

You don't run the server in the right path, run npm run dev in your my-react-app directory!!! Also, you've to move your taillwindcss conf and the other file to the same dir. MAKE SURE ALWAYS TO STRUCTURE YOUR PROJECT :)

handleClick is not working anyone who can slove this?

provide me command to run the application

provide me command to run the application

Run this command in the folder where the package.json file exists -> "npm run start"