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
- 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 - Next, add a new heading to the app to give it some structure.
💡 You can find this in the Foundation section on mirotone.xyz. - 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!