https://github.com/d3george/slash-admin
A Modern React Admin Template. It is based on React 18, Vite and TypeScript. It's fast !
https://github.com/d3george/slash-admin
admin admin-dashboard admin-panel admin-template ant-design antd framer-motion react react-admin react-admin-dashboard react-admin-kit react-admin-template react-markdown react-query react-router-v6 styled-components tailwindcss ts vite zustand
Last synced: 25 days ago
JSON representation
A Modern React Admin Template. It is based on React 18, Vite and TypeScript. It's fast !
- Host: GitHub
- URL: https://github.com/d3george/slash-admin
- Owner: d3george
- License: mit
- Created: 2023-08-31T08:38:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-02T08:54:32.000Z (about 1 month ago)
- Last Synced: 2025-04-03T16:02:40.225Z (about 1 month ago)
- Topics: admin, admin-dashboard, admin-panel, admin-template, ant-design, antd, framer-motion, react, react-admin, react-admin-dashboard, react-admin-kit, react-admin-template, react-markdown, react-query, react-router-v6, styled-components, tailwindcss, ts, vite, zustand
- Language: TypeScript
- Homepage: https://admin.slashspaces.com/
- Size: 6.25 MB
- Stars: 2,262
- Watchers: 19
- Forks: 387
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react - Slash Admin - A Modern React Admin Template. It is based on React 18, Vite and TypeScript. It's fast !.. (Uncategorized / Uncategorized)
- awesome-react - Slash Admin - A Modern React Admin Template. It is based on React 18, Vite and TypeScript. It's fast !.. (Uncategorized / Uncategorized)
README
Slash Admin
Slash Admin is a modern admin dashboard template built with React 18, Vite, Ant Design, and TypeScript. It is designed to help developers quickly create powerful admin management systems.
Preview
·
Discord
·
Document
**English** | [中文](./README.zh-CN.md)
## Sponsor
## Preview
+ https://admin.slashspaces.com/
||
| ----------------------------------------------------------------- | ------------------------------------------------------------------- |
||
## Features
- Built using React 18 hooks.
- Powered by Vite for rapid development and hot module replacement.
- Integrates Ant Design, providing a rich set of UI components and design patterns.
- Written in TypeScript, offering type safety and an improved development experience.
- Responsive design, adapting to various screen sizes and devices.
- Flexible routing configuration, supporting nested routes.
- Integrated access control based on user roles.
- Supports internationalization for easy language switching.
- Includes common admin features like user management, role management, and permission management.
- Customizable themes and styles to meet your branding needs.
- Mocking solution based on MSW and Faker.js.
- State management using Zustand.
- Data fetching using React-Query.
## Quick Start
### Get the Project Code
```bash
git clone https://github.com/d3george/slash-admin.git
```
### Install Dependencies
In the project's root directory, run the following command to install project dependencies:
```bash
pnpm install
```
### Start the Development Server
Run the following command to start the development server:
```bash
pnpm dev
```
Visit [http://localhost:3001](http://localhost:3001) to view your application.
### Build for Production
Run the following command to build the production version:
```bash
pnpm build
```
## Docker deployment
### Build image and Run container
#### build image
Enter the project root directory in the terminal and execute the following command to build the Docker image:
```
docker build -t your-image-name .
```
Make sure to replace `your-image-name` with your own image name
#### run container
Run your application in the Docker container using the following command:
```
docker run -p 3001:80 your-image-name
```
This will run your application on port `80`(exposed in `Dockerfile`) of the container and map it to port `3001` on your host.
Now you can access http://localhost:3001 to view the deployed applications.
### use docker-compose.yaml
Enter the project root directory in the terminal and execute the following command to start Docker Compose:
```
docker-compose up -d
```
Docker Compose will build an image based on the configuration defined by 'docker-compose. yaml' and run the container in the background.
After the container runs successfully, it can also be accessed through http://localhost:3001 To view the deployed applications.
## Git Contribution submission specification
reference[.commitlint.config.js](./commitlint.config.js)
- `feat` new features
- `fix` fix the
- `docs` documentation or comments
- `style` code format (changes that do not affect code execution)
- `refactor` refactor
- `perf` performance optimization
- `revert` revert commit
- `test` test related
- `chore` changes in the construction process or auxiliary tools
- `ci` modify CI configuration and scripts
- `types` type definition file changes
- `wip` in development