Back to projects
NextJs + TypeScript + ShadeCn Admin Panel Template

NextJs + TypeScript + ShadeCn Admin Panel Template

Mahmudul Hasan Nayeem / August 30, 2024

This nextJs admin panel template is built with TypeScript and ShadeCn. It is a fully responsive admin dashboard template that is easy to customize and extend. The template includes a variety of components and features that make it easy to build powerful admin interfaces.

Features

  • TypeScript Support: Write code in TypeScript.
  • ShadeCn: A modern CSS framework for building custom designs.
  • Responsive Design: The template is responsive and works on all devices.
  • Custom Components: Use custom components in your admin panel.
  • Dark Mode: Toggle between light and dark mode.
  • Charts: Display data using interactive charts.
  • Tables: Show data in tables with sorting and filtering.
  • Forms: Create forms with validation and error handling.
  • Multiple Themes: Multiple themes support.

Technologies

  • NextJs: A React framework for building static and dynamic websites.
  • TypeScript: A statically typed superset of JavaScript.
  • ShadeCn: A modern CSS framework for building custom designs.
  • React: A JavaScript library for building user interfaces.
  • Recharts: A charting library for React. Styles with ShadeCn + Tailwind CSS.
  • React Hook Form: A library for managing forms in React.
  • Tanstack Table: A library for building tables in React. includes sorting and filtering.
  • Zod: A TypeScript-first schema declaration and validation library.
  • T3-OSS: For typesafe environment variables.
  • React Query: A library for managing server state in React applications.
  • Sooner: A library for displaying toast notifications in React.
  • Lucide react: A library for using icons in React applications.
  • Date-fns: A library for working with dates in JavaScript.
  • Husky: A library for managing git hooks.

Getting Started

To get started with this project, Create a new repository by clicking the Use this template button on the repository page.

  • Install the dependencies:

    npm install
# or
yarn
# or
pnpm install
# or
bun install

  • Then, run the development server:

    npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

  • Open http://localhost:3000 with your browser to see the result.

  • Start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Dependent Libraries

Folder Structure

.
├── components
├── hooks
├── app
│   ├── layout
│   ├── page.tsx
│   ├── favicon.ico
│   ├── global.css
│   └── (other files and folders)
├── lib
│   ├──utils.ts
│   ├──...others
├── public
├── scripts
├── (other folders and files)
└── tsconfig.json

Custom Components

This template includes a variety of custom components that you can use in your admin panel. Some of the key components include:

  • ShadeCn components: All the components from ShadeCn are available for use in this template.
  • Charts: All the shadeCn charts are available for use in this template.
  • Multi-select: A custom multi-select component. Avaiable here.
  • Pagination: Custom made pagination component. Avaiable here.

Scripts

  • dev: Run the development server
  • build: Build the app for production
  • start: Run the production build
  • lint: Run ESLint
  • lint:fix: Run ESLint and fix issues
  • format: Run Prettier
  • format:fix: Run Prettier and fix issues
  • commit: Run commitizen

Environment Variables

Read how to use T3 Env for environment variables. we setup T3 Env for environment variables. You can create a .env file in the root directory and add your environment variables there. and register in env.mjs file.

Commit Message Convention

This project uses commitlint to lint commit messages. The commit message convention is based on Conventional Commits.

Commit Message Format

<type>[optional scope]: <description>

Or you can use the interactive commit message prompt by running

npm run commit
# or
yarn commit
# or
pnpm commit
# or
bun commit

Conclusion

This admin panel template is a great example of how you can use NextJs and TypeScript to build a modern admin interface. By combining the power of NextJs and TypeScript, you can create powerful and responsive admin panels that are easy to customize and extend. If you are looking for a modern admin panel template, this project is a great starting point.

License

This project is open source and available under the MIT License.