docs: add v4 release banner and changelog entry (#3337)

Author: talkor

packages/core/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.88.0...@vibe/core@4.0.0) (2026-03-18)
+
+
+### BREAKING CHANGES
+
+This release contains breaking changes across components, APIs, and styling. Key highlights:
+
+- **Enum removal**: Removed all deprecated enum exports and static properties across 30+ components. Use string literals instead. Run `npx @vibe/codemod --migration v4` to migrate automatically.
+- **Dropdown**: Complete API rewrite replacing the react-select-based implementation with a new custom component.
+- **Dialog**: Migrated from Popper.js to Floating UI (`@floating-ui/react-dom`). The `modifiers` prop is replaced by `middleware`.
+- **AttentionBox**: New component promoted from `@vibe/core/next`. Legacy props removed; type values renamed.
+- **Icon**: Props renamed — `iconLabel` → `label`, `iconType` → `type`, `iconSize` → `size`.
+- **TipseenImage**: Removed — use `TipseenMedia` with an `<img>` child instead.
+
+For the full list of breaking changes and migration instructions, see the [v4 migration guide](https://vibe.monday.com/?path=/docs/migration-guide--docs).
+
+
 # [3.88.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.87.0...@vibe/core@3.88.0) (2026-03-11)
 
 

packages/docs/.storybook/preview.tsx

@@ -44,6 +44,7 @@ import Footer from "../src/layout/footer/Footer";
 import StorybookTableOfContents from "../src/layout/toc/TableOfContents";
 import { paintToConsole } from "./art";
 import FloatingObjects from "../src/pages/welcome/hero/FloatingObjects";
+import Vibe4Banner from "../src/pages/welcome/banner/Vibe4Banner";
 
 const fontLoader = async () => ({
   fonts: await document.fonts.ready // Fixing Chromatic tests flakiness - taking snapshots after fonts are loaded
@@ -70,6 +71,7 @@ const preview: Preview = {
 
         return (
           <>
+            {isWelcomePage && <Vibe4Banner />}
             {isWelcomePage && <FloatingObjects />}
             <DocsContainer context={context}>
               <Unstyled>{children}</Unstyled>

packages/docs/src/pages/welcome/banner/Vibe4Banner.module.scss

@@ -0,0 +1,76 @@
+.vibe4Banner {
+  padding: var(--space-16);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--space-8);
+  border-radius: var(--border-radius-medium);
+  position: relative;
+  overflow: hidden;
+
+  .content {
+    display: flex;
+    align-items: center;
+    gap: var(--space-8);
+    z-index: 1;
+
+    .text {
+      color: #323338;
+      font-family: Poppins;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 100%;
+      letter-spacing: -0.12px;
+      display: flex;
+      align-items: center;
+      align-self: center;
+      gap: var(--space-4);
+    }
+
+    .title {
+      color: #323338;
+      font-family: Poppins;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 100%;
+      letter-spacing: -0.12px;
+    }
+
+    .link {
+      color: #323338;
+      text-decoration: underline;
+      font-size: 16px;
+      font-weight: 400;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+  }
+
+  .bubble1 {
+    width: 307.5px;
+    height: 232.5px;
+    position: absolute;
+    right: 518.5px;
+    bottom: -184.5px;
+    border-radius: 307.5px;
+    opacity: 0.4;
+    background: #d4b8ff;
+    filter: blur(120px);
+  }
+
+  .bubble2 {
+    width: 307.5px;
+    height: 232.5px;
+    position: absolute;
+    left: 358px;
+    top: -194px;
+    border-radius: 307.5px;
+    opacity: 0.4;
+    background: #90d0ff;
+    filter: blur(120px);
+  }
+}

packages/docs/src/pages/welcome/banner/Vibe4Banner.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styles from "./Vibe4Banner.module.scss";
+
+const Vibe4Banner: React.FC = () => {
+  return (
+    <div className={styles.vibe4Banner}>
+      <div className={styles.bubble1}></div>
+      <div className={styles.bubble2}></div>
+      <div className={styles.content}>
+        <div className={styles.text}>
+          <span className={styles.title}>Vibe 4 is here!</span> Check out the{" "}
+          <a
+            href="https://vibe.monday.com/?path=/docs/migration-guide--docs"
+            target="_blank"
+            rel="noreferrer"
+            className={styles.link}
+          >
+            migration guide
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Vibe4Banner;