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. Follow the instructions presented. Once the installation ends, run:

cd <project-name>
npm run dev

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

4. The CLI bootstraps the following directory:

    ├── app
    │ ├── auth
    │ ├──── [...path]
    │ └────── page.tsx
    │ ├── api
    │ ├──── auth
    │ ├────── [...nextAuth]
    │ └───────── route.tsx
    │ ├── (dashboard)
    | ├──── layout.tsx
    │ ├──── page
    │ └────── page.tsx
    ├──── layout.tsx
    └──── page.tsx
   

   CopyCopied(or $keyC)

   and the following page appears when you run the project locally:

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