diff --git a/frontend/src/metabase/components/Popover/Popover.jsx b/frontend/src/metabase/components/Popover/Popover.jsx
index 11e9514723c974fa7a789fe7fd250c24832ded4c..62df8f483fddec1647da6f2f049f2d9669a0443a 100644
--- a/frontend/src/metabase/components/Popover/Popover.jsx
+++ b/frontend/src/metabase/components/Popover/Popover.jsx
@@ -15,6 +15,9 @@ const PAGE_PADDING = 10;
 // Popover padding and border
 const POPOVER_BODY_PADDING = 2;
 
+/**
+ * @deprecated prefer Popover from "metabase/ui" instead
+ */
 export default class Popover extends Component {
   constructor(props, context) {
     super(props, context);
diff --git a/frontend/src/metabase/components/Popover/TippyPopover.tsx b/frontend/src/metabase/components/Popover/TippyPopover.tsx
index 02180c71bd25a98ff4a56d7c6aa2b99e28543b1b..9ad246de68280eb8df8aab670fb0debc7333af8b 100644
--- a/frontend/src/metabase/components/Popover/TippyPopover.tsx
+++ b/frontend/src/metabase/components/Popover/TippyPopover.tsx
@@ -64,6 +64,9 @@ function getPopperOptions({
   );
 }
 
+/**
+ * @deprecated prefer Popover from "metabase/ui" instead
+ */
 function TippyPopover({
   className,
   disableContentSandbox,
diff --git a/frontend/src/metabase/components/PopoverWithTrigger/ControlledPopoverWithTrigger.tsx b/frontend/src/metabase/components/PopoverWithTrigger/ControlledPopoverWithTrigger.tsx
index 3e7b4a6ea6ec9e8fe73fa9b10096cba99d3b4c90..01b455180e0776fc7941234c0269b45bbc555bfa 100644
--- a/frontend/src/metabase/components/PopoverWithTrigger/ControlledPopoverWithTrigger.tsx
+++ b/frontend/src/metabase/components/PopoverWithTrigger/ControlledPopoverWithTrigger.tsx
@@ -44,6 +44,9 @@ type RenderTriggerArgs = {
   closePopover: () => void;
 };
 
+/**
+ * @deprecated prefer Popover from "metabase/ui" instead
+ */
 function ControlledPopoverWithTrigger({
   triggerClasses,
   triggerStyle,
diff --git a/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx b/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx
index 1eda806eeb277cc0e43ed658b675d2e4021562d0..3144d0b8dbd19ac31042dff75edfd0abdb536884 100644
--- a/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx
+++ b/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx
@@ -2,6 +2,6 @@ import Triggerable from "metabase/components/Triggerable";
 import Popover from "metabase/components/Popover";
 
 /**
- * @deprecated use Popover + useState
+ * @deprecated prefer Popover from "metabase/ui" + useState instead
  */
 export default Triggerable(Popover);
diff --git a/frontend/src/metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger.tsx b/frontend/src/metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger.tsx
index f17fbae31029ace9c08e29fcb9b5b4933662829e..bed118f36216ede2837b18e19314145fd000dba7 100644
--- a/frontend/src/metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger.tsx
+++ b/frontend/src/metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger.tsx
@@ -15,6 +15,9 @@ export type TippyPopoverWithTriggerProps = {
   onClose?: () => void;
 } & Omit<ControlledPopoverWithTriggerProps, "visible" | "onClose" | "onOpen">;
 
+/**
+ * @deprecated prefer Popover from "metabase/ui" instead
+ */
 function UncontrolledPopoverWithTrigger({
   isInitiallyVisible,
   popoverRef,
diff --git a/frontend/src/metabase/ui/components/overlays/Popover/Popover.stories.mdx b/frontend/src/metabase/ui/components/overlays/Popover/Popover.stories.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..38717cc9cb394ab2c2ba74050352acbbddaad042
--- /dev/null
+++ b/frontend/src/metabase/ui/components/overlays/Popover/Popover.stories.mdx
@@ -0,0 +1,92 @@
+import { Fragment } from "react";
+import { Canvas, Story, Meta } from "@storybook/addon-docs";
+import {
+  Box,
+  Button,
+  Flex,
+  Popover,
+  Text,
+  TextInput,
+  Stack,
+} from "metabase/ui";
+
+export const args = {
+  label: "Popover",
+  position: "bottom",
+};
+
+export const argTypes = {
+  position: {
+    options: [
+      "bottom",
+      "left",
+      "right",
+      "top",
+      "bottom-end",
+      "bottom-start",
+      "left-end",
+      "left-start",
+      "right-end",
+      "right-start",
+      "top-end",
+      "top-start",
+    ],
+    control: { type: "select" },
+  },
+};
+
+export const sampleArgs = {
+  simple: <Text>Popover!</Text>,
+  interactive: (
+    <Stack spacing="sm">
+      <TextInput autoFocus placeholder="First name" />
+      <TextInput placeholder="Last name" />
+      <Button>Update</Button>
+    </Stack>
+  ),
+};
+
+<Meta
+  title="Overlays/Popover"
+  component={Popover}
+  args={args}
+  argTypes={argTypes}
+/>
+
+# Popover
+
+Our themed wrapper around [Mantine Popover](https://v6.mantine.dev/core/popover/).
+
+## Docs
+
+- [Mantine Popover Docs](https://v6.mantine.dev/core/popover/)
+
+## Examples
+
+export const DefaultTemplate = ({ children, ...args }) => (
+  <Flex justify="center">
+    <Popover {...args}>
+      <Popover.Target>
+        <Button variant="filled">Click to open</Button>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <Box p="md">{children}</Box>
+      </Popover.Dropdown>
+    </Popover>
+  </Flex>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  children: sampleArgs.simple,
+};
+
+export const Interactive = DefaultTemplate.bind({});
+Interactive.args = {
+  children: sampleArgs.interactive,
+};
+
+<Canvas>
+  <Story name="Default">{Default}</Story>
+  <Story name="Interactive content">{Interactive}</Story>
+</Canvas>
diff --git a/frontend/src/metabase/ui/components/overlays/Popover/Popover.styled.tsx b/frontend/src/metabase/ui/components/overlays/Popover/Popover.styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4cf5c84a8faa8344d522978874926b9d9c0cbc22
--- /dev/null
+++ b/frontend/src/metabase/ui/components/overlays/Popover/Popover.styled.tsx
@@ -0,0 +1,16 @@
+import type { MantineThemeOverride } from "@mantine/core";
+
+export const getPopoverOverrides = (): MantineThemeOverride["components"] => ({
+  Popover: {
+    defaultProps: {
+      radius: "sm",
+      shadow: "md",
+      withinPortal: true,
+    },
+    styles: theme => ({
+      dropdown: {
+        padding: 0,
+      },
+    }),
+  },
+});
diff --git a/frontend/src/metabase/ui/components/overlays/Popover/index.ts b/frontend/src/metabase/ui/components/overlays/Popover/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9fb2451a52290679bdae11a7e512918762456225
--- /dev/null
+++ b/frontend/src/metabase/ui/components/overlays/Popover/index.ts
@@ -0,0 +1,3 @@
+export { Popover } from "@mantine/core";
+export type { PopoverBaseProps, PopoverProps } from "@mantine/core";
+export { getPopoverOverrides } from "./Popover.styled";
diff --git a/frontend/src/metabase/ui/components/overlays/index.ts b/frontend/src/metabase/ui/components/overlays/index.ts
index 733680f77f02237ce6f23accbd5ab3631447ba4f..aa1ae4cafd771b39e112309043063c9d1eb379f1 100644
--- a/frontend/src/metabase/ui/components/overlays/index.ts
+++ b/frontend/src/metabase/ui/components/overlays/index.ts
@@ -1,2 +1,3 @@
 export * from "./Menu";
+export * from "./Popover";
 export * from "./Tooltip";
diff --git a/frontend/src/metabase/ui/theme.ts b/frontend/src/metabase/ui/theme.ts
index 9fdcb52f3b2049be110eae8532dd78d4b9b1596d..5cdb072893df6f8e48e9efe581cbb208342b60e8 100644
--- a/frontend/src/metabase/ui/theme.ts
+++ b/frontend/src/metabase/ui/theme.ts
@@ -14,6 +14,7 @@ import {
   getNumberInputOverrides,
   getRadioOverrides,
   getPaperOverrides,
+  getPopoverOverrides,
   getSelectOverrides,
   getSwitchOverrides,
   getTabsOverrides,
@@ -119,6 +120,7 @@ export const getThemeOverrides = (): MantineThemeOverride => ({
     ...getNumberInputOverrides(),
     ...getRadioOverrides(),
     ...getPaperOverrides(),
+    ...getPopoverOverrides(),
     ...getSelectOverrides(),
     ...getSwitchOverrides(),
     ...getTabsOverrides(),