Componly CLI (https://www.componly.co/) is a tool for analyzing design system adoption across your codebase. Use the CLI to scan repositories and Figma files, identifying components and their usage.

With actionable insights and clear reports, Componly empowers teams to reduce design debt, enhance consistency, and drive better design system adoption.

Table of Contents

• Features

• Installation

• Usage

• Advanced Configuration

• Security

• Frequently Asked Questions

• Support

Features

• Scan repositories and Figma files to detect UI components.

• Generate detailed reports for design system adoption metrics.

• Identify legacy and custom components.

• Analyze component props to pinpoint inconsistencies and usage patterns.

• Track adoption trends over time across multiple repositories and projects.

• View JSON output for detailed metadata and integration purposes.

• Identify third-party library components and their usage in MACH architectures.

Grab a Key

To get started, you'll need an access key. Visit (Grab a Key here) to generate your personal access key for using Componly CLI.

Installation

Install the Componly CLI globally on your machine:

npm install @componlyco/cli

PS: For MacOS and some Linux distributions, you might need to use sudo to grant the necessary permissions to install the package globally

sudo npm install @componlyco/cli

Usage

Scanning Repositories

Navigate to the root of your repository and run:

npx componly run

This command generates a JSON report in your repository folder with insights on component usage.

Scanning Figma Files

Authenticate your Figma account and analyze Figma files for design system adoption:

npx componly figma:scan

Follow the prompts to connect your Figma account and specify the files you wish to analyze. A report will be generated based on the selected files.

For further details, visit the Componly Docs.

Advanced Configuration

Security

Componly prioritizes your privacy, we have a No Data Access Policy for Pro & Enterprise Plans. Componly does not access, store, or transmit any client data. Whether it's through the CLI or web app, all operations are executed in the client's controlled environment. For more information, refer to Componly Privacy Policy.

Frequently Asked Questions

How does Componly detect components? Componly uses a proprietary UI component mapping detection system to scan and track components in your codebase, ensuring accurate insights into component usage and dependencies.

How does Componly calculate component usage? Componly identifies unique instances of components, even if used multiple times within the same file.

Does Componly collect my source code? No. Componly processes code locally and only collects reports HTMLs for free plans, and no data at all for paid plans.

Support

• Visit the Componly Docs for troubleshooting.

• Email support: [email protected]

For terms and conditions, refer to Componly Terms of Service.