Search and filter components
Learn how to search and filter the components.
Last updated
Learn how to search and filter the components.
Last updated
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.
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.
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
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).
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.
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.
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.
Filters components based on how many child components they have. You can use greater than, equals, and less than operations.
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.
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
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.
You can sort the components list by clicking on the "Created", "Updated", or "# Used" headers on the top right.
