diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
new file mode 100644
index 00000000000000..b812b0215b2928
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
@@ -0,0 +1,111 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { useTheme } from '@mui/system';
+
+export default function SimplePopper() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <React.Fragment>
+      <button
+        type="button"
+        aria-describedby={id}
+        className="Button"
+        onClick={handleClick}
+      >
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div className="CustomPopper">The content of the Popper.</div>
+      </Popper>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style>{`
+
+      .Button {
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        font-weight: 600;
+        box-sizing: border-box;
+        border-radius: 8px;
+        padding: 8px 16px;
+        line-height: 1.5;
+        background: transparent;
+        cursor: pointer;
+        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
+        color: ${isDarkMode ? cyan[300] : cyan[400]};
+  
+        &:hover {
+          background: ${isDarkMode ? grey[900] : grey[100]};
+          border-color: ${isDarkMode ? cyan[200] : cyan[400]};
+        }
+  
+        &:focus-visible {
+          border-color: ${cyan[400]};
+          outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+        }
+      }
+
+      .CustomPopper{
+        background-color: ${isDarkMode ? grey[900] : grey[50]};
+        border-radius: 8px;
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: ${
+          isDarkMode ? `0 4px 8px rgb(0 0 0 / 0.7)` : `0 4px 8px rgb(0 0 0 / 0.1)`
+        };
+        padding: 0.75rem;
+        color: ${isDarkMode ? cyan[100] : cyan[700]};
+        font-size: 0.875rem;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-weight: 500;
+        opacity: 1;
+        margin: 0.25rem 0px;
+      }
+  `}</style>
+  );
+}
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
new file mode 100644
index 00000000000000..9e4cc992196e30
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
@@ -0,0 +1,111 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { useTheme } from '@mui/system';
+
+export default function SimplePopper() {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <React.Fragment>
+      <button
+        type="button"
+        aria-describedby={id}
+        className="Button"
+        onClick={handleClick}
+      >
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div className="CustomPopper">The content of the Popper.</div>
+      </Popper>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style>{`
+
+      .Button {
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        font-weight: 600;
+        box-sizing: border-box;
+        border-radius: 8px;
+        padding: 8px 16px;
+        line-height: 1.5;
+        background: transparent;
+        cursor: pointer;
+        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
+        color: ${isDarkMode ? cyan[300] : cyan[400]};
+  
+        &:hover {
+          background: ${isDarkMode ? grey[900] : grey[100]};
+          border-color: ${isDarkMode ? cyan[200] : cyan[400]};
+        }
+  
+        &:focus-visible {
+          border-color: ${cyan[400]};
+          outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+        }
+      }
+
+      .CustomPopper{
+        background-color: ${isDarkMode ? grey[900] : grey[50]};
+        border-radius: 8px;
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: ${
+          isDarkMode ? `0 4px 8px rgb(0 0 0 / 0.7)` : `0 4px 8px rgb(0 0 0 / 0.1)`
+        };
+        padding: 0.75rem;
+        color: ${isDarkMode ? cyan[100] : cyan[700]};
+        font-size: 0.875rem;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-weight: 500;
+        opacity: 1;
+        margin: 0.25rem 0px;
+      }
+  `}</style>
+  );
+}
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview
new file mode 100644
index 00000000000000..e2d29a1fee8ac2
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx.preview
@@ -0,0 +1,14 @@
+<React.Fragment>
+  <button
+    type="button"
+    aria-describedby={id}
+    className="Button"
+    onClick={handleClick}
+  >
+    Toggle Popper
+  </button>
+  <Popper id={id} open={open} anchorEl={anchorEl}>
+    <div className="CustomPopper">The content of the Popper.</div>
+  </Popper>
+  <Styles />
+</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
new file mode 100644
index 00000000000000..79cc46085fadc3
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { styled, css } from '@mui/system';
+
+export default function SimplePopper() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <div>
+      <TriggerButton aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </TriggerButton>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <StyledPopperDiv>The content of the Popper.</StyledPopperDiv>
+      </Popper>
+    </div>
+  );
+}
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#99CCF3',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+const TriggerButton = styled('button')(
+  ({ theme }) => `
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 600;
+    box-sizing: border-box;
+    border-radius: 8px;
+    padding: 8px 16px;
+    line-height: 1.5;
+    background: transparent;
+    cursor: pointer;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
+  
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+      border-color: ${theme.palette.mode === 'dark' ? blue[200] : blue[400]};
+    }
+  
+    &:focus-visible {
+      border-color: ${blue[400]};
+      outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+    `,
+);
+
+const StyledPopperDiv = styled('div')(
+  ({ theme }) => css`
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: ${theme.palette.mode === 'dark'
+      ? `0px 4px 8px rgb(0 0 0 / 0.7)`
+      : `0px 4px 8px rgb(0 0 0 / 0.1)`};
+    padding: 0.75rem;
+    color: ${theme.palette.mode === 'dark' ? blue[200] : blue[800]};
+    font-size: 0.875rem;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    opacity: 1;
+    margin: 0.25rem 0;
+  `,
+);
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
new file mode 100644
index 00000000000000..83c4ca2038fb13
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { styled, css } from '@mui/system';
+
+export default function SimplePopper() {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <div>
+      <TriggerButton aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </TriggerButton>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <StyledPopperDiv>The content of the Popper.</StyledPopperDiv>
+      </Popper>
+    </div>
+  );
+}
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#99CCF3',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+const TriggerButton = styled('button')(
+  ({ theme }) => `
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 600;
+    box-sizing: border-box;
+    border-radius: 8px;
+    padding: 8px 16px;
+    line-height: 1.5;
+    background: transparent;
+    cursor: pointer;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
+  
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+      border-color: ${theme.palette.mode === 'dark' ? blue[200] : blue[400]};
+    }
+  
+    &:focus-visible {
+      border-color: ${blue[400]};
+      outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+    `,
+);
+
+const StyledPopperDiv = styled('div')(
+  ({ theme }) => css`
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: ${theme.palette.mode === 'dark'
+      ? `0px 4px 8px rgb(0 0 0 / 0.7)`
+      : `0px 4px 8px rgb(0 0 0 / 0.1)`};
+    padding: 0.75rem;
+    color: ${theme.palette.mode === 'dark' ? blue[200] : blue[800]};
+    font-size: 0.875rem;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    opacity: 1;
+    margin: 0.25rem 0;
+  `,
+);
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx.preview b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx.preview
new file mode 100644
index 00000000000000..7d2ba69ced044c
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx.preview
@@ -0,0 +1,6 @@
+<TriggerButton aria-describedby={id} type="button" onClick={handleClick}>
+  Toggle Popper
+</TriggerButton>
+<Popper id={id} open={open} anchorEl={anchorEl}>
+  <StyledPopperDiv>The content of the Popper.</StyledPopperDiv>
+</Popper>
\ No newline at end of file
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
new file mode 100644
index 00000000000000..24e6a16ca3d09d
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function SimplePopper() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <div className={`${isDarkMode ? 'dark' : ''}`}>
+      <button
+        className="cursor-pointer text-sm box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-purple-300 dark:hover:border-purple-300 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple"
+        aria-describedby={id}
+        type="button"
+        onClick={handleClick}
+      >
+        Toggle Popper
+      </button>
+      <Popper
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        className={`${isDarkMode ? 'dark' : ''}`}
+      >
+        <div className=" z-50 rounded-lg font-medium text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100">
+          The content of the Popper.
+        </div>
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
new file mode 100644
index 00000000000000..554a033abb4611
--- /dev/null
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Popper from '@mui/base/Popper';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function SimplePopper() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <div className={`${isDarkMode ? 'dark' : ''}`}>
+      <button
+        className="cursor-pointer text-sm box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-purple-300 dark:hover:border-purple-300 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple"
+        aria-describedby={id}
+        type="button"
+        onClick={handleClick}
+      >
+        Toggle Popper
+      </button>
+      <Popper
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        className={`${isDarkMode ? 'dark' : ''}`}
+      >
+        <div className=" z-50 rounded-lg font-medium text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100">
+          The content of the Popper.
+        </div>
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/data/base/components/popper/popper.md b/docs/data/base/components/popper/popper.md
index cf3ac4898d8bf1..5ff8b4908659e4 100644
--- a/docs/data/base/components/popper/popper.md
+++ b/docs/data/base/components/popper/popper.md
@@ -44,7 +44,7 @@ You can disable this behavior with `disablePortal` prop.
 The following demo shows how to create and style a basic popper.
 Click **Toggle Popper** to see how it behaves:
 
-{{"demo": "SimplePopper.js", "defaultCodeOpen": true}}
+{{"demo": "UnstyledPopperBasic", "defaultCodeOpen": true}}
 
 :::warning
 By default, clicking outside the popper does not hide it.