diff --git a/packages/web/src/components/DependencyIndicator.tsx b/packages/web/src/components/DependencyIndicator.tsx
new file mode 100644
index 0000000..254cd0a
--- /dev/null
+++ b/packages/web/src/components/DependencyIndicator.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+interface DependencyItem {
+  name: string;
+  status: string;
+}
+
+interface DependencyIndicatorProps {
+  blockedBy: DependencyItem[];
+  type: "task" | "phase";
+  className?: string;
+}
+
+export function DependencyIndicator({
+  blockedBy,
+  type: _type,
+  className,
+}: DependencyIndicatorProps) {
+  if (blockedBy.length === 0) return null;
+
+  const names = blockedBy.map((item) => item.name).join(", ");
+
+  return (
+    <div className={cn("pl-8 text-sm text-amber-600", className)}>
+      <span className="font-mono">^</span> blocked by: {names}
+    </div>
+  );
+}