# Search and filter 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.

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2Fd7HXvIvU7AZsLZC6OWrP%2FScreenshot%202024-07-23%20at%2012.22.44%E2%80%AFAM.png?alt=media&#x26;token=9d084ff9-e386-4c41-b4b1-99d804ea2083" alt=""><figcaption></figcaption></figure>

## 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**&#x20;

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.

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FqFSWKAjJQMoP9kOd82Zn%2FScreenshot%202024-07-23%20at%2012.25.05%E2%80%AFAM.png?alt=media&#x26;token=c691ca29-8fdd-40af-931a-03f183a0c8fb" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
To learn how to tag components, check out: [use-tags-for-custom-analyses](https://docs.omlet.dev/cli-and-dashboard/components/use-tags-for-custom-analyses "mention")
{% endhint %}

### **Name**&#x20;

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).

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FkVoaL09jhKENhpbEoQAk%2FScreenshot%202024-07-23%20at%2012.27.52%E2%80%AFAM.png?alt=media&#x26;token=2304ab01-7c14-49b3-b3bc-07c16053eda5" alt="" width="563"><figcaption></figcaption></figure>

### **Path**

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

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FSBTwYAWdQcyOKvr8uPyd%2FScreenshot%202024-07-23%20at%2012.32.05%E2%80%AFAM.png?alt=media&#x26;token=00817ac1-9575-4064-9631-e705678387be" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2F4HiFDIMoKxlw815XoUxF%2FFilter%20by%20path.png?alt=media&#x26;token=15875ba6-4bab-47a4-8145-35022642a784" alt="" width="563"><figcaption></figcaption></figure>

### **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.&#x20;

### **# 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.

{% hint style="info" %}
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.
{% endhint %}

### **# 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.&#x20;

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: [use-tags-for-custom-analyses](https://docs.omlet.dev/cli-and-dashboard/components/use-tags-for-custom-analyses "mention")

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2Fch9XODaQ0ppnGtBEZi1u%2FCreate%20tag.png?alt=media&#x26;token=a643d2a4-e4aa-4038-b6ce-3747158113e2" alt=""><figcaption></figcaption></figure>

## 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](https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/custom-component-properties). These custom properties can then be used to filter and tag components—giving you more control over how to analyze your design system.

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FmM4hSw3LJZhMqu8nfpqO%2FFilter%20and%20tag%20by%20custom%20property.png?alt=media&#x26;token=525d59ad-34ff-456a-8427-ce7cd45f16ff" alt=""><figcaption></figcaption></figure>

For example, you can add properties such as:&#x20;

* `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](https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/custom-component-properties "mention")

{% hint style="info" %}
Custom properties are available only on the Advanced plan, check out [pricing](https://docs.omlet.dev/help/pricing "mention") for more details.
{% endhint %}

## Sort the component list

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

<figure><img src="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FwlHGvmPJ7mxN8LQFS0TB%2Fsort-components.png?alt=media&#x26;token=c933145e-1741-49bc-9f46-c911b6814992" alt=""><figcaption></figcaption></figure>
