Skip to content
+

Installation

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.

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