[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex store components notification in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/updates/release-notes)

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/updates/release-notes)

Notification

The `notification` component displays text content in a bar style (`notification.bar`) or inline (`notification.inline`). This Component can be imported and used by any VTEX app.

![{"base64":"  ","img":{"width":1888,"height":733,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1082858,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-notification-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-notification-0.png)

## Configuration

1. Import the `vtex.store-components` app to your theme's dependencies in the `manifest.json` file as in the following example:

`1

 "dependencies": {

2

 "vtex.store-components": "3.x"

3

 }

`

1. Add the `notification` block to any template of your choice. For example:

`1

 "store.home": {

2

 "blocks": [

3

+ "notification.bar",

4

 "carousel#home",

5

 "shelf#home"

6

 ]

7

 },

`

1. Then, declare the `notification` block using the props stated in the [Props](#props) table.

### Props

| Prop name | Type             | Description                                                                                | Default value |
| --------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| content   | String           | Text to be used in the bar.                                                                                | ''            |
| classes   | CustomCSSClasses | Overrides default CSS handles. To better understand how this prop works, check [this document](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/css-handles%23usecustomclasses). Note that this is only helpful if you're using this block as a React component. | undefined     |

## Customization

To apply CSS customizations in this and other blocks, follow the [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles              |
| ------------------------ |
| notificationBarContainer |
| notificationBarInner     |
| notificationContent      |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/store-components/vtex-store-components-notification.md)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/guides/vtex-store-components-notification%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/guides/vtex-store-components-notification%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/guides/vtex-store-components-notification%23customization)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/store-components/vtex-store-components-notification.md)

Copy page

On this page

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/guides/vtex-store-components-notification%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/guides/vtex-store-components-notification%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-notification/docs/guides/vtex-store-components-notification%23customization)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore getting started 1 setting up your environment in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-overview)

[1\. Setting up your environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment)

[2\. Starting a new FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-2-starting-the-project)

[3\. Running the project locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-3-running-the-project-locally)

[4\. Understanding the project structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-4-understanding-the-project-structure)

[5\. Integrating your project with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms)

[6\. Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-6-next-steps)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-glossary)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-overview)

[1\. Setting up your environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment)

[2\. Starting a new FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-2-starting-the-project)

[3\. Running the project locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-3-running-the-project-locally)

[4\. Understanding the project structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-4-understanding-the-project-structure)

[5\. Integrating your project with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms)

[6\. Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-6-next-steps)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-glossary)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-overview)

Setting up your environment

Prepare your account and local setup to start developing with FastStore.

This is the first step in the FastStore track. In this guide, you’ll prepare your local environment and VTEX account to ensure reliable onboarding, builds, and CMS synchronization.

> Skipping these prerequisites can lead to failed installations, duplicated content during onboarding, or local development errors.

## Step 1\. Installing the VTEX IO CLI

The [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-installation-and-command-reference) is the command-line interface used to manage your VTEX projects. If you haven’t already installed it, follow [this guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-installation-and-command-reference) to install it on your machine.

## Step 2\. Installing Headless CMS and its dependencies

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-overview) is the native VTEX content management solution for FastStore projects. Before proceeding, ensure the following apps are installed in your account to avoid build errors or duplicated content:

* `vtex.admin-cms@1.x`
* `vtex.admin-cms-graphql-rc`

To check whether you have them installed, follow the instructions below:

1. Open the terminal and log in to your account using the following command. Replace `{accountName}` with your VTEX account name.
`1
vtex login {accountName}
`
2. Run `vtex ls` to list all the installed apps in your account.
3. Check if `vtex.admin-cms@1.x` and `vtex.admin-cms-graphql-rc` are in the list. If so, proceed to the [next step](#step-3-installing-headless-cms-plugins). Otherwise, follow these instructions.
4. After logging into your account, install `vtex.admin-cms@1.x` by running the following command:
`1
vtex install vtex.admin-cms@1.x vtex.admin-cms-graphql-rc
`
A success message will confirm the installation:
![{"base64":"  ","img":{"width":2018,"height":486,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":122705,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/cms-install___7144afabf5a895ba92905926808507b2.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/cms-install___7144afabf5a895ba92905926808507b2.png)

## Step 3\. Installing the Headless CMS plugins

To use the Headless CMS through the CLI, install its plugins:

1. Open the terminal and log in to your VTEX account using the VTEX IO CLI. Replace `accountName` with your VTEX account name.
`1
vtex login {accountName}
`
2. Install the Headless CMS plugin:
`1
vtex plugins install cms
`
3. Verify the installation by running the following command:
`1
vtex cms
`

![{"base64":"  ","img":{"width":2142,"height":636,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":123285,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/faststore-vtex-cms___460365970fb39c94e300b9fbd497e17e.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/faststore-vtex-cms___460365970fb39c94e300b9fbd497e17e.png)

> **Windows users:** If you experience installation issues, refer to the [Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/troubleshooting-error-installing-headless-cms) article.
>
> **macOS users:** If you encounter problems, run `yarn config set ignore-engines true` to ignore the Node.js version incompatibility, then run `vtex plugins install cms` again.
>
> We recommend using Node.js version **15.0.0** or higher.

## Step 4\. Enabling the VTEX Intelligent Search app

The [VTEX Intelligent Search](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/vtex-intelligent-search) app enhances the user experience by providing accurate and personalized search results throughout the shopping journey. Before developing a storefront in FastStore, you need to enable the app in your account. For more information about Intelligent Search and its integration, please refer to the [VTEX Intelligent Search](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/vtex-intelligent-search) and [Integration Settings](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/6wKQgKmu2FT6084BJT7z5V) guides.

To enable the app, check which version of the [Edition App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app) is installed in your account.

Based on the edition version, follow the instructions below.

> To confirm which Edition App version is installed in your account, open the terminal and use the VTEX IO CLI. Log in to your account by running `vtex login {accountName}` and run `vtex edition get` to see the Edition App version installed in the current account.

**Accounts using the `vtex.edition-store@5.x`**

If your account is using the `vtex.edition-store@5.x` major version, the VTEX Intelligent Search app is already included, and you must integrate it via VTEX Admin.

To integrate VTEX Intelligent Search, go to the VTEX Admin, access **Store Settings > Intelligent Search > Integrations**, and click `START INTEGRATION`.

**Accounts using an edition version below `5.x`**
1. In the VTEX IO CLI, log in to your VTEX account by running `vtex login {accountName}`. Remember to replace the value between curly brackets with your account name.
2. If the VTEX Intelligent Search app is not installed in your account, run the following command to install it:
`1
vtex install vtex.search-resolver@1.x vtex.admin-search@1.x
`

After successfully installing the app, access VTEX Admin, navigate to **Store Settings > Intelligent Search > Integrations**, and click `START INTEGRATION`.

**Accounts wishing to migrate to the `5.x`**

If you are using a different major version and want to migrate, please [open a ticket with VTEX Support](https://read.calvincode.net/reader?url=https://help.vtex.com/en/support) and request the installation of the Edition Store `vtex.edition-store@5.x`.

## Step 5\. Installing the FastStore WebOps app

The [FastStore WebOps app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project) helps you create, deploy, and manage your FastStore projects. It also provides performance insights and deployment management tools.

> The FastStore WebOps app only works in stores using the [Edition Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app%23list-of-native-edition-apps). If your store uses the Edition Business, also known as using the [Legacy CMS Portal](https://read.calvincode.net/reader?url=https://help.vtex.com/es/tracks/cms--2YcpgIljVaLVQYMzxQbc3z/1oN446gRGcR2s70RvBCAmj) technology, make sure to [open a support ticket](https://read.calvincode.net/reader?url=https://help.vtex.com/en/support) to change it to the Edition Store.

Once you have changed the edition, follow the instructions in this [requirements guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-requirements%23install-the-vtex-io-cli-on-your-machine).

To install the app, follow these steps.

1. In a terminal, log in to your VTEX account by running the following command. Replace `{accountName}` with your store account name, for example, `vtex login store`.
`1
vtex login {accountName}
`
2. Install the FastStore WebOps app by running the following command:
`1
vtex install vtex.webops
`
> The FastStore WebOps app only works in the production environment, so you must install it exclusively in your account's master environment.
3. A confirmation message will appear. Type `y` to proceed.
`1
? Are you sure you want to force this operation on the master workspace on the account store? » (y/N)
`

The FastStore WebOps app is now installed in your account. Refer to the [FastStore WebOps app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project) guide to create your first FastStore project.

## Next step

Now that your environment is ready, learn how to access and use the WebOps app: [2\. Starting a new FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/getting-started/1-setting-up-your-environment.mdx)

[Getting Started« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-overview)[2\. Starting a new FastStore projectNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-2-starting-the-project)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Step 1\. Installing the VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23step-1-installing-the-vtex-io-cli)

[Step 2\. Installing Headless CMS and its dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23step-2-installing-headless-cms-and-its-dependencies)

[Step 3\. Installing the Headless CMS plugins](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23step-3-installing-the-headless-cms-plugins)

[Step 4\. Enabling the VTEX Intelligent Search app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23step-4-enabling-the-vtex-intelligent-search-app)

[Step 5\. Installing the FastStore WebOps app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23step-5-installing-the-faststore-webops-app)

[Next step](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23next-step)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/getting-started/1-setting-up-your-environment.mdx)

Copy page

On this page

ON THIS PAGE

[Step 1\. Installing the VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23step-1-installing-the-vtex-io-cli)

[Step 2\. Installing Headless CMS and its dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23step-2-installing-headless-cms-and-its-dependencies)

[Step 3\. Installing the Headless CMS plugins](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23step-3-installing-the-headless-cms-plugins)

[Step 4\. Enabling the VTEX Intelligent Search app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23step-4-enabling-the-vtex-intelligent-search-app)

[Step 5\. Installing the FastStore WebOps app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23step-5-installing-the-faststore-webops-app)

[Next step](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment/docs/guides/faststore/getting-started-1-setting-up-your-environment%23next-step)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore molecules search auto complete in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-overview)

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-tooltip)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-overview)

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-tooltip)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/components-index)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-overview)

SearchAutoComplete

List of auto completing suggestions based on searched term.

[ Source code](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/components/src/molecules/SearchAutoComplete)

List of auto completing suggestions based on searched term. This component is part of the [Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/feature-search) feature.

Example

Code

Searching for: `Appl`

1. [appl**e airpods**](#)
2. [appl**e tv**](#)

## Usage

### Import the component

`1

import { SearchAutoComplete, SearchAutoCompleteTerm } from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";

`

For details, see [Importing FastStore UI component styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles).

---

## Examples

## Other Icons

Example

Code

Searching for: `So`

1. [so**ny headphone**](#)
2. [so**und speaker**](#)

---

## Design tokens

| Local token                                    | Default value/Global token linked            |
| ---------------------------------------------- | -------------------------------------------- |
| \--fs-search-auto-complete-padding-top         | var(--fs-spacing-2)                          |
| \--fs-search-auto-complete-padding-right       | var(--fs-spacing-3)                          |
| \--fs-search-auto-complete-padding-bottom      | var(--fs-search-auto-complete-padding-top)   |
| \--fs-search-auto-complete-padding-left        | var(--fs-search-auto-complete-padding-right) |
| \--fs-search-auto-complete-transition-property | var(--fs-transition-property)                |
| \--fs-search-auto-complete-transition-function | var(--fs-transition-function)                |
| \--fs-search-auto-complete-transition-timing   | var(--fs-transition-timing)                  |

### Design tokens: Item

| Local token                                     | Default value/Global token linked  |
| ----------------------------------------------- | ---------------------------------- |
| \--fs-search-auto-complete-item-column-gap      | var(--fs-spacing-1)                |
| \--fs-search-auto-complete-item-text-size       | var(--fs-text-size-2)              |
| \--fs-search-auto-complete-item-line-height     | 1.25                               |
| \--fs-search-auto-complete-item-bkg-color-hover | var(--fs-color-tertiary-bkg-hover) |

### Design tokens: Icon

| Local token                                | Default value/Global token linked |
| ------------------------------------------ | --------------------------------- |
| \--fs-search-auto-complete-item-icon-color | var(--fs-color-neutral-4)         |
| \--fs-search-auto-complete-item-icon-size  | 1.125rem                          |

---

## Data attributes

You can target and override `SearchAutoComplete` styles using the following data attributes:

`data-fs-search-auto-complete`

`data-fs-search-auto-complete-item`

`data-fs-search-auto-complete-item-link`

`data-fs-search-auto-complete-item-icon`

---

## Props

### SearchAutoComplete

| Name       | Type   | Description                                                                            | Default                 |
| ---------- | ------ | -------------------------------------------------------------------------------------- | ----------------------- |
| **testId** | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-search-auto-complete |

### SearchAutoCompleteTerm

| Name             | Type                                | Description                                                                            | Default                      |    |                          |                             |                     |             |                                                     |                                                        |
| ---------------- | ----------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------- | -- | ------------------------ | --------------------------- | ------------------- | ----------- | --------------------------------------------------- | ------------------------------------------------------ |
| **testId**       | string                              | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-search-auto-complete-term |    |                          |                             |                     |             |                                                     |                                                        |
| **linkProps**    | Partial<LinkProps<LinkElementType>> | Props for the link from term component.                                                |                              |    |                          |                             |                     |             |                                                     |                                                        |
| **icon**         | string \| number                    | false                                                                                | true                         | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A React component that will be rendered as an icon. | <Icon name="MagnifyingGlass" width={18} height={18} /> |
| **term\***       | string                              | Term researched.                                                                       |                              |    |                          |                             |                     |             |                                                     |                                                        |
| **suggestion\*** | string                              | Suggestion proposed with auto complete.                                                |                              |    |                          |                             |                     |             |                                                     |                                                        |

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62757720%3Fv%3D4%26w=64%26q=75)](https://github.com/aliceoq)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/molecules/search-auto-complete.mdx)

[RegionBar« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-region-bar)[SearchDropdownNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-dropdown)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62757720%3Fv%3D4%26w=64%26q=75)](https://github.com/aliceoq)

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23import-styles)

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23examples)

[Other Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23other-icons)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23design-tokens)

[Design tokens: Item](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23design-tokens-item)[Design tokens: Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23design-tokens-icon)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23props)

[SearchAutoComplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23searchautocomplete)[SearchAutoCompleteTerm](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23searchautocompleteterm)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/molecules/search-auto-complete.mdx)

Copy page

On this page

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23import-styles)

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23examples)

[Other Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23other-icons)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23design-tokens)

[Design tokens: Item](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23design-tokens-item)[Design tokens: Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23design-tokens-icon)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23props)

[SearchAutoComplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23searchautocomplete)[SearchAutoCompleteTerm](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-search-auto-complete/docs/guides/faststore/molecules-search-auto-complete%23searchautocompleteterm)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)