Badges are status descriptors used to emphasize an item's state.

Buttons indicate actions that users can take, like adding an item to the cart.

Checkboxes allow users to toggle an option on or off.

Icons are simplified graphics used to represent concepts and help users navigate the UI.

Fields used to get user inputs.

Describes the meaning of input fields.

Lists group related content. They can be ordered or unordered.

Loaders provide a visual cue that an action is being processed.

Overlays provide contextual information on top of the current layer of the interface.

Used to display the price of a given product, discount and total values.

Allow users to select one option from a set.

Select components allow users to pick an option from a predefined list.

Improves the store's experience and perceived performance through loading placeholders.

Allows users to select a single value from a range.

Hides an element visually. Improve accessibility by providing text to screen readers when applied.

Displays an expandable/collapsible list of items.

Intends to send the user to the checkout/cart step directly.

A card with a header and body, ideal for displaying products, messages, or store information.

Used to present the summarized information of a product inside the Cart.

Wraps a Checkbox input and its corresponding Label. It allows users to select one option from a set.

A custom Badge that display product's discounts.

Displays a set of actions/items to the user, usually used to show a menu of options.

Displays an additional item to purchase as a gift.

icons that trigger some sort of action, such as adding an item to the cart.

Wraps an Input and its corresponding Label.

Are dialog windows that sit on top of an application's main view.

Provides a summary of the items in the cart, including the total price, related shipping tax, and discounts.

Displays the product's listing and spot price.

Used on Product Details Page, wraps the product name, a product label and the rating.

Allows customers to select the quantity of a given product to purchase.

Wraps a Radio input and its corresponding Label. It allows users to select one option from a set.

Allows users to select a single option from a list of two or more mutually exclusive options.

Displays the average rating of a product based on other shoppers' feedback and reviews.

Trigger the RegionModal and is part of Regionalization feature.

An InputField with a search button. This component is part of the Search feature.

Wraps a Select input and its corresponding Label. It allows users to select one option from a set.

Displays information in a friendly way, allowing users to scan for details quickly.

Are an interactive Badge. By default, its have a close button.

Used to display notifications.

A customized checkbox input styled to look like a switch button.

Toggle Field wraps a Toggle input and its corresponding Label.

Displays the summary of items added to the cart along with detailed information, and checkout option.

Used to represent an empty state.

Filters products inside the Product Listing Page (PLP) and Search Page.

The mobile Filter view that is rendered inside a SlideOver component.

Used when you want to display a series of photos in a gallery on a post or page.

As part of the Navbar, this component is its mobile version used to list the navigation links through the NavbarLinks.

The Newsletter component is a section that features a text input field and an action button, allowing users to subscribe to updates and newsletters.

Used to announce to users that the product is out of stock.

Displays the logos of the available payment options in a store.

Slider that allows users to select a maximum and minimum price from a range.

A Modal with some region configurations. The component is part of Regionalization feature

Responsible to receive, search and display suggestions. This component is part of the Search feature.

Represents an aditional session that complements the screen's information.