Overview
Design system adoption is a centralized adoption dashboard for your design system that helps design system managers understand design system adoption with a clear, data-driven view of how their components are used in production code.
This dashboard aims to address the difficulties of determining actual adoption in production code. Without this knowledge, teams cannot confidently prove the value of their design system, and decisions about deprecation, promotion, or API changes are made without sufficient data to back them up.
On the adoption dashboard you’ll be able to see:
- Which components are used (and which are not)
- How components are used at the prop level
- Where they are used in the codebase
- How adoption evolves over time via snapshot comparisons
How it works
The adoption analytics are powered by data from the Supernova CLI analyzer. When you run the analyzer on your codebase, it scans for your design system components and captures a snapshot of how they are implemented.
You can then see which components are actively used in production, which ones are not used at all, and how frequently different components appear across your code.
Because the analyzer runs locally, you can review and control what gets pushed to Supernova.
Get started
Set up the Supernova CLI to start tracking design system adoption across your repositories. It is recommended to keep the data fresh by running the analyzer regularly to build historical insight.
1. Install the Supernova CLI
Use the following command to install the npm package:
npm install -g @supernovaio/cli
2. Run the code analyze command
Run the command:
supernova code analyze
The CLI will guide you through the analysis and push the snapshot to your dashboard.
For more extensive documentation on working with the Supernova CLI,
please see our Developer documentation.