diff --git a/demo/src/lib/layout/StatusAlert.svelte b/demo/src/lib/layout/StatusAlert.svelte
new file mode 100644
index 0000000000..6e0488c400
--- /dev/null
+++ b/demo/src/lib/layout/StatusAlert.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import {Alert} from '@agnos-ui/svelte/components/alert';
+	import biInfoCircleFill from 'bootstrap-icons/icons/info-circle-fill.svg?raw';
+	import biExclamationTriangleFill from 'bootstrap-icons/icons/exclamation-triangle-fill.svg?raw';
+	import {page} from '$app/stores';
+
+	const regex = /\/(components|services)\/([^\/]+)/;
+	const typeIcon: Record<string, string> = {
+		info: biInfoCircleFill,
+		warning: biExclamationTriangleFill,
+	};
+
+	export let status: string;
+	let alert: Alert;
+
+	$: type = status === 'inprogress' ? 'warning' : 'info';
+	$: statusText = status === 'inprogress' ? 'In progress' : 'Beta';
+	$: statusTextBody =
+		status === 'inprogress'
+			? 'This component is still under active development. More features will be added in the near future.'
+			: 'This component has all the basic functionalities implemented. More polishing features might be added in the near future.';
+	$: componentName = $page.url.pathname.match(regex)?.[2];
+	$: issueUrl = `https://github.com/AmadeusITGroup/AgnosUI/issues?q=is%3Aopen+is%3Aissue+label%3A%22widget%3A+${componentName}%22`;
+	$: {
+		componentName;
+		alert?.api.open();
+	}
+</script>
+
+<Alert bind:this={alert} {type} className="p-0 border-0 border-start border-5 border-{type}">
+	<div class="alert-container p-3 border border-{type} rounded-end">
+		<div class="d-flex align-items-center">
+			<span class="d-flex me-2">{@html typeIcon[type]}</span>
+			Warning: component is <strong class="ms-1"> {statusText}</strong><br />
+		</div>
+		<hr />
+		{statusTextBody}
+		<br />
+		If you want to contribute, please visit
+		<a href={issueUrl} target="_blank">the issues on GitHub</a>.
+	</div>
+</Alert>
diff --git a/demo/src/routes/docs/[framework]/components/+layout.svelte b/demo/src/routes/docs/[framework]/components/+layout.svelte
index f74ed146ba..25386f6256 100644
--- a/demo/src/routes/docs/[framework]/components/+layout.svelte
+++ b/demo/src/routes/docs/[framework]/components/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Header from '$lib/layout/Header.svelte';
+	import StatusAlert from '$lib/layout/StatusAlert.svelte';
 
 	import {selectedFramework$, selectedTabName$} from '$lib/stores';
 
@@ -17,5 +18,8 @@
 
 <Header title={$page.data.title} status={$page.data.status} />
 <div class="main-content">
+	{#if $page.data.status !== 'stable'}
+		<StatusAlert status={$page.data.status} />
+	{/if}
 	<slot />
 </div>