Documentation

– Built with React 19 + TypeScript
– Vite 8 build tooling
– React Router v7 with lazy-loaded routes
– Redux Toolkit state management
– Tailwind CSS v4 (CSS-first config) with Preline v4 UI behaviours
– Light, dark and system theme modes
– Collapsible sidebar with hover-expand and a mobile overlay
– Sidebar translations: English, French, German and Arabic
– Around 500 prebuilt pages across 25+ business modules
– ApexCharts & Chart.js
– FullCalendar and drag & drop kanban boards
– Phosphor, Lucide & Font Awesome icon fonts
– React Compiler enabled
– Fully Responsive Design
– Compatible Browsers: Firefox, Safari, Opera, Edge, Chrome
– Easy to Customize with css Variables

react/
├── public/
│   └── assets/img/          # logo.svg, logo-dark.svg, logo-small.svg, favicon.png, apple-icon.png, avatar, card, product...
├── src/
│   ├── components/          # shared UI components
│   ├── core/                # auth, data (shared TS types), errors
│   ├── hooks/               # useDataTable, useForm, useToast, useWizard...
│   ├── layout/              # authLayout, publicLayout
│   ├── providers/           # LayoutSync.tsx - writes the theme to the DOM
│   ├── redux/               # store.ts, hooks.ts, slices/ (authSlice, layoutSlice)
│   ├── routes/              # all_routes, router, router.link, authGuards, lazyRoute, lazyPage, dynamicTitle
│   ├── style/css/           # style.css (theme tokens + Tailwind entry), custom.css, date-range-picker.css
│   ├── utils/               # theme.ts, sidebar.ts, json/ (sidebar menu + translations)
│   ├── views/               # page modules
│   ├── environment.tsx
│   └── main.tsx
├── eslint.config.js
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Shared Components (src/components/)

breadcrumb, carousel, charts, common-footer, common-header, common-sidebar, data-table, date-picker, date-range-picker, drawer, error-boundary, filter-drawer, form-feedback, image-with-base-path, import-export, modal, password-input, preview-code-toggle, range-slider, scroll-to-top, select, skeleton, submit-button, tag-input, time-picker, toast, ui, wizard

Page Modules (src/views/)

account, accounting-module, ai-analytics, application, auth-pages, banking-module, business-intelligence-module, crm-module, crypto-analytics, dashboard, ecommerce, finance-module, food-delivery, hospital-management, hotel-management, hrm-module, insights-module, lms-analytics, logistics-module, management-module, pages, project-management, reports, restaurant-pos, sales-analytics-module, school-management, seo-analytics, travel-booking, ui-interface

The app entry in src/main.tsx wraps the routes with the Redux Provider and BrowserRouter, then mounts the layout sync helper.

Below is the React app entry:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";

import "@phosphor-icons/web/regular/style.css";
import "@phosphor-icons/web/fill/style.css";
import "@phosphor-icons/web/duotone/style.css";
import "lucide-static/font/lucide.css";
import "@fortawesome/fontawesome-free/css/all.min.css";

import "flatpickr/dist/flatpickr.min.css";
import "./style/css/date-range-picker.css";
import "./style/css/style.css";
import "./style/css/custom.css";
import "preline";

import { base_path } from "./environment";
import LayoutSync from "./providers/LayoutSync";
import { store } from "./redux/store";
import DynamicTitle from "./routes/dynamicTitle";
import ALLRoutes from "./routes/router";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Provider store={store}>
      <BrowserRouter basename={base_path}>
        <LayoutSync />
        <ALLRoutes />
        <DynamicTitle />
      </BrowserRouter>
    </Provider>
  </StrictMode>
);

Routing

Routing is handled by react-router-dom v7. The basename comes from base_path in src/environment.tsx, which reads Vite's BASE_URL.

• src/routes/all_routes.tsx – central map of path constants used across the app.
• src/routes/router.link.tsx – exports authRoutes, sessionRoutes, errorRoutes, protectedRoutes and notFoundRoute. Around 500 entries, each shaped { id, path, element, route, meta_title }.
• src/routes/router.tsx – nests auth, session and error routes under AuthLayout and protectedRoutes under ProtectedRoute + PublicLayout. Unknown URLs render the 404 page in place.
• src/routes/authGuards.tsx – ProtectedRoute and SessionRoute guards.
• src/routes/lazyRoute.tsx – React.lazy + Suspense (via lazyPage.tsx) with a skeleton fallback for every code-split page.
• src/routes/dynamicTitle.tsx – sets document.title from each route's meta_title.

Dreams Core ships a single application shell (src/layout/publicLayout.tsx) with a responsive sidebar, topbar and content area, plus a bare authLayout for the sign-in and error pages. Sidebar behaviour is driven from Redux (src/redux/slices/layoutSlice.ts):

type LayoutState = {
  themeMode: ThemeMode;        // "light" | "dark" | "system"
  language: Language;          // "en" | "fr" | "de" | "ar"
  sidebarCollapsed: boolean;   // persisted as "dreamscore-sidebar-collapsed"
  mobileSidebarOpen: boolean;
};

All layouts support light and dark modes.

The default vertical layout with a left sidebar, topbar, and center content area. It is applied to every page behind ProtectedRoute.

• Sidebar: Navigation menu, logo, and collapsible dropdowns, built from src/utils/json/sidebarMenu.ts.
• Topbar: Search input, language and theme switchers, alerts, and profile actions.
• Responsive: Collapses into an overlay sidebar on tablets and mobile screens automatically.

A screen-saving option that collapses the sidebar to show icons only. When sidebarCollapsed is true, publicLayout.tsx adds the is-collapsed class to the .app-shell wrapper.

• Icon View: Collapses the sidebar to maximize the main work area.
• Hover Expand: Hovering over the collapsed sidebar expands it to reveal module text labels.
• Toggle: Switch between default and mini sidebar using the collapse button in the sidebar. The choice is remembered in localStorage.

Dreams Core comes with 24+ pre-styled UI components. You can find these files in your src/views/ui-interface/ directory (e.g. base-ui/uiAccordion.tsx) or click below to view their live layouts: