React Explorer

Scans your workspace and organizes React components by dependency level using an Atomic Design-inspired model.

• 🌿 Atoms — components with no internal project dependencies
• 🧩 Molecules — components that use at least one atom
• 🧱 Organisms — components that use at least one molecule
• 🚀 Complex Organisms — components that use at least one organism

Features

• Classify React components automatically
• Show results in a dedicated Explorer tree view
• Support JSX and modern React syntax
• Make component dependencies easier to understand
• Tag unused components (components not referenced by other components are marked (unused) in the tree view)- Filter components by name in the tree view

Usage

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
2. Run React Explorer: Generate.
3. Open the React Explorer view in Explorer.
4. Use React Explorer: Filter from the Command Palette or the tree title buttons to narrow the view.
5. Use React Explorer: Clear filter to restore the full tree.
6. Expand levels and click a component to open the source file.

Demo

Feedback

If you have suggestions or encounter issues, please open an issue in the repository.

License

MIT