Omlet Docs
BlogChangelogAsk the CommunityContact Sales
  • Get started
    • What is Omlet?
    • CLI & Dashboard
  • Omlet for VS Code
  • CLI & Dashboard
    • CLI
      • Your first scan
      • Set up your dashbard
      • Future scans
      • Ensure data accuracy
      • Config file
        • Exports configuration
        • Mapping aliases
        • Excluding certain components & files
        • Tutorial: Config file
      • Custom component properties
        • CLI hooks
        • Tutorial 1: Team/code owner usage
        • Tutorial 2: Package version tracking
        • Other example scripts
      • Set up regular scans
      • CLI commands
        • init
        • analyze
        • login
    • Analytics
      • Popular charts
      • Create custom charts
      • Save charts to dashboard
      • Share charts and dashboards with your team
      • Download chart data
    • Components
      • Search and filter components
      • Component tags
      • Dependency Tree
      • Props tracking
    • Workspace & Account
      • Invite team members
      • Renaming projects
      • Update your email address
      • Access your billing details & invoices
  • Security
    • Security in Omlet
    • Data collection
  • Help
    • Pricing
    • FAQs
      • How detection works?
      • Monorepo support
      • How to delete scans?
      • Omlet vs. React Scanner
      • Working with multiple workspaces
    • Troubleshooting
      • Debugging CLI issues
      • Some components aren't detected
      • API failed or timeout
      • Are you behind a proxy?
      • Troubleshooting Git errors
Powered by GitBook
On this page
  • Parent vs. Child components
  • Highlight the parent/child relationships
  • Filter components in the dependency tree
  1. CLI & Dashboard
  2. Components

Dependency Tree

Learn the Dependency Tree and how it can help improve your design system.

PreviousComponent tagsNextProps tracking

Last updated 1 year ago

Dependency Tree helps you see and track the relationship between components. It allows you to make development decisions confidently, such as which components will be affected if you change a specific component.

Parent vs. Child components

Omlet displays where a component is used and which components it contains, in other words, its "parent" and "child" components.

The parent components are displayed on the left side of the canvas, while the child components are on the right. For instance, in the below example, the Toolbar uses the Button component, and the Dialog component uses the Toolbar.

Highlight the parent/child relationships

To highlight the relationship, you can pan around in the canvas and hover over a parent or child component.

Filter components in the dependency tree

You can also have a focused view by filtering the dependency tree for a parent or child component. To do this, head to the components table on the right and select one of the components. You can use the filter options to locate a specific component you're looking for.