React
Use AdminKit in a React app built with Vite, import the CSS and JavaScript from @adminkit/core and render the sidebar layout as a component.
AdminKit is an HTML, CSS and JavaScript template, not a React component library. In a React app you import its compiled CSS and JavaScript once and use its class names in your JSX.
Install
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm install @adminkit/coreAdminKit PRO is not published to npm. Copy dist/ from the download into src/adminkit/ and import ./adminkit/css/app.css and ./adminkit/js/app.js instead.
Import the CSS and JavaScript
Import both files in the entry module. Delete src/index.css and src/App.css from the Vite starter, because their styles conflict with AdminKit.
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "@adminkit/core/css";
import "@adminkit/core";
import App from "./App.tsx";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>,
);The package ships TypeScript declarations for both imports and for the globals app.js adds, such as window.adminkit.
Optional: avoid a color mode flash
Without head.js, app.js applies the stored color mode once it runs, so a visitor who picked the mode opposite to their operating system briefly sees the other one. head.js applies it before the first paint. It has to be a plain, blocking script in <head>, which Vite only serves from public/, so copy it there:
cp node_modules/@adminkit/core/dist/js/head.js public/<script src="/head.js"></script>Minimal layout
app.js sets up icons, the sidebar toggle and the SimpleBar scrollbar in markup that React renders later, so the layout is plain markup with the js-sidebar, js-simplebar and js-sidebar-toggle classes. From the lg breakpoint the toggle collapses the sidebar; below it, the sidebar is a Bootstrap offcanvas sheet (offcanvas-lg on #sidebar).
import type { ReactNode } from "react";
export default function Layout({ children }: { children: ReactNode }) {
return (
<div className="wrapper">
<nav id="sidebar" className="sidebar js-sidebar offcanvas-lg offcanvas-start" tabIndex={-1} aria-label="Sidebar">
<div className="sidebar-content js-simplebar">
<a className="sidebar-brand" href="/">
<span className="align-middle">AdminKit</span>
</a>
<ul className="sidebar-nav">
<li className="sidebar-header">Pages</li>
<li className="sidebar-item active">
<a className="sidebar-link" href="/">
<i className="align-middle" data-lucide="sliders-vertical"></i> <span className="align-middle">Dashboard</span>
</a>
</li>
<li className="sidebar-item">
<a className="sidebar-link" href="/profile">
<i className="align-middle" data-lucide="user"></i> <span className="align-middle">Profile</span>
</a>
</li>
</ul>
</div>
</nav>
<div className="main">
<nav className="navbar navbar-expand navbar-light navbar-bg" aria-label="Top bar">
<button type="button" className="sidebar-toggle js-sidebar-toggle" aria-controls="sidebar" aria-expanded="true" aria-label="Collapse sidebar">
<i className="hamburger align-self-center"></i>
</button>
</nav>
<main className="content">
<div className="container-fluid p-0">{children}</div>
</main>
</div>
</div>
);
}import Layout from "./Layout.tsx";
export default function App() {
return (
<Layout>
<h1 className="h3 mb-3">Dashboard</h1>
<div className="card">
<div className="card-body">Hello from AdminKit.</div>
</div>
</Layout>
);
}Run
npm run devOpen http://localhost:5173. You should see the dark sidebar with its two icons, the navbar with the hamburger toggle and the card. Clicking the toggle collapses the sidebar. In a window narrower than 992px the sidebar is hidden, and the toggle opens it as a sheet over the page; Escape, the backdrop or a link closes it.
Last updated on