diff --git a/common/ui/search-filter-bar.tsx b/common/ui/search-filter-bar.tsx
new file mode 100644
index 00000000..0fae5588
--- /dev/null
+++ b/common/ui/search-filter-bar.tsx
@@ -0,0 +1,44 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+function cx(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+export const commonSearchFilterBarRowClass =
+  "flex flex-col gap-3 md:flex-row md:items-center md:justify-between";
+export const commonSearchFilterBarPrimaryClass =
+  "flex min-w-0 flex-1 flex-col gap-3 md:flex-row md:items-center";
+export const commonSearchFilterBarActionsClass =
+  "flex flex-wrap items-center gap-2";
+export const commonSearchFilterBarAdvancedClass =
+  "flex flex-col gap-4 rounded-lg border border-border/40 bg-secondary/30 p-4 animate-in fade-in slide-in-from-top-2 duration-200";
+
+type SearchFilterBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  actions?: ReactNode;
+  advanced?: ReactNode;
+  advancedOpen?: boolean;
+  primary: ReactNode;
+};
+
+export function SearchFilterBar({
+  actions,
+  advanced,
+  advancedOpen = false,
+  className,
+  primary,
+  ...props
+}: SearchFilterBarProps) {
+  return (
+    <div className={cx("space-y-3", className)} {...props}>
+      <div className={commonSearchFilterBarRowClass}>
+        <div className={commonSearchFilterBarPrimaryClass}>{primary}</div>
+        {actions ? (
+          <div className={commonSearchFilterBarActionsClass}>{actions}</div>
+        ) : null}
+      </div>
+      {advanced && advancedOpen ? (
+        <div className={commonSearchFilterBarAdvancedClass}>{advanced}</div>
+      ) : null}
+    </div>
+  );
+}