Installation

Learn how to install Toolpad Core in your local environment.

Manual installation

Use your preferred package manager to install @toolpad/core in your project:

npm install @toolpad/core

The Toolpad Core package has a peer dependency on @mui/material and @mui/icons-material. If you aren't using these already in your project, you can install them with:

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

Automatic installation

1. Run the following command to start Toolpad Core:

npx create-toolpad-app@latest

2. You will be asked to choose amongst your preferred frameworks (Next.js/Vite), routers and authentication providers. Once the installation ends, run:

cd <project-name>
npm run dev

3. Visit http://localhost:3000/ in your browser to open the application.

4. A sample directory structure with the Next.js App router will look like this:

   Without Authentication:

   ├── app
   │   ├── (dashboard)
   │   │   ├── layout.tsx
   │   │   ├── page.tsx
   │   │   └── orders
   │   │       └── page.tsx
   │   └── layout.tsx
   ├── .env
   ├── .env.local
   ├── .eslintrc.json
   ├── .gitignore
   ├── next.config.js
   ├── package.json
   ├── README.md
   └── tsconfig.json
   

   CopyCopied(or $keyC)

   With Authentication:

   ├── app
   │   ├── auth
   │   │   └── signin
   │   │       └── page.tsx
   │   ├── api
   │   │   └── auth
   │   │       └── [...nextauth]
   │   │           └── route.ts
   │   ├── (dashboard)
   │   │   ├── layout.tsx
   │   │   ├── page.tsx
   │   │   └── orders
   │   │       └── page.tsx
   │   └── layout.tsx
   ├── .env
   ├── .env.local
   ├── .eslintrc.json
   ├── .gitignore
   ├── next.config.js
   ├── package.json
   ├── README.md
   └── tsconfig.json
   

   CopyCopied(or $keyC)

5. Installation is complete! Begin building your project by making edits to (dashboard)/page.tsx. To understand how to leverage Toolpad Core to build dashboards quickly, see the detailed tutorial.

6. If you selected authentication, you will need to provide values to the .env files that have been created. See more information on the usage with authentication libraries section.