diff --git a/.storybook/components/banner/Banner.css b/.storybook/components/banner/Banner.css
new file mode 100644
index 000000000..f0e9dbc11
--- /dev/null
+++ b/.storybook/components/banner/Banner.css
@@ -0,0 +1,4 @@
+.o-ui-sb-banner {
+ background: var(--o-ui-bg-alias-warning-light);
+ border-radius: var(--o-ui-br-3);
+}
diff --git a/.storybook/components/banner/Banner.tsx b/.storybook/components/banner/Banner.tsx
new file mode 100644
index 000000000..069dfca5a
--- /dev/null
+++ b/.storybook/components/banner/Banner.tsx
@@ -0,0 +1,19 @@
+import "./Banner.css";
+
+import { Div, DivProps } from "@components/html";
+import { mergeProps } from "@components/shared";
+
+export function Banner({ children, ...rest }: DivProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/.storybook/components/banner/index.ts b/.storybook/components/banner/index.ts
new file mode 100644
index 000000000..630d3e35f
--- /dev/null
+++ b/.storybook/components/banner/index.ts
@@ -0,0 +1 @@
+export * from "./Banner";
diff --git a/.storybook/components/index.ts b/.storybook/components/index.ts
index e88d8cf0d..14d76d39a 100644
--- a/.storybook/components/index.ts
+++ b/.storybook/components/index.ts
@@ -10,3 +10,4 @@ export * from "./snippet";
export * from "./themed-snippet";
export * from "./package-installation-snippet";
export * from "./preview";
+export * from "./banner";
diff --git a/docs/getting-started/Installation.stories.mdx b/docs/getting-started/Installation.stories.mdx
index 76b3ec154..7662f50be 100644
--- a/docs/getting-started/Installation.stories.mdx
+++ b/docs/getting-started/Installation.stories.mdx
@@ -1,5 +1,5 @@
import { Meta } from "@storybook/addon-docs";
-import { PackageInstallationSnippet } from "@stories/components";
+import { PackageInstallationSnippet, Banner, ExternalLink } from "@stories/components";
import { Message } from "@components/message";
If you are starting a new project with Workleap, you should use Orbiter.
+
Multiple [NPM packages](https://www.npmjs.com/settings/orbit-ui/packages) compose Orbit. By creating a bundle package named [@sharegate/orbit-ui](https://www.npmjs.com/package/@sharegate/orbit-ui), we simplify the installation process and allow you to install Orbit with just a single package.
> We assume you've already set up [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom). Otherwise, you'll get a warning at installation.