Comment on page
Your first scan
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.
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
initcommand takes you through a guided process to scan your repo(s) based on your setup.
initcommand 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. 🥳
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! 🥳
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
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
exportconfiguration setup for the CLI:
Last modified 1mo ago