Skip to content
+

Installation

Manual Installation

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

npm install -S @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 -S @mui/material @mui/icons-material @emotion/react @emotion/styled

Automatic Installation

Learn how to install Toolpad Core in your local environment.

  1. Run the following command to start Toolpad Core:
npx create-toolpad-app@latest
  1. Follow the instructions presented. Once the installation ends, run:
cd <project-name>
npm run dev
  1. Visit http://localhost:3000/ in your browser to open the application.

  2. 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
    

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

Toolpad Core entry point

Starting with Toolpad Core

  1. 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.