Slash Admin: a React 19 admin template built on Vite, shadcn/ui and TypeScript

What Slash Admin actually gives you

Slash Admin is a front-end admin template, not a full-stack product. The README describes it as "a modern admin dashboard template built with React 19, Vite, shadcn/ui, and TypeScript" and says it is meant to help developers build admin management systems quickly. Everything it ships lives in the browser: pages, layout, routing, state, and mock data.

The feature list is the useful part. It includes user management, role management and permission management, access control based on user roles, internationalization with language switching, nested route configuration, and customizable themes. Those are the pieces most teams rebuild from scratch on every internal tool, and they are the reason to look at a template at all.

Who it is for: a front-end or full-stack developer who has a backend already, or who plans to write one, and wants the admin shell finished. It is not aimed at people who want a hosted admin panel with a database attached. There is no server in this repository.

The stack choices and what they cost you

The dependency list in package.json is opinionated and current. React 19.1, Vite via @vitejs/plugin-react, TypeScript, Zustand for state, @tanstack/react-query for data fetching, react-router for routing, i18next and react-i18next for translations, and antd 5.x sitting alongside shadcn/ui primitives such as radix-ui, class-variance-authority, clsx and tailwindcss 4 through @tailwindcss/vite.

Two UI systems in one template is the first trade-off. antd brings its own component model and its own CSS-in-JS layer through @ant-design/cssinjs; shadcn/ui is copy-in components built on Radix and Tailwind. You will see both in the tree, and you will have to decide which one your new screens follow. The README presents shadcn/ui as the headline integration and lists antd separately, but both are installed dependencies, so the choice is yours to make rather than one the template makes for you.

Charts come from apexcharts and react-apexcharts. The calendar uses the @fullcalendar packages. Rich text uses react-quill. Forms use react-hook-form with @hookform/resolvers. Drag and drop uses @dnd-kit. None of these are surprises for an admin template, but each one is a dependency you inherit and eventually have to upgrade.

Motion is listed as both motion and framer-motion in the repository topics, with motion ^12.9.0 in dependencies. If you only need a static dashboard, that is weight you are carrying for animations you may never use.

How the app is wired: routes, roles and mocks

The .env.example file shows the four knobs that control the app's shape before you touch any component. VITE_APP_DEFAULT_ROUTE sets where the app lands after login, and the example value is /workbench. VITE_APP_PUBLIC_PATH sets the asset base path. VITE_APP_API_BASE_URL sets the API prefix, defaulting to /api. VITE_APP_ROUTER_MODE is set to frontend in the example, which tells you the router can operate in more than one mode and that the file names the one in use.

Access control is role-based, per the feature list, and it sits alongside a flexible nested route configuration. In practice that means route definitions carry permission information and the shell decides what to render. The README does not spell out the exact guard API, so read src/ before you design around it.

Data flows through React Query, with axios as the HTTP client. Because the template ships an MSW and Faker.js mocking solution, requests are intercepted in the browser during development and answered with generated data. That is what lets the preview site and a fresh clone show populated tables without a server. The mock layer is the seam you will cut when you connect a real backend: point VITE_APP_API_BASE_URL at your service and remove or disable the handlers.

State that is not server data lives in Zustand stores. That split, React Query for remote data and Zustand for client state, is the conventional arrangement and it is consistent with the dependencies listed.

Install and first run

The README gives a four-step quick start. Note that the clone URL in the README points at d3george/slash-admin, while the repository under discussion is dingyi214/slash-admin; use the URL of the fork or mirror you actually intend to track.

Clone the repository:

git clone https://github.com/d3george/slash-admin.git

Install dependencies from the project root. The lockfile in the repository is pnpm-lock.yaml, and package.json declares a preinstall script that runs lefthook install, so pnpm is the package manager the project expects:

pnpm install

Start the development server:

pnpm dev

The README says to visit http://localhost:3001 to view the application. That port comes from the README, not from a value you need to guess.

Before you run anything against your own backend, copy the environment template and adjust it:

cp .env.example .env

The file contains these keys, with the example values shown:

VITE_APP_DEFAULT_ROUTE = /workbench
VITE_APP_PUBLIC_PATH = /
VITE_APP_API_BASE_URL = /api
VITE_APP_ROUTER_MODE = frontend

For a production build the README gives pnpm build, which the package.json script defines as tsc && vite build. Type errors stop the build, so a clean tsc pass is a prerequisite for shipping.

Where Slash Admin is the wrong tool

The clearest limitation is that this is a template, and templates age. The last push to this repository was on 2026-06-19. That is recent enough that the code is not abandoned, but it also means the pinned dependency ranges in package.json are what you get; there is no release list in the repository to tell you what changed between versions, and no changelog in the repository. Upgrading React, Tailwind 4, antd or FullCalendar is your problem, not the project's.

The mock layer is a second boundary. MSW and Faker.js make the demo convincing, and that is exactly the risk: it is easy to build screens against generated data whose shapes do not match your real API. The README does not document an authentication flow against a real identity provider, and it does not document rollback or migration for the mock handlers. You are expected to replace them.

If your admin needs server-side rendering, this is not the project. Vite builds a client-side bundle; there is no SSR entry point in the repository layout. If you need an admin panel generated from a database schema, with CRUD endpoints included, a template gives you none of that. And if your team has standardized on a single component library, arriving with both antd and shadcn/ui installed means an early decision about which one to keep and which to strip out.

Alternatives and how the approach differs

The most direct comparison is a scaffold generator such as create-react-app-style admin starters or a framework's own admin preset. Those generate a project once and then leave you alone; Slash Admin is a running application you fork, so you inherit its existing pages, its routing conventions and its mock data rather than an empty shell. The difference matters when you want to read working examples of role-based routing and i18n instead of writing them.

A second comparison is a full-stack admin framework that ships a backend, an ORM and generated CRUD screens. Slash Admin has no server component at all. If your bottleneck is backend work, that category solves a problem this template does not touch, and you would be adopting Slash Admin for the front end only.

A third is a headless component library plus your own layout code. That gives you maximum control and zero inherited opinions, at the cost of building the sidebar, the breadcrumbs, the permission guards and the language switcher yourself. Slash Admin's value is precisely that those exist already, with shadcn/ui and Tailwind 4 as the styling base.

Licence and the cost of keeping it current

The repository is MIT licensed, with a LICENSE file at the top level. MIT permits commercial use, modification and redistribution provided the copyright notice and permission notice are retained. That is a permissive arrangement, and it is the reason a template like this can be dropped into a closed-source internal tool. This is a description of the licence text, not legal advice; if your organization has rules about attribution or about shipping third-party UI code, have someone check the notice requirements against your distribution model.

The upgrade cost is the real ongoing expense. You are pinning React 19, Vite, Tailwind 4, antd 5, React Query 5, FullCalendar 6 and a long tail of smaller packages. Tailwind 4 changed its configuration model, and this project uses the @tailwindcss/vite plugin rather than a PostCSS pipeline, so any Tailwind guidance you find online may not apply directly. The biome.json and lefthook.yml files show the project has opinions about formatting and pre-commit hooks; adopting those conventions is cheap at the start and awkward to reverse later.

Editorial conclusion

Slash Admin suits teams that want a React 19, TypeScript admin shell with routing, role-based access and i18n already wired, and who are willing to replace the MSW mocks with a real API. It is the wrong choice if you need a backend, a database or a maintained upgrade path that the repository promises. Before adopting, verify the VITE_APP_API_BASE_URL and VITE_APP_ROUTER_MODE values against your own deployment, and read the docs site for the parts the README does not cover.

Frequently asked questions

Official sources

1. dingyi214/slash-admin on GitHub
2. Issues
3. License: MIT
4. Project website
5. README