init

The init command initializes React Scanner Studio in your project by creating the necessary configuration file and setting up your environment.

Usage

react-scanner-studio init

What It Does

When you run init, the command performs the following steps:

1. Check for react-scanner

The command first checks if react-scanner is installed in your project. If it's not found, you'll be prompted to install it:

⚠ react-scanner is required but not installed.
? Would you like to install it now? (Y/n)

If you choose yes, it will automatically install react-scanner using your project's package manager (yarn or npm).

2. Prompt for Configuration

You'll be asked to provide two configuration values:

crawlFrom

crawlFrom  The directory where react-scanner will start crawling for React components.
This is typically your source folder (e.g., ./src, ./app).

? Enter the path to crawl from: ./src

This specifies where react-scanner should look for React components. Common values include:

• ./src — Standard Create React App structure
• ./app — Next.js app directory
• ./components — If your components are in a dedicated folder
• ./packages — For monorepo setups

importedFrom

importedFrom  The package or path that components are imported from.
This filters which components to track (e.g., @mui/material, @chakra-ui/react, ./components).

? Enter the import source to track: @mui/material

This filters which components to track. Only components imported from this source will be counted. Examples:

Use Case	Value
Material UI	@mui/material
Chakra UI	@chakra-ui/react
Ant Design	antd
Custom components	./components or @myorg/design-system

3. Create Configuration File

A react-scanner.config.js file is created in your project root:

module.exports = {
  crawlFrom: './src',
  includeSubComponents: true,
  importedFrom: '@mui/material',
  processors: [
    ['raw-report', { outputTo: './.react-scanner-studio/scan-report.json' }],
  ],
};

4. Update Ignore Files

The command automatically adds .react-scanner-studio/ to your ignore files to prevent the generated output from being committed to version control:

• .gitignore
• .eslintignore
• .prettierignore

✔ Added .react-scanner-studio/ to: .gitignore, .eslintignore, .prettierignore

If any of these files don't exist, they will be created. If the entry already exists, that file will be skipped.

Example Output

$ npx react-scanner-studio init

╭─────────────────────────────────────────────╮
│                                             │
│   Welcome to React Scanner Studio           │
│   Initializing your project...              │
│                                             │
╰─────────────────────────────────────────────╯

crawlFrom  The directory where react-scanner will start crawling for React components.
This is typically your source folder (e.g., ./src, ./app).

? Enter the path to crawl from: ./src

importedFrom  The package or path that components are imported from.
This filters which components to track (e.g., @mui/material, @chakra-ui/react, ./components).

? Enter the import source to track: @mui/material

✔ Created react-scanner.config.js
✔ Added .react-scanner-studio/ to: .gitignore, .eslintignore, .prettierignore

╭─────────────────────────────────────────────╮
│                                             │
│   Initialization Complete                   │
│   Your project is now configured for        │
│   React Scanner Studio.                     │
│   Run react-scanner-studio start to begin.  │
│                                             │
╰─────────────────────────────────────────────╯

Notes

• If react-scanner.config.js already exists, it will not be overwritten
• The command uses interactive prompts and cannot be run non-interactively
• After initialization, you need to run npx react-scanner to generate the scan data before using start or build

Next Steps

After running init:

1. Run npx react-scanner to scan your codebase
2. Run npx react-scanner-studio start to view the dashboard

See Also

• start — Start the development server
• build — Build static files for deployment
• Configuration — Learn about configuration options