Search and filter components

Learn how to search and filter the components.

If you are searching for a specific component or set of components, you can use the search bar and/or filter the component list using the "Filter by" properties.

Filter components by component properties

Omlet CLI collects some component properties by default while scanning your codebase to help you filter and tag components easily. Here are the details of the built-in property filters.

Tag

Filters components that have the specified tags. Selecting multiple tags in the filter will return a list of components where each component has all of the selected tags.

To learn how to tag components, check out: Component tags

Name

Filters components by their name using operations such as contains, does not contain, or starts with. For more complex comparisons, you can also use regular expressions (regex).

Path

Filters components by specified paths. From the directory list ("Select folders" option), you can select multiple folders.

Alternatively, you can also switch to "Enter manually" to select components based on a file path you manually enter.

Project properties

The "Project it's from" filter lists components that are from the specified projects. The "Project it's used in" filter lists components that are used in the specified projects.

# used

Filters components based on how many times they are used across all your projects. You can use greater than, equals, and less than operations.

Project filters has no affect on the value of the "# of used" property. No matter which other filters you apply, the "# of used" property will be based on all the projects in the codebase.

# of children

Filters components based on how many child components they have. You can use greater than, equals, and less than operations.

Date properties

The "Created date" and "Updated date" filters list components created or updated after the specified date based on information the CLI collects from repositories Git history.

The "Last usage change date" filters the components based on the date where the component's usage has changed. Let's say, you just started using the Button component in the Card component, the Button components "Last usage change date" will be updated to today.

Create tags from filters

Once you're happy with a filtered view, you can tag all the components in the filtered list using the "Create new tag" button. Then, you can use this tag in your custom charts to analyze the usage of these components. Learn more: Component tags

Filter components by custom properties

In addition to Omlet’s built-in properties, you can assign custom properties to your components using Omlet’s CLI hooks. These custom properties can then be used to filter and tag components—giving you more control over how to analyze your design system.

For example, you can add properties such as:

• Is visual component?: Wether the component is a visual component or not

• Owner: The code owner information in the CODEOWNERS file or any custom source.

• Has stories: True or false depending on whether Storybook stories exist for a given component

• Has tests: True or false depending on test specs that exist for a given component

• Number of props: The number of props a component has

See our docs to learn more about CLI hooks and how to add custom properties: Custom component properties

Custom properties are available only on the Advanced plan, check out Pricing & plans for more details.

Sort the component list

You can sort the components list by clicking on the "Created", "Updated", or "# Used" headers on the top right.