diff --git a/.changeset/beige-coins-argue.md b/.changeset/beige-coins-argue.md
new file mode 100644
index 0000000000..2a33ed620b
--- /dev/null
+++ b/.changeset/beige-coins-argue.md
@@ -0,0 +1,5 @@
+---
+'@storefront-ui/vue': patch
+---
+
+fix typings of SfScrollable drag prop
diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/ProductSlider.png b/apps/docs/components/.vuepress/public/thumbnails/blocks/ProductSlider.png
new file mode 100644
index 0000000000..a7441293c2
Binary files /dev/null and b/apps/docs/components/.vuepress/public/thumbnails/blocks/ProductSlider.png differ
diff --git a/apps/docs/components/blocks/ProductSlider.md b/apps/docs/components/blocks/ProductSlider.md
new file mode 100644
index 0000000000..7ae644084b
--- /dev/null
+++ b/apps/docs/components/blocks/ProductSlider.md
@@ -0,0 +1,34 @@
+---
+layout: DefaultLayout
+hideBreadcrumbs: true
+description: The ProductSlider allows for scrollable content with product cards, providing a visually appealing and interactive way to showcase products.
+hideToc: true
+---
+# ProductSlider
+
+::: warning This is an experimental block
+This block has been built on top of experimental base component. The API and structure of it might change based on user feedback.
+:::
+
+The example allows for scrollable content with product cards, providing a visually appealing and interactive way to showcase products.
+
+## Basic
+
+Users can easily navigate through the cards by swiping or using navigation arrows, making it convenient to explore a collection of products within a limited space. The component is responsive and adapts to different devices, ensuring a consistent and enjoyable browsing experience.
+
+For further customization options, please refer to our documentation on the [Scrollable](/<!-- vue -->vue<!-- end vue --><!-- react -->react<!-- end react -->/components/scrollable.html) component and [Product Card](/<!-- vue -->vue<!-- end vue --><!-- react -->react<!-- end react -->/blocks/ProductCard.html) block pages.
+
+<Showcase showcase-name="ProductSlider/Basic" style="min-height:380px">
+
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/ProductSlider/Basic.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/ProductSlider/Basic.tsx#source
+<!-- end react -->
+
+</Showcase>
+
+## Accessibility notes
+
+The ProductSlider supports the use of the keyboard (Tab/alt+Tab) to navigate through images.
diff --git a/apps/docs/components/blocks/Review.md b/apps/docs/components/blocks/Review.md
index 793dcd9013..c72a5e3336 100644
--- a/apps/docs/components/blocks/Review.md
+++ b/apps/docs/components/blocks/Review.md
@@ -10,7 +10,7 @@ hideToc: true
 
 ## With Avatar
 
-Basic Review usage with avatar and [Rating](/vue/components/rating.html) base component.
+Basic Review usage with avatar and [Rating](/<!-- vue -->vue<!-- end vue --><!-- react -->react<!-- end react -->/components/rating.html) base component.
 
 <Showcase showcase-name="Review/WithAvatar" style="min-height:220px">
 
diff --git a/apps/preview/next/pages/showcases/ProductSlider/Basic.tsx b/apps/preview/next/pages/showcases/ProductSlider/Basic.tsx
new file mode 100644
index 0000000000..5950c3dc74
--- /dev/null
+++ b/apps/preview/next/pages/showcases/ProductSlider/Basic.tsx
@@ -0,0 +1,110 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable jsx-a11y/anchor-has-content */
+import { ShowcasePageLayout } from '../../showcases';
+
+// #region source
+import {
+  SfLink,
+  SfButton,
+  SfIconFavorite,
+  SfIconChevronLeft,
+  SfIconChevronRight,
+  SfScrollable,
+} from '@storefront-ui/react';
+import classNames from 'classnames';
+
+const products = Array.from(Array(10), (_, i) => ({
+  id: i.toString(),
+  name: 'Athletic mens walking sneakers',
+  price: '$2,345.99',
+  img: {
+    src: 'http://localhost:3100/@assets/sneakers.png',
+    alt: 'White sneaker shoe',
+  },
+}));
+
+function ButtonPrev({ disabled, ...attributes }: { disabled?: boolean }) {
+  return (
+    <SfButton
+      className={classNames('absolute !rounded-full z-10 left-4 bg-white hidden md:block', {
+        '!hidden': disabled,
+      })}
+      variant="secondary"
+      size="lg"
+      square
+      {...attributes}
+    >
+      <SfIconChevronLeft />
+    </SfButton>
+  );
+}
+
+ButtonPrev.defaultProps = { disabled: false };
+
+function ButtonNext({ disabled, ...attributes }: { disabled?: boolean }) {
+  return (
+    <SfButton
+      className={classNames('absolute !rounded-full z-10 right-4 bg-white hidden md:block', {
+        '!hidden': disabled,
+      })}
+      variant="secondary"
+      size="lg"
+      square
+      {...attributes}
+    >
+      <SfIconChevronRight />
+    </SfButton>
+  );
+}
+
+ButtonNext.defaultProps = { disabled: false };
+
+export default function GalleryVertical() {
+  return (
+    <SfScrollable
+      className="m-auto items-center w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+      buttons-placement="floating"
+      drag
+      slotPreviousButton={<ButtonPrev />}
+      slotNextButton={<ButtonNext />}
+    >
+      {products.map(({ id, name, price, img }) => (
+        <div
+          key={id}
+          className="first:ms-auto last:me-auto border border-neutral-200 shrink-0 rounded-md hover:shadow-lg w-[148px] lg:w-[192px]"
+        >
+          <div className="relative">
+            <SfLink href="#">
+              <img
+                src={img.src}
+                alt={img.alt}
+                className="block object-cover h-auto rounded-md aspect-square lg:w-[190px] lg:h-[190px]"
+                width="146"
+                height="146"
+              />
+            </SfLink>
+            <SfButton
+              type="button"
+              variant="tertiary"
+              size="sm"
+              square
+              className="absolute bottom-0 right-0 mr-2 mb-2 bg-white border border-neutral-200 !rounded-full"
+              aria-label="Add to wishlist"
+            >
+              <SfIconFavorite size="sm" />
+            </SfButton>
+          </div>
+          <div className="p-2 border-t border-neutral-200 typography-text-sm">
+            <SfLink href="#" variant="secondary" className="no-underline">
+              {name}
+            </SfLink>
+            <span className="block mt-2 font-bold">{price}</span>
+          </div>
+        </div>
+      ))}
+    </SfScrollable>
+  );
+}
+// #endregion source
+
+GalleryVertical.getLayout = ShowcasePageLayout;
diff --git a/apps/preview/nuxt/pages/showcases/ProductSlider/Basic.vue b/apps/preview/nuxt/pages/showcases/ProductSlider/Basic.vue
new file mode 100644
index 0000000000..3b0d9dba10
--- /dev/null
+++ b/apps/preview/nuxt/pages/showcases/ProductSlider/Basic.vue
@@ -0,0 +1,84 @@
+<template>
+  <SfScrollable
+    class="m-auto items-center w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+    buttons-placement="floating"
+    drag
+  >
+    <template #previousButton="defaultProps">
+      <SfButton
+        v-bind="defaultProps"
+        class="absolute !rounded-full z-10 left-4 bg-white hidden md:block"
+        :class="{ '!hidden': defaultProps.disabled }"
+        variant="secondary"
+        size="lg"
+        square
+      >
+        <SfIconChevronLeft />
+      </SfButton>
+    </template>
+    <div
+      v-for="{ id, name, price, img } in products"
+      :key="id"
+      class="first:ms-auto last:me-auto border border-neutral-200 shrink-0 rounded-md hover:shadow-lg w-[148px] lg:w-[192px]"
+    >
+      <div class="relative">
+        <SfLink href="#">
+          <img
+            :src="img.src"
+            :alt="img.alt"
+            class="block object-cover h-auto rounded-md aspect-square lg:w-[190px] lg:h-[190px]"
+            width="146"
+            height="146"
+          />
+        </SfLink>
+        <SfButton
+          type="button"
+          variant="tertiary"
+          size="sm"
+          square
+          class="absolute bottom-0 right-0 mr-2 mb-2 bg-white border border-neutral-200 !rounded-full"
+          aria-label="Add to wishlist"
+        >
+          <SfIconFavorite size="sm" />
+        </SfButton>
+      </div>
+      <div class="p-2 border-t border-neutral-200 typography-text-sm">
+        <SfLink href="#" variant="secondary" class="no-underline">{{ name }}</SfLink>
+        <span class="block mt-2 font-bold">{{ price }}</span>
+      </div>
+    </div>
+    <template #nextButton="defaultProps">
+      <SfButton
+        v-bind="defaultProps"
+        class="absolute !rounded-full z-10 right-4 bg-white hidden md:block"
+        :class="{ '!hidden': defaultProps.disabled }"
+        variant="secondary"
+        size="lg"
+        square
+      >
+        <SfIconChevronRight />
+      </SfButton>
+    </template>
+  </SfScrollable>
+</template>
+
+<script lang="ts" setup>
+import {
+  SfLink,
+  SfButton,
+  SfIconFavorite,
+  SfIconChevronLeft,
+  SfIconChevronRight,
+  SfScrollable,
+} from '@storefront-ui/vue';
+
+const products = Array.from(Array(10), (_, i) => ({
+  id: i.toString(),
+  name: 'Athletic mens walking sneakers',
+  price: '$2,345.99',
+  img: {
+    src: 'http://localhost:3100/@assets/sneakers.png',
+    alt: 'White sneaker shoe',
+  },
+}));
+</script>
diff --git a/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue b/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue
index 3c8a3ed219..22d4c56dcc 100644
--- a/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue
+++ b/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue
@@ -44,7 +44,7 @@ const props = defineProps({
     default: undefined,
   },
   drag: {
-    type: [Object || Boolean] as PropType<ScrollableOptions['drag']>,
+    type: [Object, Boolean] as PropType<ScrollableOptions['drag']>,
     default: undefined,
   },
   prevDisabled: {