diff --git a/apps/docs/components/.vuepress/components/Showcase.vue b/apps/docs/components/.vuepress/components/Showcase.vue
index cc27ddbe66..6b38459d08 100644
--- a/apps/docs/components/.vuepress/components/Showcase.vue
+++ b/apps/docs/components/.vuepress/components/Showcase.vue
@@ -9,11 +9,19 @@
         Preview
       </button>
       <button
+        v-if="$slots.usage"
         @click="tab = 2"
         class="px-3 py-2 border-b-2 dark:border-zinc-700"
         :class="[tab === 2 ? 'text-black dark:text-white border-green dark:border-green' : '']"
       >
-        Code
+        Source
+      </button>
+      <button
+        @click="tab = $slots.usage ? 3 : 2"
+        class="px-3 py-2 border-b-2 dark:border-zinc-700 bg-green text-white"
+        :class="[tab === ($slots.usage ? 3 : 2) ? 'border-green dark:border-green' : 'opacity-80']"
+      >
+        Block Code
       </button>
     </div>
     <div ref="wrapperRef" class="relative flex-1 flex flex-col">
@@ -25,12 +33,24 @@
         @touchstart="eventDownListener"
       >
         <div class="absolute inset-0" v-show="isHandlerDragging"></div>
-        <Generate :showcase-path="showcaseName" :allow="allow" class="flex-grow rounded" style="margin-top: 0" :no-paddings="noPaddings" :no-scale="noScale"/>
+        <Generate
+          :showcase-path="showcaseName"
+          :allow="allow"
+          class="flex-grow rounded"
+          style="margin-top: 0"
+          :no-paddings="noPaddings"
+          :no-scale="noScale"
+        />
         <div ref="handlerRef" class="select-none rounded-tr items-center hidden sm:flex" style="cursor: ew-resize">
           <iconify-icon icon="akar-icons:drag-vertical" class="pointer-events-none" />
         </div>
       </div>
-      <div v-show="tab === 2 && showSource" class="relative">
+      <div v-show="tab === 2" class="relative">
+        <SourceCode>
+          <slot name="usage" />
+        </SourceCode>
+      </div>
+      <div v-show="showSource && tab === ($slots.usage ? 3 : 2)" class="relative">
         <SourceCode>
           <slot />
         </SourceCode>
@@ -48,11 +68,11 @@ export default {
     },
     noPaddings: {
       type: Boolean,
-      default: false
+      default: false,
     },
     noScale: {
       type: Boolean,
-      default: false
+      default: false,
     },
     allow: {
       type: String,
@@ -74,7 +94,7 @@ export default {
     document.addEventListener('mousemove', this.eventMoveListener);
     document.addEventListener('touchmove', this.eventMoveListener);
     document.addEventListener('mouseup', this.eventUpListener);
-    document.addEventListener('touchup', this.eventUpListener)
+    document.addEventListener('touchup', this.eventUpListener);
   },
   unmounted() {
     document.removeEventListener('mousemove', this.eventMoveListener);
diff --git a/apps/docs/components/blocks/Alert.md b/apps/docs/components/blocks/Alert.md
index aace17a73b..8aa6172a99 100644
--- a/apps/docs/components/blocks/Alert.md
+++ b/apps/docs/components/blocks/Alert.md
@@ -1,7 +1,7 @@
 ---
 layout: DefaultLayout
 hideBreadcrumbs: true
-description: Alert is a notification that keeps people informed of the status of the system and which may or not require the user respond.
+description: Alert is a notification that keeps people informed of the status of the system and which may or not require the user response.
 hideToc: true
 ---
 # Alert
@@ -10,71 +10,108 @@ hideToc: true
 
 ## Alert neutral
 
-Simple version of alert that has neutral grey color.
+A simple version of the alert that has a neutral grey color.
 
-<Showcase showcase-name="Alert/AlertNeutral" >
+<Showcase showcase-name="Alert/AlertNeutral" style="min-height:210px">
 
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertNeutral.tsx#source
 <!-- end react -->
+:::
 
-</Showcase>
-
-## Alert positive
-
-Green color indicates that an action went successful.
-
-<Showcase showcase-name="Alert/AlertPositive" >
 <!-- vue -->
-<<<../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
 <!-- end vue -->
 <!-- react -->
-<<<../../preview/next/pages/showcases/Alert/AlertPositive.tsx#source
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
 <!-- end react -->
+
 </Showcase>
 
 ## Alert secondary
 
 This type is informative just like neutral except that its palette is more noticeable.
 
-<Showcase showcase-name="Alert/AlertSecondary" >
+<Showcase showcase-name="Alert/AlertSecondary" style="min-height:210px">
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertSecondary.tsx#source
 <!-- end react -->
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
+<!-- end react -->
 </Showcase>
 
-## Alert warning
+## Alert positive
 
-Alert can be more descriptive and its content can be splitted into title and description.
+A green color indicates that an action was successful.
 
-<Showcase showcase-name="Alert/AlertWarning" >
+<Showcase showcase-name="Alert/AlertPositive" style="min-height:230px">
+::: slot usage
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/AlertPositive.tsx#source
+<!-- end react -->
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
+<!-- end react -->
+</Showcase>
 
+## Alert warning
+
+Alert can be more descriptive and its content can be split into title and description.
+
+<Showcase showcase-name="Alert/AlertWarning" style="min-height:280px">
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertWarning.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertWarning.tsx#source
 <!-- end react -->
-
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
+<!-- end react -->
 </Showcase>
 
 ## Alert error
 
 This type is usually used for information displayed when an important problem occurs.
 
-<Showcase showcase-name="Alert/AlertError" >
-
+<Showcase showcase-name="Alert/AlertError" style="min-height:230px">
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertError.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertError.tsx#source
 <!-- end react -->
-
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
+<!-- end react -->
 </Showcase>
diff --git a/apps/docs/components/react/blocks.md b/apps/docs/components/react/blocks.md
index a66e5b57a1..8e5f9f4d05 100644
--- a/apps/docs/components/react/blocks.md
+++ b/apps/docs/components/react/blocks.md
@@ -13,4 +13,8 @@ hideToc: true
 Fully accessible UI blocks, designed to integrate beautifully with Tailwind CSS and Vue.
 :::
 
+::: tip
+Some blocks contain "Block Code" tab with our proposition of a reusable component code. Copy it over into your project to use the rest of the examples for such a block.
+:::
+
 <ComponentList framework="react" type="blocks" hide-description/>
diff --git a/apps/docs/components/vue/blocks.md b/apps/docs/components/vue/blocks.md
index 457213e37f..5d28537fcc 100644
--- a/apps/docs/components/vue/blocks.md
+++ b/apps/docs/components/vue/blocks.md
@@ -13,4 +13,8 @@ hideToc: true
 Fully accessible UI blocks, designed to integrate beautifully with Tailwind CSS and Vue.
 :::
 
+::: tip
+Some blocks contain "Block Code" tab with our proposition of a reusable component code. Copy it over into your project to use the rest of the examples for such a block.
+:::
+
 <ComponentList framework="vue"  type="blocks" hide-description/>
diff --git a/apps/preview/next/pages/api/getShowcases.ts b/apps/preview/next/pages/api/getShowcases.ts
index 75833f051d..94b39a4bdc 100644
--- a/apps/preview/next/pages/api/getShowcases.ts
+++ b/apps/preview/next/pages/api/getShowcases.ts
@@ -1,5 +1,6 @@
 import path from 'path';
 import { NextApiRequest, NextApiResponse } from 'next';
+import { showcasesFilter } from '@storefront-ui/preview-shared/utils/showcases.utils';
 
 import { promise as glob } from 'glob-promise';
 
@@ -8,5 +9,5 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     cwd: path.join(process.cwd(), 'pages', 'showcases'),
   });
 
-  res.status(200).json(fileContents);
+  res.status(200).json(showcasesFilter({ files: fileContents, ext: '.tsx' }));
 }
diff --git a/apps/preview/next/pages/showcases/Alert/Alert.tsx b/apps/preview/next/pages/showcases/Alert/Alert.tsx
new file mode 100644
index 0000000000..d3f96aa488
--- /dev/null
+++ b/apps/preview/next/pages/showcases/Alert/Alert.tsx
@@ -0,0 +1,45 @@
+// #region source
+import type { PropsWithStyle } from '@storefront-ui/react';
+import { type PropsWithChildren, forwardRef } from 'react';
+import classNames from 'classnames';
+
+const sizeClasses = {
+  sm: 'typography-text-sm',
+  base: 'typography-text-base',
+};
+const variantClasses = {
+  primary: 'border-primary-200 bg-primary-100',
+  secondary: 'border-secondary-200 bg-secondary-100',
+  positive: 'border-positive-200 bg-positive-100',
+  warning: 'border-warning-200 bg-warning-100',
+  negative: 'border-negative-200 bg-negative-100',
+  neutral: 'border-neutral-200 bg-neutral-100',
+};
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithStyle, PropsWithChildren {
+  size?: keyof typeof sizeClasses;
+  variant?: keyof typeof variantClasses;
+}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const { className, size = 'base', variant = 'neutral', children, ...attributes } = props;
+
+  return (
+    <div
+      ref={ref}
+      role="alert"
+      className={classNames([
+        'border inline-flex items-start py-1 ps-4 pe-2 gap-2 rounded-md shadow-md',
+        sizeClasses[size],
+        variantClasses[variant],
+        className,
+      ])}
+      {...attributes}
+    >
+      {children}
+    </div>
+  );
+});
+
+export default Alert;
+// #endregion source
diff --git a/apps/preview/next/pages/showcases/Alert/AlertError.tsx b/apps/preview/next/pages/showcases/Alert/AlertError.tsx
index 1dae9ba836..be0d781c2b 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertError.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertError.tsx
@@ -1,28 +1,46 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
-import { SfIconClose } from '@storefront-ui/react';
+import { SfIconError, SfIconClose } from '@storefront-ui/react';
+import Alert from './Alert';
 
 export default function AlertError() {
   return (
-    <div
-      role="alert"
-      className="flex items-start md:items-center max-w-[600px] shadow-md bg-negative-100 pr-2 pl-4 ring-1 ring-negative-300 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <p className="py-2 mr-2">The password change was failed.</p>
-      <button
-        type="button"
-        className="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
-      >
-        Retry
-      </button>
-      <button
-        type="button"
-        className="p-1.5 md:p-2 ml-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
-        aria-label="Close error alert"
-      >
-        <SfIconClose className="hidden md:block" />
-        <SfIconClose size="sm" className="block md:hidden" />
-      </button>
+    <div className="flex flex-col gap-4">
+      <Alert variant="negative" className="w-full max-w-[640px]">
+        <SfIconError className="my-2 text-negative-700 shrink-0" />
+        <p className="py-2">The password change was failed.</p>
+        <button
+          type="button"
+          className="ms-auto py-2 px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+        >
+          Retry
+        </button>
+        <button
+          type="button"
+          className="p-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+          aria-label="Close error alert"
+        >
+          <SfIconClose />
+        </button>
+      </Alert>
+
+      <Alert variant="negative" size="sm" className="w-full max-w-[320px]">
+        <SfIconError className="my-1.5 text-negative-700 shrink-0" size="sm" />
+        <p className="py-2">The password change was failed.</p>
+        <button
+          type="button"
+          className="ms-auto py-1.5 px-3 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+        >
+          Retry
+        </button>
+        <button
+          type="button"
+          className="p-1.5 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+          aria-label="Close error alert"
+        >
+          <SfIconClose size="sm" />
+        </button>
+      </Alert>
     </div>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx b/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx
index f268a2e497..ab493de11f 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx
@@ -1,13 +1,17 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
+import Alert from './Alert';
 
 export default function AlertNeutral() {
   return (
-    <div
-      role="alert"
-      className="bg-neutral-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-neutral-300 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <p className="py-2">Happy shopping!</p>
+    <div className="flex flex-col gap-4">
+      <Alert variant="neutral" className="w-full max-w-[640px]">
+        <p className="py-2">Happy shopping!</p>
+      </Alert>
+
+      <Alert variant="neutral" size="sm" className="w-full max-w-[320px]">
+        <p className="py-1.5">Happy shopping!</p>
+      </Alert>
     </div>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx b/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx
index 252e42b3c8..bc2c02f50e 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx
@@ -1,23 +1,34 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
 import { SfIconCheckCircle, SfIconClose } from '@storefront-ui/react';
+import Alert from './Alert';
 
 export default function AlertPositive() {
   return (
-    <div
-      role="alert"
-      className="flex items-start md:items-center max-w-[600px] shadow-md bg-positive-100 pr-2 pl-4 ring-1 ring-positive-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <SfIconCheckCircle className="my-2 mr-2 text-positive-700 shrink-0" />
-      <p className="py-2 mr-2">The product has been added to the cart.</p>
-      <button
-        type="button"
-        className="p-1.5 md:p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
-        aria-label="Close positive alert"
-      >
-        <SfIconClose className="hidden md:block" />
-        <SfIconClose size="sm" className="block md:hidden" />
-      </button>
+    <div className="flex flex-col gap-4">
+      <Alert variant="positive" className="w-full max-w-[640px]">
+        <SfIconCheckCircle className="my-2 text-positive-700 shrink-0" />
+        <p className="py-2">The product has been added to the cart.</p>
+        <button
+          type="button"
+          className="ms-auto p-2 rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+          aria-label="Close positive alert"
+        >
+          <SfIconClose />
+        </button>
+      </Alert>
+
+      <Alert variant="positive" className="w-full max-w-[320px]" size="sm">
+        <SfIconCheckCircle size="sm" className="my-1.5 text-positive-700 shrink-0" />
+        <p className="py-1.5">The product has been added to the cart.</p>
+        <button
+          type="button"
+          className="ms-auto p-1.5 rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+          aria-label="Close positive alert"
+        >
+          <SfIconClose size="sm" />
+        </button>
+      </Alert>
     </div>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx b/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx
index 2e34f6e421..11e91f1ebb 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx
@@ -1,15 +1,20 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
 import { SfIconInfo } from '@storefront-ui/react';
+import Alert from './Alert';
 
 export default function AlertSecondary() {
   return (
-    <div
-      role="alert"
-      className="flex items-center max-w-[600px] shadow-md bg-secondary-100 pr-2 pl-4 ring-1 ring-secondary-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <SfIconInfo className="mr-2 text-secondary-700 shrink-0" />
-      <p className="py-2">Your cart will soon be full.</p>
+    <div className="flex flex-col gap-4">
+      <Alert variant="secondary" className="w-full max-w-[640px]">
+        <SfIconInfo className="my-2 text-secondary-700 shrink-0" />
+        <p className="py-2">Your cart will soon be full.</p>
+      </Alert>
+
+      <Alert variant="secondary" size="sm" className="w-full max-w-[320px]">
+        <SfIconInfo size="sm" className="my-1.5 text-secondary-700 shrink-0" />
+        <p className="py-1.5">Your cart will soon be full.</p>
+      </Alert>
     </div>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx b/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx
index 85074fe029..b10a376603 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx
@@ -1,24 +1,38 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
 import { SfIconWarning } from '@storefront-ui/react';
+import Alert from './Alert';
 
 export default function AlertWarning() {
   return (
-    <div
-      role="alert"
-      className="flex items-start max-w-[600px] shadow-md bg-warning-100 pr-2 pl-4 ring-1 ring-warning-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <SfIconWarning className="mt-2 mr-2 text-warning-700 shrink-0" />
-      <div className="py-2 mr-2">
-        <p className="font-medium typography-text-base md:typography-text-lg">Your account</p>
-        <p>Your shipping details need to be updated.</p>
-      </div>
-      <button
-        type="button"
-        className="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
-      >
-        Update
-      </button>
+    <div className="flex flex-col gap-4">
+      <Alert variant="warning" className="w-full max-w-[640px]">
+        <SfIconWarning className="my-2 text-warning-700 shrink-0" />
+        <div className="py-2">
+          <p className="font-medium">Your account</p>
+          <p>Your shipping details need to be updated.</p>
+        </div>
+        <button
+          type="button"
+          className="ms-auto py-2 px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+        >
+          Update
+        </button>
+      </Alert>
+
+      <Alert variant="warning" size="sm" className="w-full max-w-[320px]">
+        <SfIconWarning size="sm" className="my-1.5 text-warning-700 shrink-0" />
+        <div className="py-1.5">
+          <p className="font-medium">Your account</p>
+          <p>Your shipping details need to be updated.</p>
+        </div>
+        <button
+          type="button"
+          className="ms-auto py-1.5 px-3 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+        >
+          Update
+        </button>
+      </Alert>
     </div>
   );
 }
diff --git a/apps/preview/nuxt/pages/showcases.vue b/apps/preview/nuxt/pages/showcases.vue
index 4e73df595a..3b54f94252 100644
--- a/apps/preview/nuxt/pages/showcases.vue
+++ b/apps/preview/nuxt/pages/showcases.vue
@@ -80,12 +80,16 @@ import {
 } from '@storefront-ui/vue';
 import { ref, watch, reactive, onBeforeMount } from 'vue';
 import { useControlsSearchParams } from '~/composables/utils/useControlsSearchParams';
+import { showcasesFilter } from '@storefront-ui/preview-shared/utils/showcases.utils';
 
 const { currentRoute } = useRouter();
 
 const REST_GROUP_NAME = 'Rest';
 const files = import.meta.glob('./showcases/**');
-const paths = Object.keys(files);
+const paths = showcasesFilter({
+  files: Object.keys(files),
+  ext: '.vue',
+});
 const groupItemHref = (groupName, showcaseName) => {
   return `/showcases/${groupName !== REST_GROUP_NAME ? `${groupName}/` : ''}${showcaseName}`;
 };
diff --git a/apps/preview/nuxt/pages/showcases/Alert/Alert.vue b/apps/preview/nuxt/pages/showcases/Alert/Alert.vue
new file mode 100644
index 0000000000..401d8ab4db
--- /dev/null
+++ b/apps/preview/nuxt/pages/showcases/Alert/Alert.vue
@@ -0,0 +1,42 @@
+<template>
+  <div
+    :class="[
+      'border inline-flex items-start py-1 ps-4 pe-2 gap-2 rounded-md shadow-md',
+      sizeClasses[size],
+      variantClasses[variant],
+    ]"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+const sizeClasses = {
+  sm: 'typography-text-sm',
+  base: 'typography-text-base',
+};
+const variantClasses = {
+  primary: 'border-primary-200 bg-primary-100',
+  secondary: 'border-secondary-200 bg-secondary-100',
+  positive: 'border-positive-200 bg-positive-100',
+  warning: 'border-warning-200 bg-warning-100',
+  negative: 'border-negative-200 bg-negative-100',
+  neutral: 'border-neutral-200 bg-neutral-100',
+};
+</script>
+
+<script setup lang="ts">
+import { type PropType } from 'vue';
+
+defineProps({
+  size: {
+    type: String as PropType<'sm' | 'base'>,
+    default: 'base',
+  },
+  variant: {
+    type: String as PropType<'primary' | 'secondary' | 'positive' | 'warning' | 'negative' | 'neutral'>,
+    default: 'neutral',
+  },
+});
+</script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue
index 634452941e..0accb8427f 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue
@@ -1,25 +1,44 @@
 <template>
-  <div
-    role="alert"
-    class="flex items-start md:items-center max-w-[600px] shadow-md bg-negative-100 pr-2 pl-4 ring-1 ring-negative-300 typography-text-sm md:typography-text-base py-1 rounded-md"
-  >
-    <p class="py-2 mr-2">The password change was failed.</p>
-    <button
-      type="button"
-      class="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
-    >
-      Retry
-    </button>
-    <button
-      type="button"
-      class="p-1.5 md:p-2 ml-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
-      aria-label="Close error alert"
-    >
-      <SfIconClose class="hidden md:block" />
-      <SfIconClose size="sm" class="block md:hidden" />
-    </button>
+  <div class="flex flex-col gap-4">
+    <Alert variant="negative" class="w-full max-w-[640px]">
+      <SfIconError class="my-2 text-negative-700 shrink-0" />
+      <p class="py-2">The password change was failed.</p>
+      <button
+        type="button"
+        class="ms-auto py-2 px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+      >
+        Retry
+      </button>
+      <button
+        type="button"
+        class="p-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+        aria-label="Close error alert"
+      >
+        <SfIconClose />
+      </button>
+    </Alert>
+
+    <Alert variant="negative" size="sm" class="w-full max-w-[320px]">
+      <SfIconError class="my-1.5 text-negative-700 shrink-0" size="sm" />
+      <p class="py-2">The password change was failed.</p>
+      <button
+        type="button"
+        class="ms-auto py-1.5 px-3 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+      >
+        Retry
+      </button>
+      <button
+        type="button"
+        class="p-1.5 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+        aria-label="Close error alert"
+      >
+        <SfIconClose size="sm" />
+      </button>
+    </Alert>
   </div>
 </template>
+
 <script lang="ts" setup>
-import { SfIconClose } from '@storefront-ui/vue';
+import { SfIconClose, SfIconError } from '@storefront-ui/vue';
+import Alert from './Alert.vue';
 </script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
index a5f34d30cd..979cc07a51 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
@@ -1,8 +1,15 @@
 <template>
-  <div
-    role="alert"
-    class="bg-neutral-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-neutral-300 typography-text-sm md:typography-text-base py-1 rounded-md"
-  >
-    <p class="py-2">Happy shopping!</p>
+  <div class="flex flex-col gap-4">
+    <Alert variant="neutral" class="w-full max-w-[640px]">
+      <p class="py-2">Happy shopping!</p>
+    </Alert>
+
+    <Alert variant="neutral" size="sm" class="w-full max-w-[320px]">
+      <p class="py-1.5">Happy shopping!</p>
+    </Alert>
   </div>
 </template>
+
+<script lang="ts" setup>
+import Alert from './Alert.vue';
+</script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue
index 960ea5e6f7..3e5c01b81f 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue
@@ -1,21 +1,32 @@
 <template>
-  <div
-    role="alert"
-    class="flex items-start md:items-center max-w-[600px] shadow-md bg-positive-100 pr-2 pl-4 ring-1 ring-positive-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-  >
-    <SfIconCheckCircle class="my-2 mr-2 text-positive-700 shrink-0" />
-    <p class="py-2 mr-2">The product has been added to the cart.</p>
-    <button
-      type="button"
-      class="p-1.5 md:p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
-      aria-label="Close positive alert"
-    >
-      <SfIconClose class="hidden md:block" />
-      <SfIconClose size="sm" class="block md:hidden" />
-    </button>
+  <div class="flex flex-col gap-4">
+    <Alert variant="positive" class="w-full max-w-[640px]">
+      <SfIconCheckCircle class="my-2 text-positive-700 shrink-0" />
+      <p class="py-2">The product has been added to the cart.</p>
+      <button
+        type="button"
+        class="ms-auto p-2 rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+        aria-label="Close positive alert"
+      >
+        <SfIconClose />
+      </button>
+    </Alert>
+
+    <Alert variant="positive" class="w-full max-w-[320px]" size="sm">
+      <SfIconCheckCircle size="sm" class="my-1.5 text-positive-700 shrink-0" />
+      <p class="py-1.5">The product has been added to the cart.</p>
+      <button
+        type="button"
+        class="ms-auto p-1.5 rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+        aria-label="Close positive alert"
+      >
+        <SfIconClose size="sm" />
+      </button>
+    </Alert>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { SfIconCheckCircle, SfIconClose } from '@storefront-ui/vue';
+import Alert from './Alert.vue';
 </script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
index 4543048f86..4fe4a1a10b 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
@@ -1,13 +1,18 @@
 <template>
-  <div
-    role="alert"
-    class="flex items-center max-w-[600px] shadow-md bg-secondary-100 pr-2 pl-4 ring-1 ring-secondary-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-  >
-    <SfIconInfo class="mr-2 text-secondary-700 shrink-0" />
-    <p class="py-2">Your cart will soon be full.</p>
+  <div class="flex flex-col gap-4">
+    <Alert variant="secondary" class="w-full max-w-[640px]">
+      <SfIconInfo class="my-2 text-secondary-700 shrink-0" />
+      <p class="py-2">Your cart will soon be full.</p>
+    </Alert>
+
+    <Alert variant="secondary" size="sm" class="w-full max-w-[320px]">
+      <SfIconInfo size="sm" class="my-1.5 text-secondary-700 shrink-0" />
+      <p class="py-1.5">Your cart will soon be full.</p>
+    </Alert>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { SfIconInfo } from '@storefront-ui/vue';
+import Alert from './Alert.vue';
 </script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue
index 0bf79ff313..45899b4f15 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue
@@ -1,22 +1,36 @@
 <template>
-  <div
-    role="alert"
-    class="flex items-start bg-warning-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-warning-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-  >
-    <SfIconWarning class="mt-2 mr-2 text-warning-700 shrink-0" />
-    <div class="py-2 mr-2">
-      <p class="font-medium typography-text-base md:typography-text-lg">Your account</p>
-      <p>Your shipping details need to be updated.</p>
-    </div>
-    <button
-      type="button"
-      class="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
-    >
-      Update
-    </button>
+  <div class="flex flex-col gap-4">
+    <Alert variant="warning" class="w-full max-w-[640px]">
+      <SfIconWarning class="my-2 text-warning-700 shrink-0" />
+      <div class="py-2">
+        <p class="font-medium">Your account</p>
+        <p>Your shipping details need to be updated.</p>
+      </div>
+      <button
+        type="button"
+        class="ms-auto py-2 px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+      >
+        Update
+      </button>
+    </Alert>
+
+    <Alert variant="warning" size="sm" class="w-full max-w-[320px]">
+      <SfIconWarning size="sm" class="my-1.5 text-warning-700 shrink-0" />
+      <div class="py-1.5">
+        <p class="font-medium">Your account</p>
+        <p>Your shipping details need to be updated.</p>
+      </div>
+      <button
+        type="button"
+        class="ms-auto py-1.5 px-3 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+      >
+        Update
+      </button>
+    </Alert>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { SfIconWarning } from '@storefront-ui/vue';
+import Alert from './Alert.vue';
 </script>
diff --git a/apps/preview/shared/utils/showcases.utils.ts b/apps/preview/shared/utils/showcases.utils.ts
new file mode 100644
index 0000000000..9882574255
--- /dev/null
+++ b/apps/preview/shared/utils/showcases.utils.ts
@@ -0,0 +1,4 @@
+const ignoredFiles = ['Alert/Alert'];
+
+export const showcasesFilter = ({ files, ext }: { files: string[]; ext: string }) =>
+  files.filter((filePath) => !ignoredFiles.find((ignoredFile) => filePath.includes(`${ignoredFile}${ext}`)));
diff --git a/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue b/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
index 09adfb8728..132b2cec62 100644
--- a/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
+++ b/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
@@ -2,7 +2,7 @@
 export default {
   inheritAttrs: false,
 };
-const getSizeClasses = {
+const sizeClasses = {
   [SfInputSize.sm]: ' h-[32px]',
   [SfInputSize.base]: 'h-[40px]',
   [SfInputSize.lg]: 'h-[48px]',
@@ -67,7 +67,7 @@ const inputValue = computed({
         'ring-1 ring-neutral-200': !invalid,
         'focus-within:outline focus-within:outline-offset': isFocusVisible,
       },
-      getSizeClasses[size],
+      sizeClasses[size],
       wrapperClass,
     ]"
     data-testid="input"
diff --git a/packages/tests/package.json b/packages/tests/package.json
index efa3e949c8..dc38a324fc 100644
--- a/packages/tests/package.json
+++ b/packages/tests/package.json
@@ -12,6 +12,6 @@
   "devDependencies": {
     "@storefront-ui/eslint-config": "workspace:*",
     "eslint": "^8.34.0",
-    "prettier": "^2.8.8"
+    "prettier": "^3.0.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 6c85d2da3b..3f21c4990e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4562,7 +4562,7 @@ __metadata:
   dependencies:
     "@storefront-ui/eslint-config": "workspace:*"
     eslint: ^8.34.0
-    prettier: ^2.8.8
+    prettier: ^3.0.0
   languageName: unknown
   linkType: soft
 
@@ -22455,7 +22455,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^1.18.2 || ^2.0.0, prettier@npm:^2.7.1, prettier@npm:^2.8.8":
+"prettier@npm:^1.18.2 || ^2.0.0, prettier@npm:^2.7.1":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
   bin: