Note: This branch contains the Ant Design v5 version of the project. This branch will receive security updates but no new features.
For new projects, please use the main branch which contains Ant Design v6.3.0 with the latest features:
- Masonry Component for galleries
- InputNumber Spinner for enhanced number inputs
- Semantic Structure APIs for better customization
- And more v6 improvements
# Clone the v6 (main) branch
git clone https://github.com/design-sparx/antd-multipurpose-dashboard.git
# Then checkout main (or just use main which is default)If you're migrating from v5 to v6, see the migration guide on the Ant Design website.
A professional Admin & Dashboard template based on Ant Design 5 that comes with hundreds of UI components, forms, tables, charts, pages and icons. This template is built using React, Vite, Ant Design Charts, Ant Design Icons and Storybook.
- Customizable: You don't need to be an expert to customize the template. Our code is very readable and well-documented.
- Fully Responsive: With mobile, tablet & desktop support it doesn't matter what device you're using. Antd Dashboard is responsive in all browsers.
- Cross-Browser: Our themes are working perfectly with Chrome, Firefox, Opera, and Edge. We're working hard to support them.
- Clean Code: We strictly follow Ant Design's guidelines to make your integration as easy as possible. All code is handwritten.
- Regular Updates: From time to time you'll receive an update containing new components, improvements, and bug fixes.
This project features all the latest tools and good practices in web development!
- Ant design - An enterprise-class UI design language and React UI library provides high-quality components.
- Ant design icons - Semantic vector graphics.
View more stacks
- ESLint - JavaScript linting
- Husky - Git hooks
- Lint staged - Lint staged files
- Prettier - Code formatting
- Commitlint - Conventional commit enforcement
- Redux Toolkit - Modern Redux
- React Redux - React bindings
- Redux Persist - State persistence
- lodash - Utility library
- react-countup - Number animations
- axios - HTTP client
- firebase - Backend services
- Clone this repo git clone
https://github.com/design-sparx/antd-multipurpose-dashboard.git - Download from GitHub
You'll need to install Node.js and pnpm. Once Node.js is installed, run pnpm install to install the rest of the template's dependencies. All dependencies will be downloaded to the node_modules directory.
View commands
```bash copy pnpm install ```Now you're ready to modify the source files and generate new files. To automatically detect file changes and start a local webserver at http://localhost:5173, run the following command.
pnpm devCompile, optimize, minify and uglify all source files to build/
pnpm build# Development server
pnpm dev # Start dev server on http://localhost:5173
# Code quality
pnpm lint # Run ESLint (max 0 warnings)
pnpm prettier:write # Format all files
# Storybook
pnpm storybook # Start Storybook on port 6006
pnpm build-storybook # Build Storybook for deployment
# Production
pnpm build # TypeScript compile + Vite build
pnpm preview # Preview production buildThis project uses Storybook for component testing and documentation:
# Start Storybook development server
pnpm storybook
# Build Storybook for deployment
pnpm build-storybook- Component testing: Interactive component development via Storybook
- Build validation: TypeScript compilation ensures type safety
- Code quality: ESLint static analysis and Prettier formatting
- Manual testing: Development server for interactive testing
Inside the zip file you'll find the following directories and files. Both compiled and minified distribution files, as Inside the zip file, you'll find the following directories and files. Both compiled and minified distribution files and the source files are included in the package.
View file tree
📂 antd-multi-dashboard/
┣ 📂 .github/ # GitHub's folder configs **
┣ 📂 .husky/ # Husky's folder
┃ ┣ 📃 commit-msg # Commitlint git hook
┃ ┗ 📃 pre-commit # Lint-staged git hook
┣ 📂 .vscode/ # VSCode's workspace **
┣ 📂 .idea/ # Intellij's webstorm workspace **
┣ 📂 .storybook/ # Storybook folder config **
┣ 📂 public/ # Public folder
┃ ┣ 📂 mocks/ # Mock data folder **
┃ ┣ 📂 showcase/ # Showcase images folder **
┃ ┣ 📃 favicon.ico # Icon tab browser
┣ 📂 src/
┃ ┣ 📂 assets/ # Assets folder **
┃ ┣ 📂 components/ # App Components **
┃ ┣ 📂 constants/ # App Components **
┃ ┃ ┗ 📃 routes.tsx # All routes declarations **
┃ ┣ 📂 context/ # React state conexts **
┃ ┣ 📂 hooks/ # React Hooks **
┃ ┃ ┗ 📃 useFetch.ts # Data fetch hook (optional) **
┃ ┣ 📂 layouts/ # Page layouts folder **
┃ ┣ 📂 pages/ # Pages **
┃ ┣ 📂 routes/ # Routes config folder **
┃ ┣ 📂 stories/ # Storybook folder **
┃ ┣ 📂 types/ # Typescript types/interfaces **
┃ ┣ 📂 utils/ # Useful functions folder **
┣ 📃 .editorconfig # Editor config
┣ 📃 .eslintrc # ESLint config
┣ 📃 .gitignore # Git ignore
┣ 📃 .prettierignore # Prettier ignore
┣ 📃 .prettierrc # Prettier ignore
┣ 📃 .versionrc # Versioning config
┣ 📃 .commitlintrc # Commitlint config
┣ 📃 CHANGELOG.md # Changelogs
┣ 📃 CONTRIBUTING.md # Contributing
┣ 📃 LICENSE # License of the project
┣ 📃 vite.config.js # Vite config
┣ 📃 README.md # Main README
┣ 📃 renovate.json # Renovate Bot config **
┣ 📃 tsconfig.json # TypeScript config