# 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
```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm install @adminkit/core
```
AdminKit 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.
```tsx title="src/main.tsx"
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(
,
);
```
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](/docs/getting-started/dark-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 ``, which Vite only serves from `public/`, so copy it there:
```bash
cp node_modules/@adminkit/core/dist/js/head.js public/
```
```html title="index.html"
```
## 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`).
```tsx title="src/Layout.tsx"
import type { ReactNode } from "react";
export default function Layout({ children }: { children: ReactNode }) {
return (
);
}
```
```tsx title="src/App.tsx"
import Layout from "./Layout.tsx";
export default function App() {
return (
Dashboard
);
}
```
## Run
```bash
npm run dev
```
Open 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.
---
Canonical HTML page: https://adminkit.io/docs/frameworks/react/
Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/docs/ · Questions: support@adminkit.io