|
1 |
| -# React + TypeScript + Vite |
| 1 | +# Shadcn Admin Dashboard |
2 | 2 |
|
3 |
| -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | +Admin Dashboard UI crafted with Shadcn and Vite. Built with responsiveness and accessibility in mind. |
4 | 4 |
|
5 |
| -Currently, two official plugins are available: |
| 5 | + |
6 | 6 |
|
7 |
| -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh |
8 |
| -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
| 7 | +I've been creating dashboard UIs at work and for my personal projects. I always wanted to make a reusable collection of dashboard UI for future projects; and here it is now. While I've created a few custom components, some of the code is directly adapted from ShadcnUI examples. |
9 | 8 |
|
10 |
| -## Expanding the ESLint configuration |
| 9 | +> This is not a starter project (template) though. I'll probably make one in the future. |
11 | 10 |
|
12 |
| -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: |
| 11 | +## Features |
13 | 12 |
|
14 |
| -- Configure the top-level `parserOptions` property like this: |
| 13 | +- Light/dark mode |
| 14 | +- Responsive |
| 15 | +- Accessible |
| 16 | +- Sidebar and header layouts |
| 17 | +- 10+ pages |
| 18 | +- Extra custom components |
15 | 19 |
|
16 |
| -```js |
17 |
| -export default { |
18 |
| - // other rules... |
19 |
| - parserOptions: { |
20 |
| - ecmaVersion: 'latest', |
21 |
| - sourceType: 'module', |
22 |
| - project: ['./tsconfig.json', './tsconfig.node.json'], |
23 |
| - tsconfigRootDir: __dirname, |
24 |
| - }, |
25 |
| -} |
| 20 | +## Tech Stack |
| 21 | + |
| 22 | +**UI:** [ShadcnUI](https://ui.shadcn.com) (TailwindCSS + RadixUI) |
| 23 | + |
| 24 | +**Build Tool:** [Vite](https://vitejs.dev/) |
| 25 | + |
| 26 | +**Routing:** [React Router](https://reactrouter.com/en/main) |
| 27 | + |
| 28 | +**Type Checking:** [TypeScript](https://www.typescriptlang.org/) |
| 29 | + |
| 30 | +**Linting/Formatting:** [Eslint](https://eslint.org/) & [Prettier](https://prettier.io/) |
| 31 | + |
| 32 | +**Icons:** [Tabler Icons](https://tabler.io/icons) |
| 33 | + |
| 34 | +## Run Locally |
| 35 | + |
| 36 | +Clone the project |
| 37 | + |
| 38 | +```bash |
| 39 | + git clone https://github.com/satnaing/shadcn-admin.git |
26 | 40 | ```
|
27 | 41 |
|
28 |
| -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` |
29 |
| -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` |
30 |
| -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list |
| 42 | +Go to the project directory |
| 43 | + |
| 44 | +```bash |
| 45 | + cd shadcn-admin |
| 46 | +``` |
| 47 | + |
| 48 | +Install dependencies |
| 49 | + |
| 50 | +```bash |
| 51 | + pnpm install |
| 52 | +``` |
| 53 | + |
| 54 | +Start the server |
| 55 | + |
| 56 | +```bash |
| 57 | + pnpm run dev |
| 58 | +``` |
| 59 | + |
| 60 | +## Author |
| 61 | + |
| 62 | +Crafted with 🤍 by [@satnaing](https://github.com/satnaing) |
| 63 | + |
| 64 | +## License |
| 65 | + |
| 66 | +Licensed under the [MIT License](https://choosealicense.com/licenses/mit/) |
0 commit comments