Get started

Step-by-step tutorial to help you get started with Omlet.

Omlet comes in two parts:

• CLI: Scans your codebase and generates analytics data.

• App: Helps you visualize the data from Omlet CLI so you can explore your components and their usage.

Step 1 — 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.

No access to the codebase?

You can invite a developer to scan the repositories. While waiting for a scan, explore the app using our demo workspace.

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

npm

npx @omlet/cli init

yarn

yarn dlx @omlet/cli init

pnpm

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.

Step 2 — 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.

Step 3 — 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 .

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.

Step 4 — 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.

npm

npx @omlet/cli analyze

yarn

yarn dlx @omlet/cli analyze

pnpm

pnpm dlx @omlet/cli analyze

Next steps

Yay! Have a better idea of Omlet? Here are the other resources that you can follow to deep-dive into:

Analytics

Learn more about the Popular Charts, create your own dashboard and use tags for custom analysis.

Components

Get insights into individual components, understand the dependency tree and component props tracking.

Learn Omlet CLI

Scan more repositories, configure CLI to your specific needs and ensure you have accurate component data.