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.


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


What's next

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