diff --git a/.storybook/preview.css b/.storybook/preview.css
new file mode 100644
index 00000000..32d8ab2c
--- /dev/null
+++ b/.storybook/preview.css
@@ -0,0 +1,18 @@
+.preview-container-stage-tag {
+    color: #fff;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+}
+
+.preview-container-stage-tag[data-tag="experimental"] {
+    background-color: #f0ad4e;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+}
+
+.preview-container-stage-tag[data-tag="stable"] {
+    background-color: #5cb85c;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+}
\ No newline at end of file
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
deleted file mode 100644
index 2bc05edc..00000000
--- a/.storybook/preview.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import "../lib/css/global.css";
-
-/** @type { import('@storybook/react').Preview } */
-const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
new file mode 100644
index 00000000..ef6f6b1c
--- /dev/null
+++ b/.storybook/preview.tsx
@@ -0,0 +1,33 @@
+import "../lib/css/global.css";
+import "./preview.css";
+import {StoryFn} from "@storybook/react";
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story: StoryFn, { tags }: { tags: string[]}) => {
+    const isStable = (tags || []).includes('stable');
+    const state = isStable ? 'stable' : 'experimental';
+    return (
+        <>
+          <span className='preview-container-stage-tag' data-tag={state}>
+            {state}
+          </span>
+          <Story />
+        </>
+    );
+    },
+  ],
+};
+
+
+
+export default preview;
diff --git a/lib/components/Avatar/AvatarGroup.stories.ts b/lib/components/Avatar/AvatarGroup.stories.ts
index a4026915..39bd7742 100644
--- a/lib/components/Avatar/AvatarGroup.stories.ts
+++ b/lib/components/Avatar/AvatarGroup.stories.ts
@@ -5,7 +5,7 @@ const meta = {
   title: 'Avatar/AvatarGroup',
   component: AvatarGroup,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ['autodocs', 'stable'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     //    layout: 'fullscreen',
diff --git a/lib/components/Avatar/AvatarGroup.tsx b/lib/components/Avatar/AvatarGroup.tsx
index 345e4abc..ad8e49ec 100644
--- a/lib/components/Avatar/AvatarGroup.tsx
+++ b/lib/components/Avatar/AvatarGroup.tsx
@@ -19,6 +19,9 @@ export interface AvatarGroupProps {
   className?: string;
 }
 
+/**
+ * Avatar group component for displaying multiple avatars as a group.
+ */
 export const AvatarGroup = ({
   items = [],
   maxItemsCount = 4,
diff --git a/lib/components/Avatar/avatar.stories.tsx b/lib/components/Avatar/avatar.stories.tsx
index 75af1064..9a09af1e 100644
--- a/lib/components/Avatar/avatar.stories.tsx
+++ b/lib/components/Avatar/avatar.stories.tsx
@@ -4,7 +4,7 @@ import { Avatar } from './';
 const meta = {
   title: 'Avatar/Avatar',
   component: Avatar,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'stable'],
   parameters: {},
   args: {
     name: 'Jane Doe',