CLI & Dashboard

Scan your codebase with CLI

Make your design system and the application repositories locally available, or use an open-source project such as Proton for this tutorial.

Navigate to the root of the repo you wish to scan and run:

npx @omlet/cli init

yarn dlx @omlet/cli init

pnpm dlx @omlet/cli init

This will install the latest version of the CLI and then open the browser to log in to your Omlet account. Once you log in, the CLI will start scanning your repository.

You can then follow the link to your workspace to complete the setup.

Tag your components

Create a tag to reference your design system components and select the packages or folders that contain those components.

You can create additional tags to identify different components, such as the legacy components you've deprecated. This step is optional — you can always adjust your tags later on.

Get quick insights

Congrats! 🥳 You completed the setup. On the Analytics page, Omlet provides some default charts to give you a high-level overview of your design system.

The first chart shows you the overall adoption over time. Since this is your first scan, you'll only see the information for today. It will expand when you upload more scans with CLI. Hop in and explore the analytics page. Other charts here will also give you insights into your design system.

You can also create custom charts to track other sets of components or different metrics. You can click on a chart and modify its filters to create your custom analysis—or use the "Create new analysis" button on the top-right to start from scratch.

Using the buttons on the top-right, you can share the chart with a teammate or save it to your dashboard to quickly access it in the feature.

Omlet lists all the components scanned from your repositories on the "Components" page. When you click on a component, you'll see its "parent" and "child" components from the Dependency Tree. This allows you to see an overview of which components will be affected if you make changes to a specific component.

The "Props" tab gives your team insights to make decisions on what to add, remove, or adjust in your design system. From there, you can click on a prop to drill down its variables and select the "List usages" button. This will show you where and how the variables of that prop are used in your codebase.

Future scans

If you made changes to the repositories you previously scanned or need to add more repositories to your analyses, you can scan them using the analyze command.

npx @omlet/cli analyze

yarn dlx @omlet/cli analyze

pnpm dlx @omlet/cli analyze