Storefront UI

https://docs.storefrontui.io/v2
Admin
Storefront UI provides fast, accessible, and fully customizable components and UI blocks built for...
Tokens:247,898
Snippets:819
Trust Score:8.6
Update:11 months ago
Show doc for...
Tokens:
Raw
### Basic Storefront UI Button Component Example

Source: https://docs.storefrontui.io/v2/getting-started/react

A simple React component demonstrating the usage of the `SfButton` from Storefront UI within a Next.js application.

```javascript
import { SfButton } from '@storefront-ui/react';

export default function ButtonBlock() {
  return <SfButton className="w-full">Hello</SfButton>;
}
```

--------------------------------

### Install Storefront UI and Tailwind Dependencies

Source: https://docs.storefrontui.io/v2/getting-started/react

Commands to install the Storefront UI React library and Tailwind CSS dependencies using npm, yarn, or pnpm.

```bash
# npm
npm i @storefront-ui/react
npm i -D tailwindcss postcss autoprefixer

# yarn
yarn add @storefront-ui/react
yarn add -D tailwindcss postcss autoprefixer

# pnpm
pnpm add @storefront-ui/react
pnpm add -D tailwindcss postcss autoprefixer
```

--------------------------------

### Modify Tailwind Configuration for Storefront UI

Source: https://docs.storefrontui.io/v2/getting-started/react

Example of `tailwind.config.js` incorporating Storefront UI's preset and specifying content paths for Tailwind to scan.

```javascript
const { tailwindConfig } = require('@storefront-ui/react/tailwind-config');

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [tailwindConfig],
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@storefront-ui/react/**/*.{js,mjs}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

--------------------------------

### Create New Next.js Project

Source: https://docs.storefrontui.io/v2/getting-started/react

Commands to create a new Next.js project using npm, yarn, or pnpm.

```bash
# npm
npx create-next-app@latest

# yarn
yarn create next-app

# pnpm
pnpm create next-app
```

--------------------------------

### Use Storefront UI Button Component (Vue)

Source: https://docs.storefrontui.io/v2/getting-started

Example of importing and using the `SfButton` component from `@storefront-ui/vue` within a Vue 3 template, along with Tailwind utility classes for styling.

```vue
<template>
  <SfButton class="w-full"> Hello </SfButton>
</template>

<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
</script>


```

--------------------------------

### Add Tailwind Directives to Global CSS

Source: https://docs.storefrontui.io/v2/getting-started/react

Example of adding Tailwind's base, components, and utilities layers to the main CSS file (`src/app/globals.css`).

```css
/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

```

--------------------------------

### Initialize Tailwind CSS

Source: https://docs.storefrontui.io/v2/getting-started/vue

Generates the `tailwind.config.js` and `postcss.config.js` configuration files in the project's root directory.

```bash
npx tailwindcss init -p
```

--------------------------------

### Install Tailwind CSS and Storefront UI Vue Dependencies

Source: https://docs.storefrontui.io/v2/getting-started/vue

Installs necessary development dependencies for Tailwind CSS (core, postcss, autoprefixer) and the Storefront UI Vue library. Works with npm, yarn, and pnpm.

```bash
# npm
npm i -D tailwindcss postcss autoprefixer @storefront-ui/vue

# yarn
yarn add -D tailwindcss postcss autoprefixer @storefront-ui/vue

# pnpm
pnpm add -D tailwindcss postcss autoprefixer @storefront-ui/vue
```

--------------------------------

### Create Vite Project with Vue 3 and TypeScript

Source: https://docs.storefrontui.io/v2/getting-started/vue

Command to scaffold a new Vue 3 project using Vite with TypeScript template. Supports npm, yarn, and pnpm package managers.

```bash
# npm 6.x
npm create vite@latest my-vue-app --template vue-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue-ts

# yarn
yarn create vite my-vue-app --template vue-ts

# pnpm
pnpm create vite my-vue-app --template vue-ts
```

--------------------------------

### Use Storefront UI Button Component in Vue

Source: https://docs.storefrontui.io/v2/getting-started/vue

Demonstrates how to import and use the `SfButton` component from `@storefront-ui/vue` within a Vue 3 template. Assumes the necessary setup and imports are completed.

```html
<template>
  <SfButton class="w-full"> Hello </SfButton>
</template>


```

```javascript
<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
</script>


```

--------------------------------

### Next.js Configuration for ESM Modules

Source: https://docs.storefrontui.io/v2/getting-started/react

Configuration snippet for `next.config.js` to address Next.js's Next.js 13 ESM module detection issues with subdependencies.

```javascript
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@storefront-ui/react'],
};

module.exports = nextConfig;
```

--------------------------------

### Configure Tailwind for Storefront UI (JavaScript)

Source: https://docs.storefrontui.io/v2/getting-started/vue

Modifies the `tailwind.config.js` file to include the Storefront UI preset and specify content paths for Tailwind to scan. This ensures Storefront UI's styles and components are correctly processed.

```javascript
// tailwind.config.js
import { tailwindConfig } from '@storefront-ui/vue/tailwind-config';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [tailwindConfig],
  content: ['./index.html', './**/*.vue', './node_modules/@storefront-ui/vue/**/*.{js,mjs}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

```

--------------------------------

### Install Storefront UI Typography Plugin

Source: https://docs.storefrontui.io/v2/customization/typography

Instructions for installing the `@storefront-ui/typography` plugin using npm, yarn, or pnpm package managers. This plugin enhances Tailwind CSS with predefined typography utilities.

```bash
# npm
npm i -D @storefront-ui/typography

# yarn
yarn add -D @storefront-ui/typography

#pnpm
pnpm add -D @storefront-ui/typography
```

--------------------------------

### Add Tailwind CSS Directives to Global Stylesheet

Source: https://docs.storefrontui.io/v2/getting-started/vue

Injects Tailwind's base, components, and utilities layers into the main CSS file (`src/style.css`). This step is crucial for enabling Tailwind's styling capabilities and integrating Storefront UI.

```css
/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;


```

--------------------------------

### Vue Script Setup with Storefront UI Imports

Source: https://docs.storefrontui.io/v2/vue/blocks/filters

Sets up a Vue 3 component using the `<script setup>` syntax. It imports necessary components from '@storefront-ui/vue', defines types for filter data, and initializes a reactive array `filtersData` to hold filter configurations for size, category, and other types.

```javascript
import { ref } from 'vue';
import {
  SfAccordionItem,
  SfButton,
  SfChip,
  SfCheckbox,
  SfCounter,
  SfIconArrowBack,
  SfIconChevronLeft,
  SfIconCheck,
  SfIconClose,
  SfListItem,
  SfRadio,
  SfRating,
  SfSelect,
  SfThumbnail,
} from '@storefront-ui/vue';

type FilterDetail = {
  id: string;
  label: string;
  value: string;
  counter?: number;
  link?: string;
};

type Node = {
  id: string;
  summary: string;
  type: string;
  details: FilterDetail[];
};

const filtersData = ref<Node[]>([
  {
    id: 'acc1',
    summary: 'Size',
    type: 'size',
    details: [
      { id: 's1', label: '6', value: '6', counter: 10 },
      { id: 's2', label: '6.5', value: '6.5', counter: 10 },
      { id: 's3', label: '7', value: '7.5', counter: 30 },
      { id: 's4', label: '8', value: '8', counter: 0 },
      { id: 's5', label: '8.5', value: '8.5', counter: 3 },
      { id: 's6', label: '9', value: '9', counter: 7 },
      { id: 's7', label: '9.5', value: '9.5', counter: 9 },
      { id: 's8', label: '10', value: '10', counter: 11 },
      { id: 's9', label: '10.5', value: '10.5', counter: 12 },
      { id: 's10', label: '11', value: '11', counter: 0 },
      { id: 's11', label: '11.5', value: '11.5', counter: 4 },
      { id: 's12', label: '12', value: '12', counter: 1 },
    ],
  },
  {
    id: 'acc2',
    summary: 'Category',
    type: 'category',
    details: [
      {
        id: 'CLOTHING',
        label: 'Clothing',
        value: 'clothing',
        counter: 30,
        link: '#',
      },
      {
        id: 'SHOES',
        label: 'Shoes',
        value: 'shoes',
        counter: 28,
        link: '#',
      },
      {
        id: 'ACCESSORIES',

```

--------------------------------

### Basic Accordion Example using SfAccordionItem in React

Source: https://docs.storefrontui.io/v2/react/components/accordionitem

Demonstrates how to use the SfAccordionItem component to build a basic accordion interface in React. It utilizes the 'open' prop to control the expanded state of each item and the 'onToggle' prop for state management. This example manages an array of open item IDs.

```javascript
import { useState } from 'react';
import { SfAccordionItem } from '@storefront-ui/react';

const accordionItems = [
  {
    id: 'acc-1',
    summary: 'Where is my order?',
    details:
      'We will inform you about the expected delivery time of your order in checkout and in your order confirmation email.',
  },
  {
    id: 'acc-2',
    summary: 'What if an item is out of stock?',
    details:
      "If an item you're interested in is sold out, you can register to be notified when your size is back in stock.",
  },
  {
    id: 'acc-3',
    summary: 'How do I cancel my order?',
    details:
      "If you made a mistake or simply changed your mind after placing an order, there's no need to fuss. As long as your parcel has yet to be picked and packed in our warehouse, you'll have the option to cancel.",
  },
];

export default function BasicAccordion() {
  const [opened, setOpened] = useState<string[]>([]);

  const isOpen = (id: string) => opened.includes(id);

  const handleToggle = (id: string) => (open: boolean) => {
    if (open) {
      setOpened((current) => [...current, id]);
    } else {
      setOpened((current) => current.filter((item) => item !== id));
    }
  };

  return (
    <div className="border border-neutral-200 rounded-md divide-y text-neutral-900">
      {accordionItems.map(({ id, summary, details }) => (
        <SfAccordionItem
          key={id}
          summary={<p className="p-4 font-medium hover:bg-neutral-100 active:neutral-100">{summary}</p>}
          onToggle={handleToggle(id)}
          open={isOpen(id)}
        >
          <p className="p-4">{details}</p>
        </SfAccordionItem>
      ))}
    </div>
  );
}

```

--------------------------------

### NavbarBottom: Filled Background Example

Source: https://docs.storefrontui.io/v2/vue/blocks/navbarbottom

This Vue component demonstrates a NavbarBottom with a filled background, using primary colors. It mirrors the structure of the white background example, iterating through items and applying dynamic styling for the selected item. Key dependencies include Vue's ref and Storefront UI's Sf components.

```html
<template>
  <nav class="max-w-[500px] bottom-0 w-full left-0 fixed flex flex-row items-stretch">
    <SfButton
      v-for="item in items"
      :key="item.label"
      variant="tertiary"
      :class="[
        'py-1 flex flex-col h-full w-full rounded-none bg-primary-700 text-white hover:text-white hover:bg-primary-800 active:text-white active:bg-primary-900',
        { 'text-white bg-primary-900': selectedItem === item.label },
      ]"
      @click="onClickHandler(item.label)"
    >
      <template #prefix>
        <Component :is="item.icon" />
      </template>
      {{ item.label }}
    </SfButton>
  </nav>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SfButton, SfIconHome, SfIconMenu, SfIconShoppingCart, SfIconFavorite, SfIconPerson } from '@storefront-ui/vue';

const items = [
  {
    label: 'Home',
    icon: SfIconHome,
  },
  {
    label: 'Products',
    icon: SfIconMenu,
  },
  {
    label: 'Cart',
    icon: SfIconShoppingCart,
  },
  {
    label: 'Watchlist',
    icon: SfIconFavorite,
  },
  {
    label: 'Account',
    icon: SfIconPerson,
  },
];
const selectedItem = ref('');
function onClickHandler(itemLabel: string) {
  selectedItem.value = itemLabel;
}
</script>
```

--------------------------------

### Basic SfTooltip Usage in React

Source: https://docs.storefrontui.io/v2/react/components/tooltip

Demonstrates the basic implementation of the SfTooltip component in a React application. It shows how to wrap a target element with SfTooltip and provide a label for the tooltip content. No external dependencies beyond @storefront-ui/react are required.

```jsx
import { SfTooltip } from '@storefront-ui/react';

export default function BasicTooltip() {
  return (
    <SfTooltip label="This is a tooltip!">
      <span>Hover me!</span>
    </SfTooltip>
  );
}
```

--------------------------------

### Vue Radio Group Alignment Example

Source: https://docs.storefrontui.io/v2/vue/components/radio

This Vue.js code snippet demonstrates how to implement radio groups with both column and row alignments using the SfRadio component from Storefront UI. It utilizes Vue's template syntax and script setup for component logic and data management. The example includes sample radio options and reactive model values.

```html
<template>
  <div class="flex gap-x-10">
    <fieldset role="radiogroup">
      <div class="flex flex-col">
        <label
          v-for="{ label, name, value } in radioOptions"
          :key="`${value}-${name}`"
          class="flex items-center mb-4 mr-6 rounded cursor-pointer"
        >
          <SfRadio v-model="radioGroupModelValue" :value="value" :name="name" />
          <span class="ml-2 text-base font-normal leading-6 font-body">{{ label }}</span>
        </label>
      </div>
    </fieldset>

    <fieldset role="radiogroup">
      <div class="flex flex-row">
        <label
          v-for="{ label, name, value } in radioOptionsTwo"
          :key="`${value}-${name}`"
          class="flex items-center mr-4 rounded cursor-pointer"
        >
          <SfRadio v-model="radioGroupTwoModelValue" :value="value" :name="name" />
          <span class="ml-2 text-base font-normal leading-6 font-body">{{ label }}</span>
        </label>
      </div>
    </fieldset>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { SfRadio } from '@storefront-ui/vue';

const radioGroupModelValue = ref('');
const radioGroupTwoModelValue = ref('');
const radioOptions = [
  {
    label: 'Label',
    value: 'value-1',
    name: 'radio-1',
  },
  {
    label: 'Label 2',
    value: 'value-2',
    name: 'radio-1',
  },
];
const radioOptionsTwo = [
  {
    label: 'Label',
    value: 'value-1',
    name: 'radio-2',
  },
  {
    label: 'Label 2',
    value: 'value-2',
    name: 'radio-2',
  },
];
</script>

```

--------------------------------

### Textarea Readonly State - Vue

Source: https://docs.storefrontui.io/v2/vue/components/textarea

Illustrates the readonly state of the SfTextarea component. When the 'readonly' prop is applied, the textarea's content is non-editable but remains selectable and copyable. This example uses Vue's template and script setup.

```html
<template>
  <label>
    <span class="typography-text-sm font-medium">Description</span>
    <SfTextarea
      model-value="Hello! I'm a passionate shopper and a regular user of this ecommerce platform."
      class="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
      readonly
    />
  </label>
  <p class="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
</template>

<script lang="ts" setup>
import { SfTextarea } from '@storefront-ui/vue';
</script>

```

--------------------------------

### Uncontrolled Radio Group - React

Source: https://docs.storefrontui.io/v2/react/components/radio

Provides an example of an uncontrolled Radio Group using the SfRadio component from '@storefront-ui/react'. In an uncontrolled component, the form element's state is managed by the DOM itself. This snippet demonstrates a basic setup for a vertically aligned group of radio buttons without explicit state management in the parent component.

```jsx
import { SfRadio } from '@storefront-ui/react';

export default function RadioGroupUncontrolled() {
  return (
    <fieldset role="radiogroup">
      <div className="flex flex-col">
        <label className="flex items-center mb-4 cursor-pointer">
          <SfRadio name="name" />
          <span className="ml-2 text-base font-normal leading-6 font-body">Label</span>
        </label>
        <label className="flex items-center cursor-pointer">
          <SfRadio name="name" />
          <span className="ml-2 text-base font-normal leading-6 font-body">Label 2</span>
        </label>
      </div>
    </fieldset>
  );
}

```

--------------------------------

### SfInput Component Example with Character Limit (React)

Source: https://docs.storefrontui.io/v2/react/components/input

Demonstrates the usage of the SfInput component with label, help text, character counting, and different input states. It handles state management for the input value and displays character limits. Dependencies include React and Storefront UI's SfInput.

```jsx
import { SfInput } from '@storefront-ui/react';
import classNames from 'classnames';
import { ChangeEvent, useState } from 'react';

export default function InputWithLimit() {
  const characterLimit = 25;
  const label = 'Label';
  const placeholder = 'placeholder';
  const disabled = false;
  const readonly = false;
  const invalid = false;
  const helpText = 'Help text';
  const required = false;
  const requiredText = 'Required';
  const errorText = 'Error';

  const [value, setValue] = useState('');

  function onChange(event: ChangeEvent<HTMLInputElement>) {
    setValue(event?.target.value);
  }
  const isAboveLimit = characterLimit ? value.length > characterLimit : false;
  const charsCount = characterLimit ? characterLimit - value.length : null;

  const getCharacterLimitClass = () => (isAboveLimit ? 'text-negative-700 font-medium' : 'text-neutral-500');

  return (
    <>
      <label>
        <span
          className={classNames('text-sm font-medium', {
            'cursor-not-allowed text-disabled-500': disabled,
          })}
        >
          {label}
        </span>
        <SfInput
          size="base"
          value={value}
          invalid={false}
          placeholder={placeholder}
          disabled={disabled}
          readOnly={readonly}
          onChange={onChange}
          wrapperClassName={classNames({
            '!bg-disabled-100 !ring-disabled-300 !ring-1 !text-disabled-500': disabled || readonly,
          })}
        />
      </label>
      <div className="flex justify-between">
        <div>
          {invalid && !disabled && <p className="text-sm text-negative-700 font-medium mt-0.5">{errorText}</p>}
          {helpText && (
            <p className={classNames('typography-hint-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
              {helpText}
            </p>
          )}
          {requiredText && required ? (
            <p className="mt-1 text-sm font-normal text-neutral-500 before:content-['*']">{requiredText}</p>
          ) : null}
        </div>
        {characterLimit && !readonly ? (
          <p
            className={classNames(
              'typography-error-xs mt-0.5',
              disabled ? 'text-disabled-500' : getCharacterLimitClass(),
            )}
          >
            {charsCount}
          </p>
        ) : null}
      </div>
    </>
  );
}

```

--------------------------------

### SfRating Value Handling Examples

Source: https://docs.storefrontui.io/v2/vue/components/rating

Demonstrates how to set the rating value and maximum number of stars using the `value` and `max` props. Includes an example for supporting partial stars with the `half-increment` prop.

```vue
<template>
  <div class="flex flex-col">
    <SfRating :value="0" />
    <SfRating :value="3.5" />
    <SfRating :value="3.5" half-increment />
    <SfRating :value="6" :max="8" />
  </div>
</template>

<script lang="ts" setup>
import { SfRating } from '@storefront-ui/vue';
</script>

```

--------------------------------

### Create Product Browse Drawer with Categories

Source: https://docs.storefrontui.io/v2/react/blocks/megamenu

This code illustrates the structure of a product browsing drawer component. It includes a header with a close button, dynamically rendered category sections with product links, and a featured banner. Categories are mapped from a data structure, and each item links to a product page. Responsive styling is applied for different screen sizes.

```javascript
import { SfDrawer, SfButton, SfIconClose, SfListItem } from '@storefront-ui/react';

// Assuming categoriesContent and bannerDetails are defined elsewhere
// const categoriesContent = [{ heading: 'Category 1', items: [{ title: 'Item 1', link: '#' }] }];
// const bannerDetails = { image: 'url', title: 'Featured Product' };

// ... inside your component
<SfDrawer
  ref={drawerRef}
  open
  disableClickAway
  placement="top"
  className="grid grid-cols-1 md:gap-x-6 md:grid-cols-4 bg-white shadow-lg p-0 max-h-screen overflow-y-auto md:!absolute md:!top-20 max-w-[376px] md:max-w-full md:p-6 mr-[50px] md:mr-0"
>
  <div className="sticky top-0 flex items-center justify-between px-4 py-2 bg-primary-700 md:hidden">
    <div className="flex items-center font-medium text-white typography-text-lg">Browse products</div>
    <SfButton square variant="tertiary" aria-label="Close navigation menu" onClick={close} className="text-white ml-2">
      <SfIconClose />
    </SfButton>
  </div>
  {categoriesContent.map(({ heading, items }) => (
    <div key={heading} className="[&:nth-child(2)]:pt-0 pt-6 md:pt-0">
      <h2 role="presentation" className="typography-text-base font-medium text-neutral-900 whitespace-nowrap p-4 md:py-1.5">
        {heading}
      </h2>
      <hr className="mb-3.5" />
      <ul>
        {items.map((item) => (
          <li key={item.title}>
            <SfListItem as="a" size="sm" role="none" href={item.link} className="typography-text-base md:typography-text-sm py-4 md:py-1.5">
              {item.title}
            </SfListItem>
          </li>
        ))}
      </ul>
    </div>
  ))}
  <div className="flex flex-col items-center justify-center overflow-hidden md:rounded-md bg-neutral-100 border-neutral-300 grow">
    <img src={bannerDetails.image} alt={bannerDetails.title} className="object-contain" />
    <p className="px-4 mt-4 mb-4 font-medium text-center typography-text-base">
      {bannerDetails.title}
    </p>
  </div>
  <SfButton
    square
    size="sm"
    variant="tertiary"
    aria-label="Close navigation menu"
    onClick={close}
    className="hidden md:block md:absolute md:right-0 hover:bg-white active:bg-white"
  >
    <SfIconClose className="text-neutral-500" />
  </SfButton>
</SfDrawer>
```

--------------------------------

### Vue useDropdown Hook Example

Source: https://docs.storefrontui.io/v2/vue/hooks/usedropdown

A minimal example demonstrating how to implement a floating dropdown menu using the useDropdown hook in Vue. It binds refs for the reference and floating elements and applies the returned positioning styles.

```vue
<script lang="ts" setup>
import { ref } from 'vue';
import { useDropdown, SfButton } from '@storefront-ui/vue';

const isOpen = ref(false);

const { referenceRef, floatingRef, style } = useDropdown({ isOpen, onClose: () => isOpen.value = false });
</script>

<template>
  <div ref="referenceRef" class="w-max">
    <SfButton @click="isOpen = !isOpen">Toggle</SfButton>
    <ul v-if="isOpen" ref="floatingRef" :style="style" class="absolute p-2 w-max rounded bg-gray-100">
      <li>More</li>
      <li>About</li>
      <li>Settings</li>
    </ul>
  </div>
</template>

```

--------------------------------

### Basic SfModal Usage with useDisclosure in React

Source: https://docs.storefrontui.io/v2/react/components/modal

Demonstrates the basic implementation of SfModal using the useDisclosure hook for managing visibility. It shows how to open, close, and control the modal's state, along with accessibility attributes and event handlers. Dependencies include @storefront-ui/react.

```javascript
import { SfModal, SfButton, SfIconClose, useDisclosure } from '@storefront-ui/react';

export default function ModalDemo() {
  const { isOpen, open, close } = useDisclosure({ initialValue: false });

  return (
    <>
      <SfButton onClick={open}>To Checkout</SfButton>

      <SfModal
        open={isOpen}
        onClose={close}
        className="max-w-[90%] md:max-w-lg"
        as="section"
        role="alertdialog"
        aria-labelledby="promoModalTitle"
        aria-describedby="promoModalDesc"
      >
        <header>
          <SfButton square variant="tertiary" className="absolute right-2 top-2" onClick={close}>
            <SfIconClose />
          </SfButton>
          <h3 id="promoModalTitle" className="font-bold typography-headline-4 md:typography-headline-3">
            You might miss out on great deals
          </h3>
        </header>
        <p id="promoModalDesc" className="mt-2">
          There are special offers for some of the items on your wishlist. Do you want to see these deals before
          proceeding to checkout page?
        </p>
        <footer className="flex justify-end gap-4 mt-4">
          <SfButton variant="secondary" onClick={close}>
            Skip
          </SfButton>
          <SfButton onClick={close}>Yes!</SfButton>
        </footer>
      </SfModal>
    </>
  );
}
```

--------------------------------

### Apply Typography Classes in HTML

Source: https://docs.storefrontui.io/v2/customization/typography

Shows practical examples of using the generated typography utility classes within HTML templates. These classes, prefixed with `typography-`, apply predefined font styles and line heights.

```html
<h2 class="typography-headline-2">Specifications</h2>
<h3 class="typography-headline-3">Fabric Content</h3>
<p class="typography-text-lg">Cotton blend</p>
<h3 class="typography-headline-2">Sleeve Length Style</h3>
<p class="typography-text-lg">Short sleeve</p>
```

--------------------------------

### SfScrollable: Hide Scrollbar Example

Source: https://docs.storefrontui.io/v2/react/components/scrollable

This example demonstrates how to configure the SfScrollable component to display content without a visible scrollbar. It utilizes CSS classes to hide scrollbar elements across different browsers. This component is part of the '@storefront-ui/react' package.

```jsx
import { SfScrollable } from '@storefront-ui/react';

export default function ScrollableHideScrollbar() {
  return (
    <SfScrollable className="items-center w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
      {Array.from({ length: 20 }, (_, i) => (
        <div
          key={i}
          className="flex items-center justify-center text-gray-500 border border-dashed w-36 h-36 shrink-0 bg-neutral-100 border-negative-300"
        >
          {i + 1}
        </div>
      ))}
    </SfScrollable>
  );
}
```

--------------------------------

### SfScrollable: Snap to Center Example

Source: https://docs.storefrontui.io/v2/react/components/scrollable

This example shows how to configure SfScrollable for center snapping during drag operations. It applies Tailwind CSS classes for snap behavior and centers each item within the scrollable area. The 'drag' prop is enabled for interactive dragging.

```jsx
import { SfScrollable } from '@storefront-ui/react';

export default function ScrollableDragSnap() {
  return (
    <SfScrollable className="items-center w-full snap-x snap-mandatory" drag>
      {Array.from({ length: 20 }, (_, i) => (
        <div
          key={i}
          className="flex items-center justify-center text-gray-500 border border-dashed w-36 h-36 shrink-0 bg-neutral-100 border-negative-300 snap-center"
        >
          {i + 1}
        </div>
      ))}
    </SfScrollable>
  );
}
```

--------------------------------

### TypeScript Product Interface and Mock Data

Source: https://docs.storefrontui.io/v2/vue/blocks/search

Defines the structure for a product with an ID, name, and category. It also includes a constant array `mockProducts` containing sample product data, suitable for testing or demonstration purposes.

```typescript
interface Product {
  id: string;
  name: string;
  category: string;
}
const mockProducts: Product[] = [
  { id: 'ip-14', name: 'iPhone 14', category: 'Smartphones' },
  { id: 'ip-14-pro', name: 'iPhone 14 Pro', category: 'Smartphones' },
  { id: 'ip-14-pro-max', name: 'iPhone 14 Pro Max', category: 'Smartphones' },
  { id: 'ip-14-plus', name: 'iPhone 14 Plus', category: 'Smartphones' },
  { id: 'ip-13', name: 'iPhone 13', category: 'Smartphones' },
  { id: 'ip-13-mini', name: 'iPhone 13 mini', category: 'Smartphones' },
  { id: 'ip-12', name: 'iPhone 12', category: 'Smartphones' },
  { id: 'ip-11', name: 'iPhone 11', category: 'Smartphones' },
  { id: 'mb-air', name: 'MacBook Air', category: 'Laptops' },
  { id: 'mb-pro-13', name: 'MacBook Pro 13"', category: 'Laptops' },
  { id: 'mb-pro-14', name: 'MacBook Pro 14"', category: 'Laptops' },
  { id: 'mb-pro-16', name: 'MacBook Pro 16"', category: 'Laptops' },
];
```

--------------------------------

### Multiple Vertical Displays Example (React)

Source: https://docs.storefrontui.io/v2/react/blocks/banners

Demonstrates how to create and render multiple vertical display components. It utilizes React and the '@storefront-ui/react' library to manage data and render UI elements. The component maps over an array of display details to generate individual display cards, each with customizable text, images, and background colors. It handles responsive design through Tailwind CSS classes and conditional styling for layout reversal.

```jsx
import { SfButton } from '@storefront-ui/react';
import classNames from 'classnames';

const displayDetails = [
  {
    title: 'Pack it Up',
    subtitle: 'Be active',
    description: 'Explore the great outdoors with our backpacks',
    callToAction: 'Discover now',
    image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display-2.png',
    backgroundColor: 'bg-warning-200',
    reverse: false,
  },
  {
    title: 'Sunny Days Ahead',
    subtitle: 'Be inspired',
    description: 'Step out in style with our sunglasses collection',
    callToAction: 'Discover now',
    image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display.png',
    backgroundColor: 'bg-negative-200',
    reverse: true,
  },

  {
    title: 'Pack it Up',
    subtitle: 'Be active',
    description: 'Explore the great outdoors with our backpacks',
    callToAction: 'Discover now',
    image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display-2.png',
    backgroundColor: 'bg-warning-200',
    reverse: true,
  },
  {
    title: 'Sunny Days Ahead',
    subtitle: 'Be inspired',
    description: 'Step out in style with our sunglasses collection',
    callToAction: 'Discover now',
    image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display.png',
    backgroundColor: 'bg-negative-200',
    reverse: false,
  },
];
export default function DisplayVerticalMultiple() {
  return (
    <div className="flex flex-col gap-6 md:flex-row">
      <div className="flex flex-col gap-6 md:flex-row">
        {displayDetails.map(
          ({ title, subtitle, description, callToAction, image, backgroundColor, reverse }, index) => (
            <div
              key={`${title}-${index}`}
              className={classNames(
                `relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor}`,
                { 'flex-col-reverse': reverse },
              )}
            >
              <a
                className="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
                aria-label={title}
                href="#"
              />
              <div className="flex flex-col items-center p-4 text-center md:p-10">
                <p className="mb-2 font-bold tracking-widest uppercase typography-headline-6">{subtitle}</p>
                <p className="mb-4 font-bold typography-display-2">{title}</p>
                <p className="mb-4 typography-text-lg">{description}</p>
                <SfButton className="font-semibold !bg-neutral-900">{callToAction}</SfButton>
              </div>
              <div className="flex items-center w-full">
                <img src={image} alt={title} className="w-full" />
              </div>
            </div>
          ),
        )}
      </div>
    </div>
  );
}
```

--------------------------------

### Vue Basic Search with Autocomplete

Source: https://docs.storefrontui.io/v2/vue/blocks/search

Implements a search bar with an autocomplete dropdown using Vue.js and Storefront UI components. It handles user input, fetches suggestions (mocked in this example), and manages the dropdown's visibility and focus. Dependencies include @storefront-ui/vue and @vueuse/core.

```html
<template>
  <form ref="referenceRef" role="search" class="relative" @submit.prevent="submit">
    <SfInput
      ref="inputRef"
      v-model="inputModel"
      aria-label="Search"
      placeholder="Search 'MacBook' or 'iPhone'வுகளை..."
      @focus="open"
      @keydown="handleInputKeyDown"
    >
      <template #prefix><SfIconSearch /></template>
      <template #suffix>
        <button
          v-if="inputModel"
          type="button"
          aria-label="Reset search"
          class="flex rounded-md focus-visible:outline focus-visible:outline-offset"
          @click="reset"
        >
          <SfIconCancel /></button
      ></template>
    </SfInput>
    <div v-if="isOpen" ref="floatingRef" :style="style" class="left-0 right-0">
      <div
        v-if="isLoadingSnippets"
        class="flex items-center justify-center w-full h-20 py-2 bg-white border border-solid rounded-md border-neutral-100 drop-shadow-md"
      >
        <SfLoaderCircular />
      </div>
      <ul
        v-else-if="snippets.length > 0"
        ref="dropdownListRef"
        class="py-2 bg-white border border-solid rounded-md border-neutral-100 drop-shadow-md"
      >
        <li v-for="{ highlight, rest, product } in snippets" :key="product.id">
          <SfListItem
            tag="button"
            type="button"
            class="flex justify-start"
            @click="() => selectValue(product.name)"
            @keydown.enter.space.prevent="selectValue(product.name)"
          >
            <p class="text-left">
              <span>{{ highlight }}</span>
              <span class="font-medium">{{ rest }}</span>
            </p>
          </SfListItem>
        </li>
      </ul>
    </div>
  </form>
</template>

<script lang="ts" setup>
import { type Ref, ref, watch } from 'vue';
import { offset } from '@floating-ui/vue';
import { watchDebounced } from '@vueuse/shared';
import { unrefElement } from '@vueuse/core';
import {
  SfIconCancel,
  SfIconSearch,
  SfInput,
  SfListItem,
  SfLoaderCircular,
  useDisclosure,
  useDropdown,
  useTrapFocus,
} from '@storefront-ui/vue';

const inputModel = ref('');
const inputRef = ref();
const dropdownListRef = ref();
const isLoadingSnippets = ref(false);
const snippets = ref<{ highlight: string; rest: string; product: Product }[]>([]);
const { isOpen, close, open } = useDisclosure();
const { referenceRef, floatingRef, style } = useDropdown({
  isOpen,
  onClose: close,
  placement: 'bottom-start',
  middleware: [offset(4)],
});
const { focusables: focusableElements } = useTrapFocus(dropdownListRef as Ref<HTMLElement>, {
  trapTabs: false,
  arrowKeysUpDown: true,
  activeState: isOpen,
  initialFocus: false,
});

const submit = () => {
  close();
  alert(`Search for phrase: ${inputModel.value}`);
};

const focusInput = () => {
  const inputEl = unrefElement(inputRef)?.querySelector('input');
  inputEl?.focus();
};

const reset = () => {
  inputModel.value = '';
  snippets.value = [];
  close();
  focusInput();
};

const selectValue = (phrase: string) => {
  inputModel.value = phrase;
  close();
  focusInput();
};

const handleInputKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'Escape') reset();
  if (event.key === 'ArrowUp') {
    open();
    if (isOpen && focusableElements.value.length > 0) {
      focusableElements.value[focusableElements.value.length - 1].focus();
    }
  }
  if (event.key === 'ArrowDown') {
    open();
    if (isOpen && focusableElements.value.length > 0) {
      focusableElements.value[0].focus();
    }
  }
};

watch(inputModel, () => {
  if (inputModel.value === '') {
    reset();
  }
});

watchDebounced(
  inputModel,
  () => {
    if (inputModel.value) {
      const getSnippets = async () => {
        open();
        isLoadingSnippets.value = true;
        try {
          const data = await mockAutocompleteRequest(inputModel.value);
          snippets.value = data;
        } catch (error) {
          close();
          console.error(error);
        }
        isLoadingSnippets.value = false;
      };

      getSnippets();
    }
  },
  { debounce: 500 },
);

interface Product {
  id: string;
  name: string;
}
const mockProducts: Product[] = [
  { id: 'ip-14', name: 'iPhone 14' },
  { id: 'ip-14-pro', name: 'iPhone 14 Pro' },
  { id: 'ip-14-pro-max', name: 'iPhone 14 Pro Max' },
  { id: 'ip-14-plus', name: 'iPhone 14 Plus' },
  { id: 'ip-13', name: 'iPhone 13' },
  { id: 'ip-13-mini', name: 'iPhone 13 mini' },
  { id: 'ip-12', name: 'iPhone 12' },
  { id: 'ip-11', name: 'iPhone 11' },
  { id: 'mb-air', name: 'MacBook Air' },
  { id: 'mb-pro-13', name: 'MacBook Pro 13"' },
  { id: 'mb-pro-14', name: 'MacBook Pro 14"' },
  { id: 'mb-pro-16', name: 'MacBook Pro 16"' },
];

// Mock function to simulate an API call for autocomplete suggestions
const mockAutocompleteRequest = async (query: string) => {
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network delay
  const lowerCaseQuery = query.toLowerCase();
  return mockProducts
    .filter(({ name }) => name.toLowerCase().includes(lowerCaseQuery))
    .map(({ id, name }) => {
      const highlightIndex = name.toLowerCase().indexOf(lowerCaseQuery);
      return {
        highlight: name.substring(0, highlightIndex),
        rest: name.substring(highlightIndex, highlightIndex + query.length),
        product: { id, name },
      };
    });
};
</script>

```

--------------------------------

### SfScrollable: Scroll by One Item Example

Source: https://docs.storefrontui.io/v2/react/components/scrollable

This example demonstrates how to make SfScrollable navigate one item at a time using the 'prev' and 'next' buttons. It manages the active item state with `useState` and dynamically updates button disabled states based on the current index. Accessibility is enhanced with `isActiveIndexCentered`.

```jsx
import { useState } from 'react';
import classNames from 'classnames';
import { SfScrollable } from '@storefront-ui/react';

export default function ScrollableMoveByOne() {
  const itemsLength = 20;
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <SfScrollable
      wrapperClassName="min-w-0"
      className="items-center w-full snap-x snap-mandatory"
      activeIndex={activeIndex}
      prevDisabled={activeIndex === 0}
      nextDisabled={activeIndex === itemsLength - 1}
      isActiveIndexCentered
      onPrev={({ preventDefault }) => {
        preventDefault();
        setActiveIndex((currentValue) => currentValue - 1);
      }}
      onNext={({ preventDefault }) => {
        preventDefault();
        setActiveIndex((currentValue) => currentValue + 1);
      }}
    >
      {Array.from({ length: itemsLength }, (_, i) => (
        <div
          key={i}
          className={classNames(
            'flex items-center justify-center text-gray-500 border w-36 h-36 shrink-0 border-negative-300 snap-start snap-always',
            i === activeIndex ? 'border-solid bg-neutral-200' : 'border-dashed bg-neutral-100',
          )}
        >
          {i + 1}
        </div>
      ))}
    </SfScrollable>
  );
}
```

--------------------------------

### SfChip: Create a List of Chips with inputProps

Source: https://docs.storefrontui.io/v2/react/components/chip

Illustrates creating a list of selectable chips by mapping over data and passing `inputProps` to configure the underlying hidden checkbox input. This is useful for multi-select scenarios.

```jsx
import { SfChip, SfThumbnail } from '@storefront-ui/react';
import classNames from 'classnames';

const chipValues = [
  { label: 'Red', value: 'red' },
  { label: 'Blue', value: 'blue' },
  { label: 'Gray', value: 'gray' },
];

export default function ChipList() {
  return (
    <ul className="flex flex-wrap gap-4 sm:flex-row">
      {chipValues.map(({ label, value }) => (
        <li key={value}>
          <SfChip
            className="mr-2"
            slotPrefix={
              <SfThumbnail
                className={classNames({
                  'bg-red-500': value === 'red',
                  'bg-blue-500': value === 'blue',
                  'bg-gray-500': value === 'gray',
                })}
              />
            }
          >
            {label}
          </SfChip>
        </li>
      ))}
    </ul>
  );
}
```
Tokens:
Raw