DOCSEARCHbyAlgolia
Submit Docs

Storefront UI Documentation

repository·v2-develop·Indexed 25 days ago

https://github.com/vuestorefront/storefront-ui

A framework-agnostic Design System and UI library built with TailwindCSS, specifically tailored for eCommerce applications. It provides WCAG AA compliant base components, complex reusable blocks, and composables for both Vue and React ecosystems. The library includes dedicated integration for Nuxt via the @storefront-ui/nuxt module and provides pre-defined layouts for Next.js projects via @storefront-ui/preview-next.

Tokens
57.4K
Snippets
79
Records
406
Agent score
82%

What's inside Storefront UI

  1. Overview of Storefront UI

    v2-develop

    Storefront UI is a framework-agnostic UI library and Design System specifically optimized for eCommerce. It is built on top of TailwindCSS and provides a set of opinionated components, utilities, and patterns designed to accelerate development while maintaining high performance and accessibility.

    Key Features

    • Base Components: Small, flexible, and WCAG AA compliant components (e.g., Button, Checkbox, Input, Modal) for building custom interfaces.
    • Blocks: Complex, copy-pasteable UI patterns specific to eCommerce, such as ProductCard or checkout steps.
    • Composables: Logic abstractions like useDropdown to handle complex UI interactions.
    • Tailwind Integration: A Tailwind preset that maps configuration to CSS variables and provides SFUI-specific defaults.
    • Design Alignment: Includes a Figma design kit that provides a pixel-perfect representation of the code components.
    • Performance & Accessibility: Components are optimized for high Lighthouse scores and meet WCAG AA accessibility standards out of the box.

  2. Overview of Storefront UI core package structure

    v2-develop

    The core package contains components, styling, and associated assets. It is organized into framework-specific directories and a shared directory to support both React and Vue:

    • assets: Contains SVG files that are converted into icons.
    • frameworks/react: Contains React-specific components, hooks, and shared utilities.
    • frameworks/vue: Contains Vue-specific components, composables, and shared utilities.
    • shared: Contains common utilities and types used by both frameworks. During the release process, these are populated into the framework-specific packages to ensure they function as standalone packages in an end-user's node_modules.

  3. Use the Card component

    v2-develop

    The Card component is used to display content and actions related to a single subject. It is available in both Vue (via @storefront-ui/nuxt) and React (via @storefront-ui/react) implementations.

    There are three primary variations of the Card component:

    1. Default Card: Features a rectangular image, a title, a description, and an action button. It includes an empty anchor element to allow keyboard navigation (tab key) through the entire card while still permitting interaction with internal buttons.
    2. Category Card: Designed for category navigation, featuring a circular image and a category title. The entire card acts as a single clickable element.
    3. Card Feature: A simplified version containing only an interaction button.

  4. Use the NewsletterBox component

    v2-develop

    The NewsletterBox component provides a standard e-commerce newsletter subscription interface. It typically includes an email input field and handles submission logic with feedback mechanisms.

    Key features include:

    • Positive Alerts: Displayed when a valid email address is successfully submitted.
    • Negative Alerts: Displayed when an error occurs, such as attempting to subscribe with an email address that has already been submitted.

    The component is available for both Vue (via Nuxt) and React frameworks.

  5. Explore Storefront UI component types

    v2-develop

    Storefront UI organizes its UI offerings into three main categories:

    1. Base Components: Fast, accessible components that integrate with Tailwind CSS. These are the building blocks for more complex structures.
    2. Composables: Utility functions (hooks) designed to help you build custom components or extend existing Storefront UI functionality.
    3. Blocks: Fully accessible, high-level UI blocks designed to integrate with Tailwind CSS and Vue.

  8. Use the Search component

    v2-develop

    The Search component is a specialized input field for text-based searching. It is commonly used in global navigation (like a NavBarTop) or on results pages.

    Key features include:

    • Autocomplete/Live Hints: Displays suggestions to users as they type.
    • Accessibility: Fully supports keyboard navigation. Users can transition from the search input to the hints list using the Tab key.

    Depending on your requirements, you can implement different variants:

    1. Basic Search: Includes autocomplete functionality for providing hints.
    2. Search with Custom Icon: Enhances the input with a custom icon and categorized result suggestions.
    3. Search with Custom Button: Includes a custom button, categorized suggestions, and thumbnails for a more visual search experience.

  9. Implement product filters in Storefront UI

    v2-develop

    Storefront UI provides a variety of UI components and showcase patterns for implementing product filters in e-commerce applications. These components allow users to narrow down product lists based on specific attributes.

    Note that the provided showcase examples are primarily for presentation. You are responsible for implementing the actual logic (e.g., state management, API calls to your backend, and updating the product list) to make these filters functional.

  12. Use Banners for main image and content delivery

    v2-develop

    Banners are components designed to deliver a main image and content in various layout configurations. They are useful for creating hero sections, promotional blocks, and informational displays. Available configurations include:

    • Responsive Display: Blocks that switch between horizontal and vertical arrangements based on the parent container's size using container queries.
    • Horizontal Display: A layout where the image and content are placed side-by-side.
    • Vertical Display: A layout where the image and content are stacked (image above or below content).
    • Multiple Vertical Displays: A row of multiple vertical display blocks (e.g., four in a row on desktop).
    • Display With Image Overlay: A block where the image fills the entire background area, with content overlaid on top.
    • Hero: A specialized block for high-impact hero sections that supports separate background images for mobile and desktop devices.
    • Hero With Side Image: A hero section enhanced with a contextual image placed to the side.