[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 io documentation developing an app 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-io-documentation-developing-an-app/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/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-io-documentation-developing-an-app/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/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-io-documentation-developing-an-app/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/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-io-documentation-developing-an-app/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-app-store)

[Becoming a registered VTEX App Store developer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer)

[Developing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app)

[Setting your app's billing model](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-setting-your-apps-billing-model)

[Preparing your app for distribution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-preparing-your-app-distribution)

[Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

[Using the Docs builder to publish app documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/using-the-docs-builder-to-publish-app-documentation)

[App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-app-store)

[Becoming a registered VTEX App Store developer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer)

[Developing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app)

[Setting your app's billing model](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-setting-your-apps-billing-model)

[Preparing your app for distribution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-preparing-your-app-distribution)

[Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

[Using the Docs builder to publish app documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/using-the-docs-builder-to-publish-app-documentation)

[App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/app-development)

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-app-store)

[Developing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app)

Developing an app

In this guide, you will learn how to develop an app using the VTEX IO platform. You will be presented with some core concepts of the platform and guided through the necessary steps to have a running application in VTEX IO.

[VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) is a cloud-native development platform that allows you to develop web storefronts, custom admin apps, and backend integrations for VTEX.

## Before you begin

Make sure to install the [VTEX IO CLI (Command Line Interface) in your machine](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install).

Any development in VTEX IO begins and ends with our CLI (Command Line Interface). VTEX IO's CLI allows you to perform any action necessary to your app development process, such as linking local files to the VTEX platform, managing workspaces, and releasing new app versions.

## Instructions

### Step 1 - Creating an app

When developing an app in VTEX IO, you can start one from scratch or use one of our boilerplates. Our boilerplates contain implementation examples and all the initial settings needed for you to start developing an app. Take a look at the available boilerplates:

| Boilerplate name         | Description                                                                                |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| graphql-example          | Implements a [VTEX IO service with GraphQL resolvers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-service-configuration-apps%23if-you-are-developing-a-graphql-app).                                        |
| payment-provider-example | Implements a [Payment-Provider protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/payments-integration-payment-provider-protocol)                                                                                |
| admin-example            | Implements an admin app that adds a menu button to the admin sidebar and navigation via parameter example.                                                                                |
| store                    | Implements the basic structure of a VTEX Store Framework storefront.                                                                                |
| service-example          | Implements a [VTEX IO service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-service-configuration-apps) with HTTP route handlers.                                                                          |
| render-guide             | Guide repository for an app with all common patterns in app development, such as pagination and editing entities.                                                                                |
| edition app              | Creates an an [Edition app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app).                                                                                |
| react-guide              | Creates a frontend app with React. See… [react app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io).                                                               |
| checkout-ui-settings     | Guide repository for the Checkout UI Settings app, responsible for A/B testing in your store's scripts, in addition to the possibility of quick rollbacks for old scripts, i.e., scripts of older Checkout UI Settings app's versions. |
| service-worker-example   | Guide repository for apps that enable service-worker builder to expose Service Worker.                                                                                |
| admin-ui-example         | Guide repository for Admin apps for the admin v4 with the admin-ui design system.                                                                                |

#### Cloning the boilerplate repository to your local files

1. Open the terminal and clone the boilerplate you desire by running the following command:
`1
vtex init
`
2. Select the boilerplate that you want.
![{"base64":"  ","img":{"width":797,"height":523,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":56973,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-an-app-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-an-app-0.png)
3. A new folder will be created in your machine, and to access it run `cd {folder-name}` in your terminal.
> Change the name in the curly brackets to the boilerplate that you choose, for example `cd graphql-example`

#### Editing the manifest.json file

Once you have [cloned the boilerplate repository](#cloning-the-boilerplate-repository-to-your-local-files) into your local files, let's learn how to make it your own by editing the **`manifest.json`** file.

> The `manifest.json` file saves essential information about a VTEX IO app, such as its name, version, vendor, description, dependencies, etc. It is the core communication of your app with the VTEX IO platform. For more information, see the [Manifest article](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest).

1. Open the boilerplate project you started in [the previous step](#cloning-the-boilerplate-repository-to-your-local-files) in any code editor of your choice.
2. Open the `manifest.json` file and look at the primary information that it provides, such as in the [Manifest article](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest).
3. Change the following fields according to your scenario:
   * Replace the value of the `name` field with the name of your app.
   * Replace the value of the `vendor` field with the VTEX account you are using for development. This should be the name of the VTEX account resposible for the app development, maintenance, and distribution.
   * Replace the value of the `version` field with the app version, according to the [Semantic Versioning 2.0.0](https://read.calvincode.net/reader?url=https://semver.org/).
   * Replace the value of the `title` field with the app distribution name. This name will be displayed on the Apps section in the admin and on the VTEX App Store.
   * Replace the value of the `description` field with a brief description of the app's functionality.
4. Go to the **`builders`** prop and add the ones that make sense for your app project.
> A Builder defines the nature of an app. If you are developing a frontend app, you'll probably want to use the `react` builder. Instead, if you're developing a backend integration, you'll probably want to use the `node` or `dotnet` builder. In summary, a builder is responsible for processing, validating, and forwarding a given block of code to a runtime or a framework capable of executing it. Notice that an app can have as many builders as you want. That allows bundling front and backend development and delivering your solution with just one package. Please refer to the [Builders article](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders) for more information.
5. Install the [dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-dependencies) and [peer dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-peerdependencies) necessary for your app to properly work by relying on VTEX IO apps and other apps, respectively.
6. Save your changes.

So far, you have created an app and made it your own. Now, it is time to start making changes to your code and use a development server to see your changes live.

### Step 2 - Starting the app development

In this step, you will create a development workspace to perform the necessary changes in your app without worrying about the app's live version and see your changes in real-time by sending the app’s changes to our cloud platform.

#### Logging in to your VTEX account

This step will guarantee that your VTEX account is in sync with the VTEX IO development platform and allow you to manage the development and publishing of the app.

1. Once installed the [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install), log in to your VTEX account with the following command:
`1
vtex login {accountName}
`
> Replace `{accountName}` with the name of your VTEX account.
2. A browser window will open and ask for your credentials.
3. Once logged in, run the `vtex whoami` command to show which account and workspace the VTEX IO CLI is using.
![{"base64":"  ","img":{"width":796,"height":449,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":62775,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-an-app-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-an-app-1.png)

#### Creating a development workspace

When using VTEX IO, any development must happen in a [workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace).

> **Workspaces** are environments isolated from one another. They can be understood as different versions of the same VTEX account. In practice, changes performed in a particular workspace do not affect your app’s live version or other developers' work. Refer to the [Workspace article](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace) for more information.

To start developing, you have to create a [Development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace) in your VTEX account. When you log in, you automatically use the Master workspace, which means you are in the version available to the end-user.

1. Run the `vtex use` command in your terminal as shown below:
`1
vtex use {exampleName}
`
This changes your VTEX account to a Developer workspace called `exampleName` (  replace it with the name of your choice), creating it from scratch if it does not already exist.
![{"base64":"  ","img":{"width":3184,"height":756,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":148140,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-an-app-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-an-app-2.png)
2. Type `Y`, and a Development workspace will be created under your chosen name.

So far, you have created an app and have a Development workspace to perform any changes in your code. In the following section, you will learn how to sync the changes performed in your app to our cloud development environment by linking the app.

#### Starting a development server

Now that you have your app up and running on your machine, it is time to send all the changes you have performed locally so far to the cloud and reflect them in the workspace in which you are working. In other words, you will be able to see your changes in real-time by accessing the account you are logged in using the workspace you are using to develop.

1. Run `vtex whoami` in your terminal and make sure you are logged into the desired account using the development workspace you have created.
2. In the terminal, access the app's directory in your local files.
3. Once in the accurate directory, type the following command in the terminal:
`1
vtex link
`

After that, every change can be seen in your browser in real-time, and you can access it by running `vtex browse` in your terminal.

## Next steps

Now that you have created your app and it is already live in your development workspace, here are some options of what you can do next:

* [Manage application logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-application-logs): keep track of errors, warnings, and informative events with VTEX IO logging service.
* [Run A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing): Optimize your store's conversion rates by running A/B tests.
* [Release a new app version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-releasing-a-new-app-version): Release a new app version If you’re sure about all the code changes that you’ve done to your app in a development workspace.
* [Create a Production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-production-workspace): Create a Production workspace to test in a user traffic environment the changes you performed in a development workspace Once you are sure of your changes performed in the Development workspace with traffic.
* [Promote a workspace to Master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-promoting-a-workspace-to-master): Promoting a workspace to Master marks the final step to make an app publicly available to end-users.

### Developing for the VTEX App Store

If you are developing an app that will be distributed to the [VTEX App Store](https://read.calvincode.net/reader?url=https://apps.vtex.com/) make sure to check the following guidelines:

* [Engineering Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-engineering-guidelines) \- The Engineering guidelines are your go-to guides to learn the coding standards to develop an app using the VTEX IO infrastructure, such as scalability, performance, security and data privacy.
* [User experience guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-design-guidelines) \- Learn how you can design an app to meet the VTEX App Store requirements.
* Business Guidelines - The Business Guidelines are divided in two:
   * [App monetization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-app-monetization): Learn the types of business models for your app.
   * [Marketing assets](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets): Learn how to prepare the assets to market the app in the VTEX App Store.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/_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/App-Guides/vtex-app-store/vtex-io-documentation-developing-an-app.md)

[Becoming a registered VTEX App Store developer« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app//docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer)[Setting your app's billing modelNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app//docs/guides/vtex-io-documentation-setting-your-apps-billing-model)

See also

[ManifestApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-manifest)[WorkspaceApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-workspace)[Getting startedApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-getting-started)[DependenciesApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-dependencies)[BuildersApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-builders)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23instructions)

[Step 1 - Creating an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23step-1-creating-an-app)[Step 2 - Starting the app development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23step-2-starting-the-app-development)

[Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23next-steps)

[Developing for the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23developing-for-the-vtex-app-store)

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/App-Guides/vtex-app-store/vtex-io-documentation-developing-an-app.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23instructions)

[Step 1 - Creating an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23step-1-creating-an-app)[Step 2 - Starting the app development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23step-2-starting-the-app-development)

[Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23next-steps)

[Developing for the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app/docs/guides/vtex-io-documentation-developing-an-app%23developing-for-the-vtex-app-store)

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 building sections experimental exports hooks and components 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/building-sections-experimental-exports-hooks-and-components/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/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/building-sections-experimental-exports-hooks-and-components/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/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/building-sections-experimental-exports-hooks-and-components/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/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/building-sections-experimental-exports-hooks-and-components/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/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/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/overrides-overview)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/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/building-sections-experimental-exports-hooks-and-components/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/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/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/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/overrides-overview)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/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/building-sections-experimental-exports-hooks-and-components/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/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-overview)

Experimental exports - Hooks and Components

FastStore provides [hooks](#list-of-hooks-and-components) and components to extend native features within your [custom sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) and [overridden components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-overview).

For example, you can create a custom [BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-buy-button) that adds products to the cart and displays a personalized message based on user preferences or order history.

## Before you begin

All experimental [hooks and components](#list-of-hooks-and-components) are suffixed with `_unstable`, indicating they are available for use but may not function as expected or could have limitations with certain store customizations. Before deploying them in a production environment, make sure to test them to confirm compatibility with your store.

## Instructions

1. Open your store project in a code editor, then open the component or section file where you want to import the hook or component.
2. Import the hook or component into your custom component file.
`1
import { use{ComponentName}_unstable as use{ComponentName} } from '@faststore/core/experimental'
`
> Replace `{ComponentName}` with the name of the component you want to import, for example `useCartToggleButton`.
3. Incorporate the imported hook or component into your custom component logic. In the following example, the `useCartToggleButton_unstable` hook enables toggling the cart.
`1
import React from "react";
2
import { Button as UIButton } from "@faststore/ui";
3
import { useCartToggleButton_unstable as useCartToggleButton } from "@faststore/core/experimental";
4

5
export default function CustomBuyButton() {
6
 const { onClick: toggleCart } = useCartToggleButton();
7
 return (
8
 <UIButton
9
 variant="primary"
10
 onClick={() => {
11
 toggleCart();
12
 }}
13
 >
14
 New Buy Button
15
 </UIButton>
16
 );
17
}
`
4. Save your changes.
5. Open a terminal and run `yarn dev` to test the implementation.

## List of hooks and components

Explore the features of the experimental hooks and the `Image_unstable` component.

* [Hooks](#hooks)
* [Image\_unstable](#image%5Funstable-component)

### Hooks

Hooks provide features or statuses of native components that you can integrate into your custom components. Here's a list of available hooks:

#### Authentication

| Hook              | Description                                 |
| ----------------- | ------------------------------------------- |
| useAuth\_unstable | Accesses authentication status and actions. |

#### Cart

| Hook                          | Description                                                                                |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| cartStore\_unstable           | Stores and retrieves cart details.                                                                                |
| useCart\_unstable             | Accesses the current cart's status and actions.                                                                           |
| useBuyButton\_unstable        | Leverages the behavior of the native [BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-buy-button). |
| useCartToggleButton\_unstable | Adds a cart toggle feature to custom components.                                                                          |
| useCheckoutButton\_unstable   | Leverages the behavior of the native checkout button.                                                                     |
| useRemoveButton\_unstable     | Leverages the behavior of the native remove button.                                                                       |

#### Delivery Promise

| Hook                           | Description                                                                                |
| ------------------------------ | -------------------------------------------------------------------------------------------------------- |
| deliveryPromiseStore\_unstable | Stores and retrieves Delivery Promise data (pickup points, default/global selection, simulation state).  |
| useDeliveryPromise\_unstable   | Accesses and manages Delivery Promise state, pickup points, delivery-related facets, labels, and badges. |

#### GraphQL

| Hook                   | Description                                       |
| ---------------------- | ------------------------------------------------- |
| useLazyQuery\_unstable | Retrieves data from a GraphQL endpoint on demand. |
| useQuery\_unstable     | Retrieves data from a GraphQL endpoint.           |

#### Newsletter

| Hook                    | Description                                   |
| ----------------------- | --------------------------------------------- |
| useNewsletter\_unstable | Accesses the newsletter subscription feature. |

#### Product

| Hook                              | Description                                                          |
| --------------------------------- | -------------------------------------------------------------------- |
| useDiscountPercent\_unstable      | Calculates the discount percentage for a given price.                |
| useFormattedPrice\_unstable       | Formats a price value based on the current locale.                   |
| useLocalizedVariables\_unstable   | Provides localized variables for use in components.                  |
| useCreateUseGalleryPage\_unstable | Handles the creation of a gallery page.                              |
| useGalleryPage\_unstable          | Manages the state and functionality of a gallery page.               |
| UseGalleryPageContext\_unstable   | Provides access to and management of the context for a gallery page. |
| useProductGalleryQuery\_unstable  | Retrieves product gallery images.                                    |
| useProductLink\_unstable          | Generates a product link based on the product ID.                    |
| useProductQuery\_unstable         | Retrieves product details.                                           |
| useProductsPrefetch\_unstable     | Preloads product details for a given list of product IDs.            |

#### Search

| Hook                           | Description                                            |
| ------------------------------ | ------------------------------------------------------ |
| useDelayedFacets\_unstable     | Delays facet application to improve performance.       |
| useDelayedPagination\_unstable | Delays pagination to improve performance.              |
| useFilter\_unstable            | Enables filtering for product listings.                |
| useSearchHistory\_unstable     | Accesses the user's search history.                    |
| useSuggestions\_unstable       | Provides suggestions based on the user's search query. |
| useTopSearch\_unstable         | Retrieves the top search results.                      |

#### Session

| Hook                      | Description                                       |
| ------------------------- | ------------------------------------------------- |
| sessionStore\_unstable    | Stores and retrieves session data.                |
| useSession\_unstable      | Accesses and manages current session information. |
| validateSession\_unstable | Validates the current user session.               |

#### Shipping

| Hook                            | Description                                                                                |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| getShippingSimulation\_unstable | Retrieves the shipping simulation data, which can be used to display shipping costs, options, and delivery estimates. |
| useShippingSimulation\_unstable | Runs and manages shipping simulations to display costs, options, and delivery estimates.                              |

#### UI

| Hook                      | Description                                                 |
| ------------------------- | ----------------------------------------------------------- |
| useScreenResize\_unstable | Adapts the interface to different screen sizes and devices. |

### `Image_unstable` component

Use the [Image\_unstable](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/blob/105a8b2f69ffd8438532d7c9eb959ed26a567675/packages/core/src/components/ui/Image/Image.tsx) component to optimize image performance in your storefront. This component uses [Thumbor](https://read.calvincode.net/reader?url=https://www.thumbor.org/) for image resizing, cropping, and caching the results on a Content Delivery Network (CDN). Use it whenever you need to [create a new section for the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section).

`1

import { HeroImage as UIHeroImage } from "@faststore/ui";

2

import { Image_unstable as Image } from "@faststore/core/experimental";

3

4

export default function CustomHeroImage() {

5

 return (

6

 <UIHeroImage>

7

 <Image

8

 src="https://storeframework.vtexassets.com/arquivos/ids/160965/est.jpg?v=637752924295370000"

9

 alt="Two puffs and two small desks placed together, accompanied by various color pencils."

10

 width={360}

11

 height={240}

12

 sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"

13

 />

14

 </UIHeroImage>

15

 );

16

}

`

Contributors

1

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

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/developing-and-overriding-components/experimental-exports-hooks-and-components.mdx)

[List of native sections and overridable components« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)[Extending the FastStore APINext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/api-extensions-overview)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23instructions)

[List of hooks and components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23list-of-hooks-and-components)

[Hooks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23hooks)[Image\_unstable component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23imageunstable-component)

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/developing-and-overriding-components/experimental-exports-hooks-and-components.mdx)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23instructions)

[List of hooks and components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23list-of-hooks-and-components)

[Hooks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23hooks)[Image\_unstable component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23imageunstable-component)

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 global tokens overview 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/global-tokens-overview/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/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/global-tokens-overview/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/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/global-tokens-overview/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/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/global-tokens-overview/updates/release-notes)

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/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/global-tokens-overview/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/webops-dashboard)

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

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

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

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-overview)

[Colors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-colors)

[Grid and Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-grid-and-layout)

[Interactive controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-interactive-controls)

[Refinements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-refinements)

[Spacing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-spacing)

[Typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-typography)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/using-themes-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/components-index)

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/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/global-tokens-overview/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/global-tokens-overview/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/global-tokens-overview/docs/guides/faststore/managing-performance-overview)

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

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

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

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/vtex-io-apps)

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

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/updates/release-notes)

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/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/global-tokens-overview/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/webops-dashboard)

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

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

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

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-overview)

[Colors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-colors)

[Grid and Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-grid-and-layout)

[Interactive controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-interactive-controls)

[Refinements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-refinements)

[Spacing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-spacing)

[Typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-typography)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/using-themes-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/components-index)

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/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/global-tokens-overview/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/global-tokens-overview/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/global-tokens-overview/docs/guides/faststore/managing-performance-overview)

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

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

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

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore)

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

Global Tokens

Design Tokens are parameters that affect the overall UI appearance, and they are the main configuration file of a Theme. Component-specific tokens often inherit from global tokens but are named specifically to apply those tokens in component development.

## Global Tokens

FastStore uses a default theme called `Brandless`, which provides structural styles for your components and pages. Please read [Brandless's page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-overview%23brandless-and-the-theming-structure) for further information about the themeable architecture.

Its presets are defined on `src/base/tokens.scss` in [@faststore/ui](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/blob/main/packages/ui/src/styles/base/tokens.scss), and it's separated in these main areas:

* Colors
The store palette with all the tones needed.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-colors)
* Typography
A standard scale and basic definitions for your text: `font family`,`weight` and `sizes`.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-typography)
* Spacing
All tokens used for spacings on the store: `padding`, `margins` and `sizes`. It's also used as base for grid tokens.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-spacing)
* Grid & Layout
`Padding`, `Container`, `Gaps` and `Breakpoints` definitions.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-grid-and-layout)
* Interactive Controls
`Tap`, `States` and `Sizing` definitions.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-interactive-controls)
* Refinements
`Transition`, `Borders` and `Shadow` definitions.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-refinements)

Contributors

1

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

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/styling/global-tokens/overview.mdx)

[Midnight« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/themes-midnight)[ColorsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-colors)

Contributors

1

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

ON THIS PAGE

[Global Tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-overview%23global-tokens)

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/styling/global-tokens/overview.mdx)

Copy page

On this page

ON THIS PAGE

[Global Tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-overview/docs/guides/faststore/global-tokens-overview%23global-tokens)

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