Omlet Docs
Ask or search…
⌃K
Comment on page

Your first scan

Before we jump in, make sure to create an account at omlet.dev — if you haven't already.

Prepare your code repository

The first step is to scan your repo using the Omlet CLI. Before we get started, make sure that your repo is locally available.
For example, if you manage your component library and your application(s) in separate repos, ensure they're all cloned locally and ready to go.
Framework & platform support
Omlet currently supports React and React Native. We'll be adding support for other frameworks and platforms in the future — share your feedback here.
If you prefer, you can also scan an open-source project. We'll be using Proton as an example.

Run Omlet CLI

Install Omlet CLI as a dependency via NPM:
npm i --save-dev @omlet/cli
Then, log in to Omlet CLI:
npx omlet login
This will open the browser with Omlet's login page. If the CLI doesn't detect the login, you can manually copy/paste the token to the CLI.
To start the component analysis, navigate to the root of the repo you wish to scan and run the Omlet CLI:
npx omlet init
init command takes you through a guided process to scan your repo(s) based on your setup.
init command supports multiple different setups, including:
  • A single repo that includes both your application and component library
  • A monorepo with multiple packages and your component library
  • Multiple application repos and a separate component library repo
…and with that, your first analysis is complete. 🥳
Next up, follow the link in the CLI (which will take you to the Omlet Web app at feta.omlet.dev) to set up your analytics dashboard.

Tag components

Once your first analysis is complete, Omlet will take you through a 3 step process where you'll set up your tags.
First, you'll need to define a tag that represents your design system components. Omlet uses this tag to reference your design system in various charts.
Next up, select which packages or folders contain your design system components.
And finally, you can (optionally) create more tags to identify other sets of components as well. You don't need to do this right away — you can always adjust your tags later on.
...and just like that, your setup is complete as well! 🥳
If you encounter any issues, check the Troubleshoot page or contact us! You can also delete the scan and restart the init setup process.

Next steps

To get insights into your design system, you can dive into the Analytics and Components pages on the Web app:
If you have more repositories, you can scan them using the analyze command:
If your designs system library is an external dependency, you'll need to scan it's repository too. However, make sure that you have the correct export configuration setup for the CLI:
Last modified 1mo ago