Skip to main content

7) Add Mirotone to an existing app



80%

Time to complete

Time to complete ~8 minutes

Learning objective

Learning objective After completing this onboarding task, you’ll be able to:

  • Explore the Mirotone library, and
  • Efficiently design high-quality apps by leveraging our pre-built components in the Miro style.

No app is complete without some design thought! Take some time to explore our Mirotone library and add some components to your app.

Action: add Mirotone to your app

  1. Using the drag and drop app you cloned earlier (or a new app), add Mirotone by navigating to the root directory of the app and running npm install mirotone:
    cd path-to/<your-app>/root-dir
    npm install mirotone
    
  2. Next, add a new heading to the app to give it some structure.
    💡 You can find this in the Foundation section on mirotone.xyz.
  3. Once you've added a new heading, add a second component to the app—a checkbox.
    💡 You can find this in the Components section on mirotone.xyz.

Let's wrap up

Let's wrap up In this onboarding task, you:

  • Explored the Mirotone library, and
  • Added a couple of Mirotone components to the app.

You've come a long way! Let's wrap up.

📘

Recommended in-depth training

Now that you've completed tasks 5-7, check out the second in-depth training, which builds on the foundation you've built so far!

Training 2: build a fullstack Miro app

See also