Project structure

The folders of AdminKit for React: index.html, the routes in src/routes, components, data, hooks and Sass, and how to add a page and its sidebar link.

The free version and AdminKit PRO have the same layout; PRO has more pages, components and plugins in the same folders.

├── index.html              the page shell: head scripts, <body> attributes, #root
├── public/                 images and other files served as they are
├── scripts/                stats.mjs (npm run stats)
├── src/
│   ├── main.tsx            renders <App /> and imports the stylesheet
│   ├── app.tsx             the router: one route per entry in data/pages.json
│   ├── routes/             one file per page, named after its URL (index.tsx is /)
│   ├── components/
│   │   ├── bootstrap/      Modal, Dropdown, Offcanvas, ... (see Components)
│   │   ├── plugins/        ChartJs, VectorMap, ... (see Charts)
│   │   ├── navbar/         the top bar and its menus
│   │   ├── sidebar/        the sidebar and its menu
│   │   ├── settings/       the settings panel (PRO)
│   │   ├── ui/             PageTitle, CountUp, Skeleton, Footer
│   │   └── pages/          what one page uses, in pages/<section>/<page>/
│   ├── contexts/           LayoutProvider: the sidebar toggle
│   ├── data/               pages.json, navigation.ts, stats.json and the other app data
│   ├── hooks/              useColorMode, useTheme, useConfig (PRO), ...
│   ├── layouts/            DashboardLayout, AuthLayout, PageMeta and PageEffects
│   ├── lib/                config.ts, site.ts
│   ├── mocks/              the demo data of the pages
│   └── scss/               app.scss and the Sass partials
└── vite.config.ts          the build and BASE_PATH

Routes

src/app.tsx builds the routes from src/data/pages.json: each entry has a path, a title, a meta description and a layout, "dashboard" (sidebar, navbar and footer) or "auth" (centered, for the sign-in and error pages). The page for a path is the file of the same name in src/routes/ (/pages-settings is src/routes/pages-settings.tsx), loaded when it is first opened. Paths that match no route show the 404 page.

A page is a component, exported as default:

src/routes/pages-blank.tsx

import { PageTitle } from "@/components/ui/page-title";

export default function Page() {
  return (
    <>
      <PageTitle title="Blank Page" />

      <div className="row">
        <div className="col-12">
          <div className="card">
            <div className="card-header">
              <h2 className="card-title mb-0">Empty card</h2>
            </div>
            <div className="card-body"></div>
          </div>
        </div>
      </div>
    </>
  );
}

PageMeta (src/layouts/page-meta.tsx) sets the document title and meta description of the current route from pages.json. Demo data lives in src/mocks/; replace it with your own data, for example fetched in an effect or with your data library.

Add a page

Create src/routes/reports.tsx from the blank page above.

Add it to src/data/pages.json:

{
  "path": "/reports",
  "title": "Reports",
  "layout": "dashboard",
  "description": "Monthly reports."
}

Link it in the sidebar menu in src/data/navigation.ts (see Sidebar).
Run npm run stats. It updates the counts in src/data/stats.json, and npm run lint fails while a file in src/routes/ is missing from pages.json or the counts are out of date.

Images and links

Use React Router's Link (import { Link } from "react-router") for links between pages. Images are plain <img> elements with a width and height; write their src with asset() from src/lib/site.ts, so they keep working under a base path:

<img src={asset("/img/avatars/avatar.jpg")} width="40" height="40" alt="" />

Imports

@/ is src/ (set in vite.config.ts and tsconfig.json): @/components/bootstrap/modal is src/components/bootstrap/modal.tsx.

RoutesCopy Anchor Link

Add a pageCopy Anchor Link

Images and linksCopy Anchor Link

ImportsCopy Anchor Link

On this page

Routes

Add a page

Images and links

Imports