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 notOwner
: 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 componentHas tests
: True or false depending on test specs that exist for a given componentNumber 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.
Last updated