A command-line tool that scans Vue.js and React codebases to locate specific component types (forms, buttons, dialogs, and custom components). The tool helps development teams audit their frontend applications by identifying where components are used and providing usage statistics.
- Multi-framework support: Scans both Vue.js (.vue) and React (.jsx, .tsx) files
- Design library recognition: Identifies components from popular libraries (Quasar, Material UI)
- Flexible filtering: Exclude test files and node_modules, or specify directories to scan
- Fast scanning: Concurrent file processing for efficient codebase analysis
- Go 1.25.0 or higher
- Clone the repository:
git clone <repository-url>
cd ui-elf- Build the binary:
go build -o ui-elf cmd/ui-elf/main.go- (Optional) Install globally:
go install cmd/ui-elf/main.goOr move the binary to your PATH:
sudo mv ui-elf /usr/local/bin/ui-elf --component-type <type> --directory <path> [options]| Flag | Short | Description | Required | Default |
|---|---|---|---|---|
--component-type |
-t |
Component type to search for: form, button, dialog, or custom |
Yes | - |
--directory |
-d |
Directory to scan | No | . (current directory) |
--filter |
-f |
Comma-separated list of directories to include | No | All directories |
--output |
-o |
Output format: terminal, json, or both |
No | terminal |
- Native HTML:
<form> - Quasar:
<q-form> - Material UI:
<Form>,<MuiForm>,<v-form>
- Native HTML:
<button> - Quasar:
<q-btn> - Material UI:
<Button>,<MuiButton>,<v-btn>
- Native HTML:
<dialog> - Quasar:
<q-dialog> - Material UI:
<Dialog>,<MuiDialog>,<v-dialog>
When using --component-type custom, the tool will identify all custom component usage in your codebase.
The tool automatically excludes:
node_modulesdirectory- Test files (files/directories containing:
test,tests,__tests__,.test.,.spec.)
Use the --filter flag to scan only specific directories:
ui-elf -t form -d . -f src/components,src/viewsMIT License, see LICENSE for details.