7) Add Mirotone to an existing app

Time to complete

~8 minutes

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:
   Shell

   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

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

• Mirotone.xyz