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
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!
Updated 3 days ago
Go to the wrap-up of the guided onboarding: congratulations!