diff --git a/src/components/ui/popover/index.ts b/src/components/ui/popover/index.ts
new file mode 100644
index 0000000..5eba297
--- /dev/null
+++ b/src/components/ui/popover/index.ts
@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+import Trigger from "./popover-trigger.svelte";
+const Root = PopoverPrimitive.Root;
+const Close = PopoverPrimitive.Close;
+
+export {
+  Root,
+  Content,
+  Trigger,
+  Close,
+  //
+  Root as Popover,
+  Content as PopoverContent,
+  Trigger as PopoverTrigger,
+  Close as PopoverClose,
+};
diff --git a/src/components/ui/popover/popover-content.svelte b/src/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..5228dc3
--- /dev/null
+++ b/src/components/ui/popover/popover-content.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import { Popover as PopoverPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    align = "center",
+    portalProps,
+    ...restProps
+  }: PopoverPrimitive.ContentProps & {
+    portalProps?: PopoverPrimitive.PortalProps;
+  } = $props();
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+  <PopoverPrimitive.Content
+    bind:ref
+    data-slot="popover-content"
+    {sideOffset}
+    {align}
+    class={cn(
+      "z-50 w-auto origin-(--bits-popover-content-transform-origin) rounded-md border border-neutral-200 bg-white p-4 text-neutral-900 shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
+      className,
+    )}
+    {...restProps}
+  />
+</PopoverPrimitive.Portal>
diff --git a/src/components/ui/popover/popover-trigger.svelte b/src/components/ui/popover/popover-trigger.svelte
new file mode 100644
index 0000000..e20f5a0
--- /dev/null
+++ b/src/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import { Popover as PopoverPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+  bind:ref
+  data-slot="popover-trigger"
+  class={cn("", className)}
+  {...restProps}
+/>