[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 search use search 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/search-use-search/docs/guides)

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/analytics-overview)

[Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/cart-overview)

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

[SearchProvider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-search-provider)

[usePagination](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-use-pagination)

[useSearch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-use-search)

[Session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/session-overview)

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/analytics-overview)

[Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/cart-overview)

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

[SearchProvider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-search-provider)

[usePagination](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-use-pagination)

[useSearch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-use-search)

[Session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/session-overview)

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

useSearch

The `useSearch` hook provides access to the search context managed by the [SearchProvider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider) component. It enables reading and modifying the search state, such as sorting criteria, selected facets, and pagination. Use this hook to build interactive search features like sorting dropdowns, facet filters, and pagination controls.

## Import

`1

import { useSearch } from '@faststore/sdk'

`

## Usage

The following example shows how to implement a sorting dropdown using `useSearch`:

`1

import { useSearch } from '@faststore/sdk'

2

3

// Example: A sort dropdown to change the search sorting criteria

4

5

const keyMap = {

6

 price_desc: 'Price, descending',

7

 price_asc: 'Price, ascending',

8

 orders_desc: 'Top sales',

9

 name_asc: 'Name, A-Z',

10

 name_desc: 'Name, Z-A',

11

 release_desc: 'Release date',

12

 discount_desc: 'Discount',

13

 score_desc: 'Relevance',

14

}

15

16

const keys = Object.keys(keyMap)

17

18

function Component () {

19

 const {

20

 setSort,

21

 state: { sort },

22

 } = useSearch()

23

24

 return (

25

 <select

26

 onChange={(e) => setSort(keys[e.target.selectedIndex])}

27

 value={sort}

28

 >

29

 {keys.map((key) => (

30

 <option key={key} value={key}>

31

 {keyMap[key]}

32

 </option>

33

 ))}

34

 </select>

35

 )

36

}

`

`useSearch`: Accesses the search context to read and update the search state.`keyMap`: Maps sorting keys to user-friendly labels.`setSort`: Updates the sorting criteria.`sort`: Contains the current sorting criteria from the search state.

## API reference

The `useSearch` hook returns an object with the following properties and functions:

| Variable name | Data type                     | Description                                                                                |
| ------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| itemsPerPage  | number                        | Number of items displayed per page.                                                                                |
| state         | SearchState                   | Contains the current state of the search, including selected facets, sorting criteria, and pagination.                           |
| setSort       | (sort: SearchSort) => void    | Updates the sorting criteria of the search results.                                                                              |
| setTerm       | (term: string / null) => void | Updates the full-text search term.                                                                                |
| setPage       | (page: number) => void        | Updates the current page in the search pagination.                                                                               |
| removeFacet   | (facet: Facet) => void        | Removes a specific facet from the search state.                                                                                |
| toggleFacet   | (facet: Facet) => void        | Toggles a specific facet in the search state. If the facet is already selected, it will be removed; otherwise, it will be added. |
| toggleFacets  | (facets: Facet\[\]) => void   | Toggles multiple facets in the search state.                                                                                |
| addPrevPage   | () => void                    | Prepends a page of results to the current list (used in infinite scroll).                                                        |
| addNextPage   | () => void                    | Appends a page of results to the current list (used in infinite scroll).                                                         |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/_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/sdk/search/use-search.mdx)

[usePagination« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-use-pagination)[SessionNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/session-overview)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/_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

[Import](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-use-search%23import)

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

[API reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-use-search%23api-reference)

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/sdk/search/use-search.mdx)

Copy page

On this page

ON THIS PAGE

[Import](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-use-search%23import)

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

[API reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-use-search/docs/guides/faststore/search-use-search%23api-reference)

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] How do I use the VTEX stack layout app? Provide documentation and configuration details.

[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/apps/vtex.stack-layout/docs/guides)

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

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

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

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

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

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/layout-apps)

[Condition Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.condition-layout)

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.stack-layout)

[Sticky Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.sticky-layout)

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.tab-layout)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/storefront-development)

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/layout-apps)

[Condition Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.condition-layout)

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.stack-layout)

[Sticky Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.sticky-layout)

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.tab-layout)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/vtex-io-deprecated-apps)

---

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

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/guides/layout-apps)

Stack Layout

Official extension

Version: 0.1.3

Latest version: 0.1.3

Use this layout component to show blocks on top of other blocks.

![{"base64":"  ","img":{"width":612,"height":1260,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":196095,"url":"https://user-images.githubusercontent.com/27777263/70265324-e55fda00-1778-11ea-8d56-e73e3848b0b3.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/27777263/70265324-e55fda00-1778-11ea-8d56-e73e3848b0b3.png)

Each child passed to `stack-layout` will receive an increasingly higher value of `zIndex`.

This means `flex-layout.row#viewone` will appear on the bottom, `flex-layout.row#viewtwo` will appear over it with `zIndex` of value 2, and `flex-layout.row#viewthree` will appear over them both with `zIndex` of value 3\. Another thing to notice is that if you pass the `blockClass` prop to any children of the `stack-layout`, it will apply the `blockClass` to the element that wraps the child element.

## Configuration

1. Import the Stack Layout app to your theme's dependencies to the `manifest.json`:

`1

 "dependencies": {

2

 "vtex.stack-layout": "0.x"

3

 }

`

1. Add the `stack-layout` block to the desired template. For example:

`1

"stack-layout": {

2

 "children": ["flex-layout.row#viewone", "flex-layout.row#viewtwo", "flex-layout.row#viewthree]

3

}

`

| Prop name    | Type   | Description                                                                                | Default value |
| ------------ | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| blockClass   | string | Allows to pass a custom name to be added to component CSS classes.                                                                                | null          |
| zIndexOffset | number | An offset to be passed to the zIndex of the children of the stack layout. If you pass 3, the first children will have zIndex of 3, and the next layer will have zIndex of 4, and so on. | 0             |
| arialabel    | string | A value to customize the aria-label property                                                                                | null          |

## Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [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).

| CSS Handles      |
| ---------------- |
| stackContainer   |
| stackItem        |
| stackItem--first |

[Slider Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.slider-layout)[Sticky LayoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.sticky-layout)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.stack-layout%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.stack-layout/docs/apps/vtex.stack-layout%23customization)

Was this helpful?

[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] Explain the VTEX api reference budgets api API and how to use it.

[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/api-reference/budgets-api/docs/guides)

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

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

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

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

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

API Reference

Filter By

Post

Get

Put

Delete

Patch

[Anti-fraud Provider API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/antifraud-provider-protocol/)

---

[Audience API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/audience-api/)

---

[Buyer organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/buyer-organizations/)

---

[Budgets API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/budgets-api/)

Statements

Transactions

Reservations

Allocations

Budgets

---

[Legacy CMS Portal API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/legacy-cms-portal-api/)

---

[Card Token Vault API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/card-token-vault-api/)

---

[Catalog API - Seller Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/catalog-api-seller-portal/)

---

[Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/catalog-api/)

---

[Checkout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/checkout-api/)

---

[Customer Credit API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/customer-credit-api/)

---

[Delivery Promise Notification API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/delivery-promise-notification-api/)

---

[GiftCard API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/giftcard-api/)

---

[Giftcard Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/giftcard-provider-protocol/)

---

[GiftCard Hub API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/giftcard-hub-api/)

---

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/headless-cms-api/)

---

[Intelligent Search API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/intelligent-search-api/)

---

[Intelligent Search Events API - Headless](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/intelligent-search-events-api-headless/)

---

[License Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/license-manager-api/)

---

[Logistics API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/logistics-api/)

---

[Marketplace API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/marketplace-apis/)

---

[Marketplace Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/marketplace-protocol/)

---

[Master Data API - v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/master-data-api-v2/)

---

[Master Data API - v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/masterdata-api/)

---

[Message Center API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/message-center-api/)

---

[mTLS API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/mtls-api/)

---

[Operational Capacity API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/operational-capacity-api/)

---

[Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/orders-api/)

---

[Organization Units API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/organization-units-api/)

---

[Payment Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/payment-provider-protocol/)

---

[Payments Gateway API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/payments-gateway-api/)

---

[Pick and Pack API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/pick-and-pack-api/)

---

[Pick and Pack Last Mile Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/pick-and-pack-protocol-api/)

---

[Pick and Pack Order Changes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/pick-and-pack-order-changes-api/)

---

[Policies System API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/policies-system-api/)

---

[Pricing API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/pricing-api/)

---

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/pricing-hub/)

---

[Promotions & Taxes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/promotions-and-taxes-api/)

---

[Promotions & Taxes API v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/promotions-and-taxes-api-v2/)

---

[Punchout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/punchout-api/)

---

[Reviews and Ratings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/reviews-and-ratings-api/)

---

[Recommendations BFF API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/recommendations-bff-api/)

---

[SKU Bindings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/sku-bindings-api/)

---

[Search API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/search-api/)

---

[Session Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/session-manager-api/)

---

[SSL Certificates API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/ssl-certificates-api/)

---

[Storefront Permissions API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/storefront-permissions-api/)

---

[Subscriptions API (v3)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/subscriptions-api-v3/)

---

[VTEX Ads API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/vtex-ads-api/)

---

[VTEX Shipping Network API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/vtex-shipping-network-api/)

---

[VTEX Tracking APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/tracking/)

---

[VTEX DO API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/vtex-do-api/)

---

[VTEX ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/vtex-id-api/)

---

[Profile System (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/profile-system/)

---

[Orders API - PII Data Architecture (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/orders-api-pii-version/)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/guides)

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

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/updates/release-notes)

API Reference

Filter By

Post

Get

Put

Delete

Patch

[Anti-fraud Provider API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/antifraud-provider-protocol/)

---

[Audience API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/audience-api/)

---

[Buyer organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/buyer-organizations/)

---

[Budgets API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/budgets-api/)

Statements

Transactions

Reservations

Allocations

Budgets

---

[Legacy CMS Portal API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/legacy-cms-portal-api/)

---

[Card Token Vault API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/card-token-vault-api/)

---

[Catalog API - Seller Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/catalog-api-seller-portal/)

---

[Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/catalog-api/)

---

[Checkout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/checkout-api/)

---

[Customer Credit API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/customer-credit-api/)

---

[Delivery Promise Notification API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/delivery-promise-notification-api/)

---

[GiftCard API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/giftcard-api/)

---

[Giftcard Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/giftcard-provider-protocol/)

---

[GiftCard Hub API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/giftcard-hub-api/)

---

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/headless-cms-api/)

---

[Intelligent Search API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/intelligent-search-api/)

---

[Intelligent Search Events API - Headless](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/intelligent-search-events-api-headless/)

---

[License Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/license-manager-api/)

---

[Logistics API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/logistics-api/)

---

[Marketplace API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/marketplace-apis/)

---

[Marketplace Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/marketplace-protocol/)

---

[Master Data API - v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/master-data-api-v2/)

---

[Master Data API - v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/masterdata-api/)

---

[Message Center API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/message-center-api/)

---

[mTLS API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/mtls-api/)

---

[Operational Capacity API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/operational-capacity-api/)

---

[Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/orders-api/)

---

[Organization Units API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/organization-units-api/)

---

[Payment Provider Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/payment-provider-protocol/)

---

[Payments Gateway API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/payments-gateway-api/)

---

[Pick and Pack API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/pick-and-pack-api/)

---

[Pick and Pack Last Mile Protocol API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/pick-and-pack-protocol-api/)

---

[Pick and Pack Order Changes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/pick-and-pack-order-changes-api/)

---

[Policies System API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/policies-system-api/)

---

[Pricing API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/pricing-api/)

---

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/pricing-hub/)

---

[Promotions & Taxes API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/promotions-and-taxes-api/)

---

[Promotions & Taxes API v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/promotions-and-taxes-api-v2/)

---

[Punchout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/punchout-api/)

---

[Reviews and Ratings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/reviews-and-ratings-api/)

---

[Recommendations BFF API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/recommendations-bff-api/)

---

[SKU Bindings API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/sku-bindings-api/)

---

[Search API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/search-api/)

---

[Session Manager API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/session-manager-api/)

---

[SSL Certificates API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/ssl-certificates-api/)

---

[Storefront Permissions API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/storefront-permissions-api/)

---

[Subscriptions API (v3)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/subscriptions-api-v3/)

---

[VTEX Ads API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/vtex-ads-api/)

---

[VTEX Shipping Network API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/vtex-shipping-network-api/)

---

[VTEX Tracking APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/tracking/)

---

[VTEX DO API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/vtex-do-api/)

---

[VTEX ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/vtex-id-api/)

---

[Profile System (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/profile-system/)

---

[Orders API - PII Data Architecture (Data Protection Plus)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/orders-api-pii-version/)

---

[PoValidate file« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/buyer-organizations%23post-/api/b2b/import/buyer-orgs/validate/-importId-)[GeGet Budget StatementsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/budgets-api/docs/api-reference/budgets-api%23get-/api/budgets/-contextType-/-contextId-/-budgetId-/statements)

[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 vtex io documentation 5 defining styles 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-5-defining-styles/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/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-5-defining-styles/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-5-defining-styles/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-5-defining-styles/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-5-defining-styles/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-5-defining-styles/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/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-5-defining-styles/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-5-defining-styles/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-5-defining-styles/docs/guides/code-samples)

---

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

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/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-5-defining-styles/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-5-defining-styles/docs/guides/app-development-guides)

---

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

---

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

---

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

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/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-5-defining-styles/docs/guides/vtex-app-store)

---

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

---

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

---

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

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

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

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

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

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

---

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/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-5-defining-styles/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-5-defining-styles/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-5-defining-styles/docs/guides/code-samples)

---

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

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/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-5-defining-styles/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-5-defining-styles/docs/guides/app-development-guides)

---

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

---

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

---

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

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/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-5-defining-styles/docs/guides/vtex-app-store)

---

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

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/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-5-defining-styles/docs/app-development)

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

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles)

4\. Defining styles

Learn how to define styles for your storefront components, including how to export CSS handles for further customization.

Once you have defined the blocks for your theme, the next step is to consider the style you want to apply to them. This includes defining the color scheme, typography, and other design elements that will establish the visual identity of your app when it is rendered.

## Before you begin

Customizing the style in a component requires basic CSS knowledge. If you're new to CSS, we recommended checking the [documentation](https://read.calvincode.net/reader?url=https://www.w3schools.com/css/default.asp) for this language before following the instructions detailed in this article.

## Instructions

Store Framework provides three different tools for applying CSS to a storefront:

* **Tachyons** \- Main option for styling components from CSS classes. It offers a wide range of pre-defined styles and enables you to customize them as needed.
* **CSS Modules** \- Secondary option for styling components from CSS classes. It should only be used when the desired style cannot be achieved with Tachyons.
* **CSS handles** \- This option exports generic CSS classes that allow users that work with your component to customize it according to their individual needs.

Now that you know the various styling option available on the platform, it is time to delve deeper into each of them and explore their features and functionalities. Below you will find detailed instructions on how to work with each of them.

### Using Tachyons

VTEX Tachyons is a functional CSS structure built on [Tachyons](https://read.calvincode.net/reader?url=https://tachyons.io/). VTEX Tachyons offers single-purpose CSS classes that can be combined to create complex layouts and responsive components for your storefront app.

> To better understand VTEX Tachyons tokens for CSS classes, it is important to familiarize yourself with the underlying Tachyons framework. We highly recommend carefully reading through Tachyons [documentation](https://read.calvincode.net/reader?url=https://tachyons.io/%23getting-started) to learn more about this solution.

1. Open your app code in your code editor.
2. In the `react` folder, access the file created for the component you want to style.
3. Check the [VTEX Tachyons documentation](https://read.calvincode.net/reader?url=https://vtex.github.io/vtex-tachyons/) and look for the most appropriate CSS classes for the customization you want to apply.
4. In the React component code, declare the desired CSS classes. For example:

`1

const Example = () => (

2

3

Hello, World!

4

5

)

`

1. Save your changes.

### Using CSS Modules

CSS Modules is a tool for defining CSS classes within a separate CSS file that is scoped to the storefront app exporting the component. In this regard, the use of CSS Modules may be limiting when it comes to importing and exporting components between different apps. Thus, it is recommended to use VTEX Tachyons as the primary CSS styling tool in your project. CSS Modules should only be used when the desired style cannot be achieved using Tachyons.

> Keep in mind that using CSS Modules should be avoided whenever possible in favor of VTEX Tachyons. This will ensure greater compatibility and flexibility when importing and exporting components between different storefront apps.

1. In your app's `react` folder, create the `styles.css` file.
2. In this file, create the desired CSS classes (the ones not understood by Tachyons tokens). For example:

`1

.myButton {

2

 background-color: red;

3

}

`

1. In the `react` folder, access the component file being customized and import the `styles` file created in step 1\. For example:

`1

import styles from './styles.css'

`

1. You can also import the `styles` file so that the generated CSS classes are private; that is, they are generated with a unique identifier (_hash_) instead of the traditional `vendor-app-major-x-format-classname`. For this, you need to do an import following the model below:

`1

import styleModule from './style.module.css'

`

1. After this, the `styles` imported for your component will be an object whose keys will be the names of the classes you created (`className`). For example:

`1

/* /react/MyButton.tsx */

2

import styles from './styles.css'

3

4

export default function MyButton() {

5

 return (

6

 <button className={styles.myButton}>

7

 My button

8

 </button>

9

 )

10

}

`

> Remember that the name of the created classes will depend on the _import_ model you used (step 3 or step 4 in this section).

1. Save your changes and [link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app/) the app.

When rendered and inspected, the component will now have the following HTML structure if you chose to follow the _import_ model shown in step 3:

`1

<button class="vtex-my-app-name-0-x-myButton">My button</button>

`

### Using CSS handles

A CSS handle is an **HTML element identifier**. Handles are useful when creating store themes, allowing your app users to apply CSS classes based on the visual identity they want.

To make handles available for future app users, add `vtex.css-handles` to the `dependencies` list in the `manifest.json` file:

`1

 "dependencies": {

2

+ "vtex.css-handles": "0.x"

3

 }

`

Once `vtex.css-handles` is added as a dependency, your app is ready to generate CSS handles.

However, when generating them, you will need to pay attention to how your app's React component(s) are imported and defined.

There are two possible scenarios:

* **Function components** \- React components are defined in your app using a function.
* **Class components** \- React components are defined in your app using a class.

#### Creating CSS handles for function components

1. In your app's `react` folder, go to the file of the React component you want.
2. Copy and paste the following code example in the file:

`` 1

import { useCssHandles } from 'vtex.css-handles'

2

3

const CSS_HANDLES = ['container', 'background', 'text', 'item'] as const

4

/* Using `as const` at the end hints to Typescript that this array

5

* won't change, thus allowing autocomplete and other goodies. */

6

7

const Component: FC = () => {

8

 const handles = useCssHandles(CSS_HANDLES)

 ``

1. In the `CSS_HANDLES` array, replace the exemple strings with the names of the CSS handles you want. You can choose any name for the CSS handle; but, remember, your app users will use it with CSS classes to personalize HTML elements in stores. We recommend choosing intuitive names. Following the above example, the variable `(CSS_HANDLES)` will be an object using the following format:

`1

{

2

 container: 'vtex-foobar-1-x-container',

3

 background: 'vtex-foobar-1-x-background',

4

 text: 'vtex-foobar-1-x-text',

5

 item: 'vtex-foobar-1-x-item',

6

}

`

> Note that the CSS handles generated and stored in the object follow this pattern: `vtex-{appName}-{majorVersion}-x-{handleName}`.

1. Add the new CSS handle to the desired CSS class–according to the HTML element to be customized by app users. Remember to use the `handle` variable when adding it and also the CSS handle name defined in the `CSS_HANDLES` array (like `container`). For example:

`` 1

2

 <div className={`$\{handles.background\} bg-red`}>

3

 <h1 className={`$\{handles.text\} f1 c-white`}>Hello world

4

5

 {['blue', 'yellow', 'green'].map(color => (

6

 <li

7

 className={`$\{handles.item\} bg-$\{color\}`}>

8

 Color {color}

9

10

 ))}

11

12

13

 ``

#### Creating CSS handles for class components

1. In your app's `react` folder, go to the file of the React component you want.
2. Copy and paste the following code example in the file:

`1

import { withCssHandles } from 'vtex.css-handles'

2

3

const CSS_HANDLES = ['text'] as const

4

5

class ExampleComponent extends Component {

6

 render() {

7

 const { cssHandles } = this.props

`

> Since components defined as classes cannot use _hooks_, we will use an HOC called `withCssHandles`.

1. In the `CSS_HANDLES` array, replace the example strings with the names of the CSS handles you want. You can choose any name for the CSS handle; but, remember, your app users will use it with CSS classes to personalize HTML elements. We recommend using intuitive names.

Following the above example, the variable `{ cssHandles }` will be an object using the following format:

`1

{

2

 text: 'vtex-foobar-1-x-text',

3

}

`

> Note that the CSS handles generated and stored in the object follow this pattern: `vtex-{appName}-{majorVersion}-x-{handleName}`.

1. Add the new CSS handle to the desired CSS class–according to the HTML element to be customized by app users. Remember to use the `handle` variable when adding it, as well as the CSS handle name defined in the `CSS_HANDLES` array (like `text`). For example:

`` 1

<div className={`$\{cssHandles.text\} f1 c-white`}>Hello world

 ``

After saving your changes, your app will be able to not only export a predefined style based on the CSS classes you set up but also export CSS handles, giving your users more customization flexibility.

> Learn more about how CSS handles can be used to define styles in [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).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/_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/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/vtex-io-documentation-5-defining-styles.md)

[3\. Declaring a theme block« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles//docs/guides/vtex-io-documentation-4-declaring-a-theme-block)[5\. Structuring documentationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles//docs/guides/vtex-io-documentation-6-structuring-documentation)

See also

[5\. Structuring documentationApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-6-structuring-documentation)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/_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-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles%23before-you-begin)

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

[Using Tachyons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles%23using-tachyons)[Using CSS Modules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles%23using-css-modules)[Using CSS handles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles%23using-css-handles)

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/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/vtex-io-documentation-5-defining-styles.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-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles%23before-you-begin)

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

[Using Tachyons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles%23using-tachyons)[Using CSS Modules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles%23using-css-modules)[Using CSS handles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles/docs/guides/vtex-io-documentation-5-defining-styles%23using-css-handles)

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