Documentation
Feedback
Guides
API Reference
App Development
Storefront Development
VTEX IO Apps
Release Notes
Storefront Development
FastStore
Store Framework
(Legacy) CMS Portal
FastStore
FastStore UI
FastStore UI is designed and built following the Atomic Design pattern. Atomic Design breaks user interfaces hierarchically into smaller and simpler components and the FastStore components are classified in: atoms, molecules, organisms and features.

Atoms

Molecules

Product Title

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

  • Quantity Selector

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

  • Radio Field

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

  • Radio Group

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

    Rating

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

  • Region Bar

    Trigger the RegionModal and is part of Regionalization feature.

  • Search Auto Complete

    Lists auto completing suggestions based on searched term. This component is part of the Search feature.

  • Search Dropdown

    Combines all Search components to show all options in SearchInput. This component is part of the Search feature.

  • Search History

    Responsible for showing the latest terms searched by a user. This component is part of the Search feature.

  • Search Input Field

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

  • Search Products

    Shows details of the suggested products. This component is part of the Search feature.

  • Search Top

    Displays the most searched terms by customers. This component is part of the Search feature.

  • Select Field

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

  • SKU Selector

    Used in Product Details Pages (PDPs) to display all the available variants for a given product.

  • Bordered
    Total
    1x$200
    2x$200
    3x$204

    Table

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

  • Tag

    Tag

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

  • Toast

    Used to display notifications.

  • Toggle

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

  • Toggle Field

    Toggle Field wraps a Toggle input and its corresponding Label.

    • Organisms

    Contributors
    3
    Photo of the contributor
    Photo of the contributor
    Photo of the contributor
    + 3 contributors
    Was this helpful?
    Yes
    No
    Suggest edits (Github)
    Adding third-party scripts
    « Previous
    Getting started
    Next »
    Contributors
    3
    Photo of the contributor
    Photo of the contributor
    Photo of the contributor
    + 3 contributors
    On this page