diff --git a/README.md b/README.md
index ff7e94f305a..693a61a6a94 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,9 @@
   <a href="https://www.npmjs.com/package/@chakra-ui/react">
     <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@chakra-ui/react.svg?style=flat"/>
   </a>
+  <a href="https://www.npmjs.com/package/@chakra-ui/react">
+    <img alt="NPM Version" src="https://img.shields.io/npm/v/@chakra-ui/react?style=flat-square&color=43cc11">
+  </a>
   <a href="https://github.com/chakra-ui/chakra-ui">
     <img alt="Github Stars" src="https://img.shields.io/github/stars/chakra-ui/chakra-ui?style=social" />
   </a>
diff --git a/apps/www/content/docs/components/splitter.mdx b/apps/www/content/docs/components/splitter.mdx
index d64a6ba6c1f..dcb06720473 100644
--- a/apps/www/content/docs/components/splitter.mdx
+++ b/apps/www/content/docs/components/splitter.mdx
@@ -139,6 +139,13 @@ In addition to percentages, `defaultSize`, `minSize`, and `maxSize` accept CSS
 units like `px`, `em`, `rem`, `vh`, and `vw`. This is useful for panels that
 should keep a fixed width, such as a navigation sidebar.
 
+:::warning
+
+CSS-unit sizes are measured on the client, so panels using them can shift after
+hydration. Use percentage sizes for a stable server-rendered layout.
+
+:::
+
 <ExampleTabs name="splitter-css-units" />
 
 ### Resize Behavior