Popular Charts

Learn the default charts provided by Omlet.

Omlet provides these charts to give you a high-level overview of your design system. Most charts here utilize the design system tag you defined earlier.

Chart titles will differ based on the name you use for your design system tag. Let's say you defined it as "Core" on the onboarding; you'll see titles such as "Core Adoption Over Time".

Design System Adoption Over Time

Displays the overall adoption of your design system component over time. If you scanned your codebase for the first time, you'll only see the information for today. It will expand when you upload more scans with CLI.

By default, Omlet compares the changes with non-design system components. If you defined other tags, such as v1 and v2, you can see the adoption based on a specific tag using the dropdown at the top.

Non-Design System components?

Refers to components that aren't tagged as Design System. The components from 3rd-party libraries, such as @mui and @react-router-dom are excluded.

How Is Our Design System Used Overall?

Omlet provides two charts to track the design system adoption across projects and its trend over time—which is crucial to ensuring consistency and efficiency.

• Design System vs. Non-Design System Adoption by Project: Use this chart as a starting point to understand why one project is adopting more than others.

• Design System Component Usage Over Time: This gives you the change in total usage over time—an overview of the progress and regressions made.

How Can I Increase Design System Adoption?

It's important to identify the custom components used in production so that you can make data-driven decisions about the future of your design system.

• Most Used Non-Design System Components: Helps you make decisions about which components to update, deprecate, or adopt into your design system components.

• Recently Created Components: With this chart, you can catch the unnecessary components early and identify potential improvements to ensure consistency.

How Can I Simplify the Code Library?

Keeping your design system library simplified is important to increase adoption, improve maintainability, and facilitate collaboration.

• Unused Component Props: Lists the unused component props that can be removed to simplify code and reduce maintenance overhead.

• Least Used Components: Helps you identify the unnecessary components to optimize your design system and make decisions around which components should be deprecated.