7) Add Mirotone to an existing app

In the seventh task of the guided onboarding, you style the look and feel of an app using Mirotone components.


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

What's next

Go to the wrap-up of the guided onboarding: congratulations!