diff --git a/docs/public/SUMMARY.md b/docs/public/SUMMARY.md
index c9b8ba59..0502a1e7 100644
--- a/docs/public/SUMMARY.md
+++ b/docs/public/SUMMARY.md
@@ -19,6 +19,7 @@
 * [Fleet Management](user-guide/fleet.md)
 * [Alerts](user-guide/alerts.md)
 * [Templates](user-guide/templates.md)
+* [Shared Components](user-guide/shared-components.md)
 
 ## Operations
 
diff --git a/docs/public/user-guide/pipeline-editor.md b/docs/public/user-guide/pipeline-editor.md
index 00569111..1dfe6fc5 100644
--- a/docs/public/user-guide/pipeline-editor.md
+++ b/docs/public/user-guide/pipeline-editor.md
@@ -17,20 +17,19 @@ The editor is divided into four main areas:
 
 ## Component palette
 
-The left sidebar lists every available Vector component, grouped into three sections:
+The left sidebar has two tabs:
 
-- **Sources** -- Components that ingest data into the pipeline.
-- **Transforms** -- Components that process, filter, or reshape data in flight.
-- **Sinks** -- Components that send data to downstream destinations.
+- **Catalog** -- Lists every available Vector component, grouped by kind (Sources, Transforms, Sinks). Each section can be collapsed and is further organized by category (e.g. "Cloud Platform", "Aggregating", "Messaging").
+- **Shared** -- Lists [shared components](shared-components.md) available in the current environment. Filter by kind using the All / Source / Transform / Sink buttons.
 
-Each section can be collapsed. When a section contains many components, they are further organized by category (e.g. "Cloud Platform", "Aggregating", "Messaging").
-
-Use the **search bar** at the top of the palette to filter components by name, type, description, or category.
+Use the **search bar** at the top of the palette to filter components by name, type, description, or category. The search applies to whichever tab is active.
 
 ### Adding a component
 
 Drag a component from the palette and drop it onto the canvas. A new node appears at the drop position, pre-configured with sensible defaults. You can also right-click the canvas to paste previously copied nodes.
 
+Dragging a shared component from the **Shared** tab creates a **linked node** -- the node's configuration is pre-filled from the shared component and pinned to its current version. See [Shared Components](shared-components.md) for details on linked node behavior.
+
 ## Canvas
 
 The canvas is where your pipeline takes visual shape. Each component is represented as a **node**, and data flow between components is represented as **edges** (connections).
@@ -47,7 +46,7 @@ The canvas is where your pipeline takes visual shape. Each component is represen
 
 ### Context menus
 
-- **Right-click a node** -- Opens a menu with Copy, Paste, Duplicate, and Delete actions.
+- **Right-click a node** -- Opens a menu with Copy, Paste, Duplicate, Delete, and **Save as Shared Component** actions. The shared component option extracts the node's configuration into a reusable [shared component](shared-components.md) and links the node to it.
 - **Right-click an edge** -- Opens a menu with a Delete connection action.
 
 ## Node types
@@ -116,6 +115,15 @@ The **Config** tab shows:
 - **Configuration form** -- Auto-generated form fields based on the component's configuration schema. Required fields are marked, and each field has contextual help.
 - **Secret picker** -- Sensitive fields (passwords, API keys, tokens) display a secret picker instead of a text input. You must select an existing secret or create a new one inline -- plaintext values cannot be entered directly into sensitive fields. See [Security](../operations/security.md#sensitive-fields) for details.
 
+### Linked shared components
+
+When a node is linked to a [shared component](shared-components.md), the detail panel shows additional elements:
+
+- A **purple banner** with the shared component name and an "Open in Library" link.
+- **Read-only configuration** -- All config fields are disabled. Edits must be made on the shared component's Library page.
+- An **Unlink** button to convert the node back to a regular editable component (the current config snapshot is preserved).
+- When the shared component has been updated since the node was last synced, an **amber update banner** appears with an "Accept update" button to pull in the latest configuration.
+
 ### VRL editor for transforms
 
 For **remap**, **filter**, and **route** transforms, the detail panel includes an integrated VRL editor (powered by Monaco) instead of a plain text field. The VRL editor provides:
diff --git a/docs/public/user-guide/pipelines.md b/docs/public/user-guide/pipelines.md
index 30df9301..8dc23fc3 100644
--- a/docs/public/user-guide/pipelines.md
+++ b/docs/public/user-guide/pipelines.md
@@ -29,6 +29,7 @@ A pipeline moves through several states during its lifecycle:
 - **Stopped** -- The pipeline is deployed but all agent nodes have stopped processing it.
 - **Crashed** -- One or more agent nodes report that the pipeline has crashed. Check the pipeline logs for details.
 - **Pending deploy** -- Shown as an additional badge when the saved configuration differs from what is currently deployed. Deploy the pipeline to push the latest changes.
+- **Updates available** -- Shown as an amber badge when the pipeline contains nodes linked to [shared components](shared-components.md) that have been updated. Hover over the badge to see which shared components have pending updates. Open the pipeline editor to review and accept the changes.
 - **Pending Approval** -- Shown when an editor has submitted a deploy request that is waiting for admin approval. See [Deploy approval workflows](#deploy-approval-workflows).
 
 ## Creating a pipeline
diff --git a/docs/public/user-guide/shared-components.md b/docs/public/user-guide/shared-components.md
new file mode 100644
index 00000000..fe30ccd6
--- /dev/null
+++ b/docs/public/user-guide/shared-components.md
@@ -0,0 +1,165 @@
+# Shared Components
+
+Shared components are reusable, environment-scoped pipeline component configurations that can be linked into multiple pipelines. Edit a shared component in one place and every linked pipeline sees the update -- no more hunting through dozens of pipelines to change an endpoint.
+
+## How shared components work
+
+A shared component stores a canonical configuration for a specific component type (e.g., an Elasticsearch sink with your production cluster settings). When you link a shared component into a pipeline, the pipeline node receives a snapshot of that configuration and pins to a specific version.
+
+When someone edits the shared component, its version number increments. Linked pipelines don't change automatically -- instead, they surface an **Update available** indicator at three levels:
+
+- **Pipeline list** -- An amber "Updates available" badge on the pipeline row.
+- **Canvas** -- The linked node's footer changes to "Update available" with an amber dot.
+- **Detail panel** -- A banner with an "Accept update" button.
+
+Pipeline owners review and explicitly accept updates before redeploying. This review-first model prevents surprise breakage across production pipelines.
+
+{% hint style="info" %}
+Shared components are scoped to a single environment. A production Kafka config is separate from a staging one. If you need the same component in multiple environments, create a shared component in each.
+{% endhint %}
+
+## Finding shared components
+
+Shared components are managed in the **Library** page, accessible from the sidebar. The Library has two sections:
+
+- **Templates** -- Reusable pipeline blueprints (see [Templates](templates.md)).
+- **Shared Components** -- Reusable component configurations (this page).
+
+### Shared components list
+
+The list shows all shared components in the currently selected environment:
+
+| Column | Description |
+|--------|-------------|
+| **Name** | The shared component name. Click to open the detail page. |
+| **Type** | The Vector component type (e.g., `elasticsearch`, `kafka`). |
+| **Kind** | A badge indicating Source, Transform, or Sink. |
+| **Linked Pipelines** | Number of distinct pipelines using this shared component. |
+| **Version** | Current version number (increments on each config change). |
+| **Last Updated** | When the configuration was last modified. |
+
+## Creating a shared component
+
+There are two ways to create a shared component.
+
+### From the Library page
+
+{% stepper %}
+{% step %}
+### Open the Library
+Navigate to **Library > Shared Components** in the sidebar and click **New Shared Component**.
+{% endstep %}
+{% step %}
+### Choose a component type
+Select the component type from the catalog grid (e.g., Elasticsearch, Kafka, S3).
+{% endstep %}
+{% step %}
+### Configure
+Enter a **Name** and optional **Description**, then fill in the component configuration using the form editor. Click **Create** to save.
+{% endstep %}
+{% endstepper %}
+
+### From the pipeline editor
+
+{% stepper %}
+{% step %}
+### Right-click a node
+In the pipeline editor, right-click any configured node on the canvas.
+{% endstep %}
+{% step %}
+### Select Save as Shared Component
+Choose **Save as Shared Component** from the context menu. A dialog opens.
+{% endstep %}
+{% step %}
+### Name and save
+Enter a **Name** and optional **Description**, then click **Save**. The node's current configuration becomes the shared component, and the node is automatically linked to it.
+{% endstep %}
+{% endstepper %}
+
+## Using shared components in pipelines
+
+### Adding from the component palette
+
+The component palette (left sidebar in the pipeline editor) has two tabs:
+
+- **Catalog** -- The standard list of all Vector component types.
+- **Shared** -- Shared components available in the current environment.
+
+The Shared tab includes kind filter buttons (All, Source, Transform, Sink) and supports search by name or component type. Drag a shared component from the list onto the canvas to create a linked node with the shared configuration pre-filled.
+
+### Linked node appearance
+
+Linked nodes are visually distinct on the canvas:
+
+- **Purple accent border** -- A purple border and subtle glow distinguish linked nodes from regular ones.
+- **Footer** -- Shows "Shared" with a link icon.
+- **Stale indicator** -- When an update is available, the footer changes to "Update available" in amber, and a small amber dot appears on the node corner.
+
+### Detail panel for linked nodes
+
+When you select a linked node, the detail panel shows:
+
+- A **purple banner** with the shared component name and an "Open in Library" link.
+- **Read-only configuration** -- Config fields are disabled because the configuration is managed centrally. To edit, go to the Library page.
+- An **Unlink** button in the header to convert back to a regular editable node.
+
+{% hint style="warning" %}
+Unlinking a node preserves its current configuration but breaks the connection to the shared component. Future updates to the shared component will not reach this node.
+{% endhint %}
+
+## Editing a shared component
+
+{% stepper %}
+{% step %}
+### Open the detail page
+Navigate to **Library > Shared Components** and click the shared component you want to edit.
+{% endstep %}
+{% step %}
+### Modify the configuration
+Update the configuration using the form editor. You can also edit the name and description.
+{% endstep %}
+{% step %}
+### Save
+Click **Save**. The version number increments automatically, and all linked pipelines will see an "Update available" indicator.
+{% endstep %}
+{% endstepper %}
+
+The detail page also shows a **Linked Pipelines** section listing every pipeline that uses this shared component, with a badge indicating whether each is up to date or has a pending update.
+
+## Accepting updates
+
+When a shared component is updated, linked pipeline nodes become stale. Pipeline owners decide when to accept the new configuration.
+
+### Single node
+
+Select the stale node in the pipeline editor. The detail panel shows an amber banner with an **Accept update** button. Click it to pull in the latest configuration and update the pinned version.
+
+### All nodes in a pipeline
+
+If a pipeline has multiple stale linked nodes, you can accept all updates at once from the pipeline's toolbar or through the API.
+
+{% hint style="info" %}
+Accepting an update modifies the pipeline's saved configuration but does not automatically redeploy. You still need to deploy the pipeline to push the changes to agents.
+{% endhint %}
+
+## Deleting a shared component
+
+On the shared component detail page, scroll to the **Danger Zone** section and click **Delete**. A confirmation dialog explains what will happen:
+
+- All linked pipeline nodes are **unlinked** -- their configurations remain intact, but they become regular standalone nodes.
+- The shared component is permanently removed from the Library.
+
+{% hint style="danger" %}
+Deleting a shared component cannot be undone. Linked nodes keep their last-synced configuration but lose the ability to receive future updates.
+{% endhint %}
+
+## Edge cases
+
+| Scenario | Behavior |
+|----------|----------|
+| **Cloning a pipeline** | Linked nodes in the clone remain linked to the same shared components. |
+| **Promoting a pipeline** | Shared component links are stripped during cross-environment promotion. Nodes retain their config snapshots as regular standalone nodes. |
+| **Saving as template** | Templates are portable across environments, so shared component links are stripped. Template nodes store config snapshots only. |
+| **Discarding changes** | Reverting to a previous version restores the shared component links as they were at that version. |
+| **Copy/paste nodes** | Pasted nodes retain their link to the same shared component. |
+| **GitOps / YAML export** | Generated YAML uses the resolved config snapshot. Importing from YAML creates regular unlinked nodes. |
diff --git a/docs/public/user-guide/templates.md b/docs/public/user-guide/templates.md
index 7aa23d46..49b72e4d 100644
--- a/docs/public/user-guide/templates.md
+++ b/docs/public/user-guide/templates.md
@@ -4,7 +4,7 @@ Templates are reusable pipeline blueprints that capture a complete pipeline grap
 
 ## Template library
 
-The **Templates** page displays all templates available to your team as a card grid. Each card shows:
+Templates are found in the **Library** page (accessible from the sidebar), under the **Templates** tab. The page displays all templates available to your team as a card grid. Each card shows:
 
 - **Name** -- The template name.
 - **Category** -- A label such as Logging, Metrics, Archival, Streaming, or a custom category you define.
@@ -44,8 +44,8 @@ Click **Save Template**. The template now appears in the template library for al
 
 {% stepper %}
 {% step %}
-### Open the Templates page
-Navigate to **Templates** in the sidebar. Make sure you have an environment selected in the header.
+### Open the Library
+Navigate to **Library > Templates** in the sidebar. Make sure you have an environment selected in the header.
 {% endstep %}
 {% step %}
 ### Choose a template
@@ -72,6 +72,7 @@ Templates are designed to be portable across environments, so they intentionally
 - **Secrets** -- Secret values (API keys, passwords, tokens) are never stored in templates. You must configure secrets in the target environment after creating a pipeline from a template.
 - **Certificates** -- TLS certificates are environment-specific and are not included.
 - **Environment bindings** -- Templates are not tied to any specific environment. They can be used in any environment within the team.
+- **Shared component links** -- Nodes that are linked to [shared components](shared-components.md) have their links stripped when saved as a template. The node's configuration snapshot is preserved, but the template node becomes a standalone component.
 - **Deployment state** -- Pipelines created from templates start as drafts. You deploy them when ready.
 
 {% hint style="warning" %}
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 01738443..19eb7b7f 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -133,6 +133,7 @@ model Environment {
   serviceAccounts         ServiceAccount[]
   deployRequests          DeployRequest[]
   teamDefaults            Team[]            @relation("teamDefault")
+  sharedComponents        SharedComponent[]
   createdAt               DateTime      @default(now())
 }
 
@@ -370,6 +371,11 @@ model PipelineNode {
   positionX     Float
   positionY     Float
   disabled      Boolean       @default(false)
+  sharedComponentId       String?
+  sharedComponent         SharedComponent? @relation(fields: [sharedComponentId], references: [id], onDelete: SetNull)
+  sharedComponentVersion  Int?
+
+  @@index([sharedComponentId])
 }
 
 enum ComponentKind {
@@ -387,6 +393,25 @@ model PipelineEdge {
   sourcePort   String?
 }
 
+model SharedComponent {
+  id              String        @id @default(cuid())
+  name            String
+  description     String?
+  componentType   String
+  kind            ComponentKind
+  config          Json
+  version         Int           @default(1)
+  environmentId   String
+  environment     Environment   @relation(fields: [environmentId], references: [id])
+  createdAt       DateTime      @default(now())
+  updatedAt       DateTime      @updatedAt
+
+  linkedNodes     PipelineNode[]
+
+  @@unique([environmentId, name])
+  @@index([environmentId])
+}
+
 model PipelineVersion {
   id          String   @id @default(cuid())
   pipelineId  String
diff --git a/src/app/(dashboard)/library/layout.tsx b/src/app/(dashboard)/library/layout.tsx
new file mode 100644
index 00000000..575b6201
--- /dev/null
+++ b/src/app/(dashboard)/library/layout.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { FileText, Link2 } from "lucide-react";
+
+const libraryNavItems = [
+  { title: "Templates", href: "/library/templates", icon: FileText },
+  { title: "Shared Components", href: "/library/shared-components", icon: Link2 },
+];
+
+export default function LibraryLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  return (
+    <div className="flex h-full">
+      <aside className="flex w-56 shrink-0 flex-col border-r bg-background">
+        <div className="p-4">
+          <h2 className="text-lg font-semibold">Library</h2>
+          <p className="text-xs text-muted-foreground">Reusable templates and components</p>
+        </div>
+        <nav className="flex-1 space-y-1 px-3 pb-4">
+          {libraryNavItems.map((item) => {
+            const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
+            return (
+              <button
+                key={item.href}
+                onClick={() => router.push(item.href)}
+                className={cn(
+                  "flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors",
+                  isActive
+                    ? "bg-accent font-medium text-accent-foreground"
+                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                )}
+              >
+                <item.icon className="h-4 w-4" />
+                {item.title}
+              </button>
+            );
+          })}
+        </nav>
+      </aside>
+      <main className="flex-1 overflow-auto">{children}</main>
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/library/page.tsx b/src/app/(dashboard)/library/page.tsx
new file mode 100644
index 00000000..dae1da6c
--- /dev/null
+++ b/src/app/(dashboard)/library/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function LibraryPage() {
+  redirect("/library/templates");
+}
diff --git a/src/app/(dashboard)/library/shared-components/[id]/page.tsx b/src/app/(dashboard)/library/shared-components/[id]/page.tsx
new file mode 100644
index 00000000..30cf78e5
--- /dev/null
+++ b/src/app/(dashboard)/library/shared-components/[id]/page.tsx
@@ -0,0 +1,388 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTRPC } from "@/trpc/client";
+import { useEnvironmentStore } from "@/stores/environment-store";
+import { findComponentDef } from "@/lib/vector/catalog";
+import { toast } from "sonner";
+import Link from "next/link";
+import {
+  ArrowLeft,
+  ExternalLink,
+  Link2,
+  Loader2,
+  Save,
+  Trash2,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ConfirmDialog } from "@/components/confirm-dialog";
+import { SchemaForm } from "@/components/config-forms/schema-form";
+
+/* ------------------------------------------------------------------ */
+/*  Kind badge styling                                                 */
+/* ------------------------------------------------------------------ */
+
+const kindVariant: Record<string, string> = {
+  SOURCE:
+    "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300",
+  TRANSFORM:
+    "bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-300",
+  SINK: "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
+};
+
+/* ------------------------------------------------------------------ */
+/*  Page Component                                                     */
+/* ------------------------------------------------------------------ */
+
+export default function SharedComponentDetailPage() {
+  const params = useParams<{ id: string }>();
+  const router = useRouter();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const selectedEnvironmentId = useEnvironmentStore(
+    (s) => s.selectedEnvironmentId,
+  );
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [config, setConfig] = useState<Record<string, unknown>>({});
+  const [hasChanges, setHasChanges] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  const componentQuery = useQuery(
+    trpc.sharedComponent.getById.queryOptions(
+      { id: params.id, environmentId: selectedEnvironmentId! },
+      {
+        enabled: !!selectedEnvironmentId && !!params.id,
+      },
+    ),
+  );
+
+  const sc = componentQuery.data;
+
+  // Initialize form state from fetched data
+  if (sc && !initialized) {
+    setName(sc.name);
+    setDescription(sc.description ?? "");
+    setConfig((sc.config as Record<string, unknown>) ?? {});
+    setInitialized(true);
+  }
+
+  const componentDef = sc
+    ? findComponentDef(sc.componentType, sc.kind.toLowerCase() as "source" | "transform" | "sink")
+    : undefined;
+
+  const handleNameChange = useCallback((val: string) => {
+    setName(val);
+    setHasChanges(true);
+  }, []);
+
+  const handleDescriptionChange = useCallback((val: string) => {
+    setDescription(val);
+    setHasChanges(true);
+  }, []);
+
+  const handleConfigChange = useCallback((vals: Record<string, unknown>) => {
+    setConfig(vals);
+    setHasChanges(true);
+  }, []);
+
+  const updateMutation = useMutation(
+    trpc.sharedComponent.update.mutationOptions({
+      onSuccess: () => {
+        toast.success("Shared component updated");
+        setHasChanges(false);
+        queryClient.invalidateQueries({
+          queryKey: trpc.sharedComponent.getById.queryKey(),
+        });
+        queryClient.invalidateQueries({
+          queryKey: trpc.sharedComponent.list.queryKey(),
+        });
+      },
+      onError: (err) => {
+        toast.error(err.message);
+      },
+    }),
+  );
+
+  const deleteMutation = useMutation(
+    trpc.sharedComponent.delete.mutationOptions({
+      onSuccess: () => {
+        toast.success("Shared component deleted");
+        router.push("/library/shared-components");
+      },
+      onError: (err) => {
+        toast.error(err.message);
+      },
+    }),
+  );
+
+  const handleSave = () => {
+    if (!sc || !selectedEnvironmentId) return;
+    updateMutation.mutate({
+      id: sc.id,
+      environmentId: selectedEnvironmentId,
+      name,
+      description: description || null,
+      config,
+    });
+  };
+
+  const handleDelete = () => {
+    if (!sc || !selectedEnvironmentId) return;
+    deleteMutation.mutate({ id: sc.id, environmentId: selectedEnvironmentId });
+  };
+
+  if (!selectedEnvironmentId) {
+    return (
+      <div className="p-6">
+        <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
+          Select an environment from the header to view this component
+        </div>
+      </div>
+    );
+  }
+
+  if (componentQuery.isLoading) {
+    return (
+      <div className="space-y-6 p-6">
+        <Skeleton className="h-8 w-48" />
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="lg:col-span-2 space-y-6">
+            <Skeleton className="h-48 w-full" />
+            <Skeleton className="h-64 w-full" />
+          </div>
+          <div className="space-y-6">
+            <Skeleton className="h-48 w-full" />
+            <Skeleton className="h-32 w-full" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!sc) {
+    return (
+      <div className="p-6">
+        <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
+          Shared component not found
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Back + Header */}
+      <div className="space-y-4">
+        <Link
+          href="/library/shared-components"
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to Shared Components
+        </Link>
+
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <h1 className="text-lg font-semibold tracking-tight">{sc.name}</h1>
+              <Badge variant="outline" className={kindVariant[sc.kind] ?? ""}>
+                {sc.kind}
+              </Badge>
+              <Badge variant="secondary">v{sc.version}</Badge>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              {sc.componentType} &middot; {sc.linkedPipelines.length} linked{" "}
+              {sc.linkedPipelines.length === 1 ? "pipeline" : "pipelines"}
+            </p>
+          </div>
+          <Button
+            onClick={handleSave}
+            disabled={!hasChanges || updateMutation.isPending}
+          >
+            {updateMutation.isPending ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="mr-2 h-4 w-4" />
+            )}
+            {updateMutation.isPending ? "Saving..." : "Save"}
+          </Button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Left column */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Details card */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Details</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="name">Name</Label>
+                <Input
+                  id="name"
+                  value={name}
+                  onChange={(e) => handleNameChange(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  value={description}
+                  onChange={(e) => handleDescriptionChange(e.target.value)}
+                  placeholder="Optional description..."
+                  rows={3}
+                />
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Config card */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Configuration</CardTitle>
+              <CardDescription>
+                Edit the component configuration below.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {componentDef ? (
+                <SchemaForm
+                  schema={componentDef.configSchema as { type?: string; properties?: Record<string, Record<string, unknown>>; required?: string[] }}
+                  values={config}
+                  onChange={handleConfigChange}
+                />
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  Component definition not found for type &quot;{sc.componentType}&quot;.
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Right column */}
+        <div className="space-y-6">
+          {/* Linked pipelines card */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Link2 className="h-4 w-4" />
+                Linked Pipelines
+              </CardTitle>
+              <CardDescription>
+                Pipelines using this shared component
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {sc.linkedPipelines.length === 0 ? (
+                <p className="text-sm text-muted-foreground">
+                  No pipelines are linked to this component.
+                </p>
+              ) : (
+                <div className="space-y-3">
+                  {sc.linkedPipelines.map((pipeline) => (
+                    <div
+                      key={pipeline.id}
+                      className="flex items-center justify-between gap-2"
+                    >
+                      <div className="flex items-center gap-2 min-w-0">
+                        <span className="truncate text-sm font-medium">
+                          {pipeline.name}
+                        </span>
+                        {pipeline.isStale ? (
+                          <Badge
+                            variant="outline"
+                            className="bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 shrink-0"
+                          >
+                            Update pending
+                          </Badge>
+                        ) : (
+                          <Badge
+                            variant="outline"
+                            className="bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300 shrink-0"
+                          >
+                            Up to date
+                          </Badge>
+                        )}
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        asChild
+                        className="shrink-0"
+                      >
+                        <Link href={`/pipelines/${pipeline.id}`}>
+                          <ExternalLink className="h-4 w-4" />
+                        </Link>
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Danger zone */}
+          <Card className="border-destructive/50">
+            <CardHeader>
+              <CardTitle className="text-destructive">Danger Zone</CardTitle>
+              <CardDescription>
+                Permanently delete this shared component. All linked pipeline
+                nodes will be unlinked.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button
+                variant="destructive"
+                onClick={() => setDeleteOpen(true)}
+                disabled={deleteMutation.isPending}
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete Component
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      <ConfirmDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        title="Delete shared component?"
+        description={
+          <>
+            Permanently delete{" "}
+            <span className="font-medium">{sc.name}</span>? All linked pipeline
+            nodes will be unlinked. This action cannot be undone.
+          </>
+        }
+        confirmLabel="Delete"
+        isPending={deleteMutation.isPending}
+        pendingLabel="Deleting..."
+        onConfirm={handleDelete}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/library/shared-components/new/page.tsx b/src/app/(dashboard)/library/shared-components/new/page.tsx
new file mode 100644
index 00000000..c4ecfb56
--- /dev/null
+++ b/src/app/(dashboard)/library/shared-components/new/page.tsx
@@ -0,0 +1,291 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useMutation } from "@tanstack/react-query";
+import { useTRPC } from "@/trpc/client";
+import { useEnvironmentStore } from "@/stores/environment-store";
+import { VECTOR_CATALOG } from "@/lib/vector/catalog";
+import { toast } from "sonner";
+import Link from "next/link";
+import { ArrowLeft, Loader2, Plus, Search } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { SchemaForm } from "@/components/config-forms/schema-form";
+
+import type { VectorComponentDef } from "@/lib/vector/types";
+
+/* ------------------------------------------------------------------ */
+/*  Kind badge styling                                                 */
+/* ------------------------------------------------------------------ */
+
+const kindVariant: Record<string, string> = {
+  source:
+    "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300",
+  transform:
+    "bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-300",
+  sink: "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
+};
+
+/* ------------------------------------------------------------------ */
+/*  Page Component                                                     */
+/* ------------------------------------------------------------------ */
+
+type Step = "select" | "configure";
+
+export default function NewSharedComponentPage() {
+  const router = useRouter();
+  const trpc = useTRPC();
+  const selectedEnvironmentId = useEnvironmentStore(
+    (s) => s.selectedEnvironmentId,
+  );
+
+  const [step, setStep] = useState<Step>("select");
+  const [search, setSearch] = useState("");
+  const [selectedComponent, setSelectedComponent] =
+    useState<VectorComponentDef | null>(null);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [config, setConfig] = useState<Record<string, unknown>>({});
+
+  const filteredCatalog = useMemo(() => {
+    if (!search) return VECTOR_CATALOG;
+    const q = search.toLowerCase();
+    return VECTOR_CATALOG.filter(
+      (c) =>
+        c.displayName.toLowerCase().includes(q) ||
+        c.type.toLowerCase().includes(q) ||
+        c.kind.toLowerCase().includes(q) ||
+        c.description.toLowerCase().includes(q),
+    );
+  }, [search]);
+
+  const createMutation = useMutation(
+    trpc.sharedComponent.create.mutationOptions({
+      onSuccess: (sc) => {
+        toast.success("Shared component created");
+        router.push(`/library/shared-components/${sc.id}`);
+      },
+      onError: (err) => {
+        toast.error(err.message);
+      },
+    }),
+  );
+
+  const handleSelectComponent = (comp: VectorComponentDef) => {
+    setSelectedComponent(comp);
+    setName(comp.displayName);
+    setConfig({});
+    setStep("configure");
+  };
+
+  const handleCreate = () => {
+    if (!selectedComponent || !selectedEnvironmentId || !name.trim()) return;
+    createMutation.mutate({
+      environmentId: selectedEnvironmentId,
+      name: name.trim(),
+      description: description || undefined,
+      componentType: selectedComponent.type,
+      kind: selectedComponent.kind.toUpperCase() as "SOURCE" | "TRANSFORM" | "SINK",
+      config,
+    });
+  };
+
+  if (!selectedEnvironmentId) {
+    return (
+      <div className="space-y-8 p-6">
+        <Link
+          href="/library/shared-components"
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to Shared Components
+        </Link>
+        <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
+          Select an environment from the header to create a shared component
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Back link */}
+      {step === "select" ? (
+        <Link
+          href="/library/shared-components"
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to Shared Components
+        </Link>
+      ) : (
+        <button
+          onClick={() => setStep("select")}
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to Component Selection
+        </button>
+      )}
+
+      {step === "select" && (
+        <>
+          <div className="space-y-1">
+            <h1 className="text-lg font-semibold tracking-tight">
+              New Shared Component
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              Choose a component type to create a reusable shared component.
+            </p>
+          </div>
+
+          {/* Search */}
+          <div className="relative max-w-sm">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="Search components..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          {/* Component grid */}
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {filteredCatalog.map((comp) => (
+              <Card
+                key={`${comp.kind}-${comp.type}`}
+                className="cursor-pointer transition-colors hover:bg-accent/50"
+                onClick={() => handleSelectComponent(comp)}
+              >
+                <CardHeader className="pb-2">
+                  <div className="flex items-start justify-between gap-2">
+                    <CardTitle className="text-sm">
+                      {comp.displayName}
+                    </CardTitle>
+                    <Badge
+                      variant="outline"
+                      className={kindVariant[comp.kind] ?? ""}
+                    >
+                      {comp.kind}
+                    </Badge>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-xs text-muted-foreground line-clamp-2">
+                    {comp.description}
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {filteredCatalog.length === 0 && (
+            <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
+              <p className="text-muted-foreground">
+                No components match your search.
+              </p>
+            </div>
+          )}
+        </>
+      )}
+
+      {step === "configure" && selectedComponent && (
+        <>
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <h1 className="text-lg font-semibold tracking-tight">
+                New Shared Component
+              </h1>
+              <Badge
+                variant="outline"
+                className={kindVariant[selectedComponent.kind] ?? ""}
+              >
+                {selectedComponent.kind}
+              </Badge>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Configure your {selectedComponent.displayName} shared component.
+            </p>
+          </div>
+
+          <div className="max-w-2xl space-y-6">
+            {/* Details */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Details</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Name</Label>
+                  <Input
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Component name"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="description">Description</Label>
+                  <Textarea
+                    id="description"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="Optional description..."
+                    rows={3}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Config */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Configuration</CardTitle>
+                <CardDescription>
+                  Configure the {selectedComponent.displayName} component.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <SchemaForm
+                  schema={selectedComponent.configSchema as { type?: string; properties?: Record<string, Record<string, unknown>>; required?: string[] }}
+                  values={config}
+                  onChange={setConfig}
+                />
+              </CardContent>
+            </Card>
+
+            {/* Create button */}
+            <div className="flex justify-end">
+              <Button
+                onClick={handleCreate}
+                disabled={!name.trim() || createMutation.isPending}
+              >
+                {createMutation.isPending ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Plus className="mr-2 h-4 w-4" />
+                )}
+                {createMutation.isPending
+                  ? "Creating..."
+                  : "Create Shared Component"}
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/library/shared-components/page.tsx b/src/app/(dashboard)/library/shared-components/page.tsx
new file mode 100644
index 00000000..bffbeb71
--- /dev/null
+++ b/src/app/(dashboard)/library/shared-components/page.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { useTRPC } from "@/trpc/client";
+import { useEnvironmentStore } from "@/stores/environment-store";
+import { Link2, Plus, Search } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { PageHeader } from "@/components/page-header";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                            */
+/* ------------------------------------------------------------------ */
+
+function formatRelativeTime(date: Date | string | null | undefined): string {
+  if (!date) return "Never";
+  const d = typeof date === "string" ? new Date(date) : date;
+  const now = Date.now();
+  const diffMs = now - d.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  if (diffSec < 60) return "Just now";
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDay = Math.floor(diffHr / 24);
+  return `${diffDay}d ago`;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Kind badge styling                                                 */
+/* ------------------------------------------------------------------ */
+
+const kindVariant: Record<string, string> = {
+  SOURCE:
+    "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300",
+  TRANSFORM:
+    "bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-300",
+  SINK: "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
+};
+
+/* ------------------------------------------------------------------ */
+/*  Page Component                                                     */
+/* ------------------------------------------------------------------ */
+
+export default function SharedComponentsPage() {
+  const trpc = useTRPC();
+  const router = useRouter();
+  const selectedEnvironmentId = useEnvironmentStore(
+    (s) => s.selectedEnvironmentId,
+  );
+  const [search, setSearch] = useState("");
+
+  const componentsQuery = useQuery(
+    trpc.sharedComponent.list.queryOptions(
+      { environmentId: selectedEnvironmentId! },
+      { enabled: !!selectedEnvironmentId },
+    ),
+  );
+
+  const components = componentsQuery.data ?? [];
+
+  const filtered = components.filter((sc) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    return (
+      sc.name.toLowerCase().includes(q) ||
+      sc.componentType.toLowerCase().includes(q)
+    );
+  });
+
+  if (!selectedEnvironmentId) {
+    return (
+      <div className="space-y-8">
+        <PageHeader title="Shared Components" />
+        <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
+          Select an environment from the header to view shared components
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <PageHeader
+        title="Shared Components"
+        actions={
+          <Button onClick={() => router.push("/library/shared-components/new")}>
+            <Plus className="mr-2 h-4 w-4" />
+            New Shared Component
+          </Button>
+        }
+      />
+
+      {/* Search */}
+      <div className="relative max-w-sm">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder="Search by name or type..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+
+      {componentsQuery.isLoading ? (
+        <div className="space-y-2">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} className="h-12 w-full" />
+          ))}
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
+          <Link2 className="h-10 w-10 text-muted-foreground mb-3" />
+          <p className="text-muted-foreground">
+            {components.length === 0
+              ? "No shared components yet. Create one to get started."
+              : "No components match your search."}
+          </p>
+        </div>
+      ) : (
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Type</TableHead>
+                <TableHead>Kind</TableHead>
+                <TableHead>Linked Pipelines</TableHead>
+                <TableHead>Version</TableHead>
+                <TableHead>Last Updated</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.map((sc) => (
+                <TableRow
+                  key={sc.id}
+                  className="cursor-pointer"
+                  onClick={() => router.push(`/library/shared-components/${sc.id}`)}
+                >
+                  <TableCell>
+                    <div className="flex items-center gap-2 font-medium">
+                      <Link2 className="h-4 w-4 text-muted-foreground" />
+                      {sc.name}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {sc.componentType}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className={kindVariant[sc.kind] ?? ""}>
+                      {sc.kind}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>{sc.linkedPipelineCount}</TableCell>
+                  <TableCell>v{sc.version}</TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {formatRelativeTime(sc.updatedAt)}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/library/templates/page.tsx b/src/app/(dashboard)/library/templates/page.tsx
new file mode 100644
index 00000000..54b07227
--- /dev/null
+++ b/src/app/(dashboard)/library/templates/page.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTRPC } from "@/trpc/client";
+import { useEnvironmentStore } from "@/stores/environment-store";
+import { generateId } from "@/lib/utils";
+import { useTeamStore } from "@/stores/team-store";
+import {
+  FileText,
+  Trash2,
+  ArrowRight,
+  Database,
+  Cloud,
+  Radio,
+  Cpu,
+  Terminal,
+  Play,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ConfirmDialog } from "@/components/confirm-dialog";
+import { PageHeader } from "@/components/page-header";
+
+/* ------------------------------------------------------------------ */
+/*  Category icon mapping                                              */
+/* ------------------------------------------------------------------ */
+
+const categoryIcons: Record<string, React.ReactNode> = {
+  "Getting Started": <Play className="h-4 w-4" />,
+  Logging: <FileText className="h-4 w-4" />,
+  Archival: <Cloud className="h-4 w-4" />,
+  Streaming: <Radio className="h-4 w-4" />,
+  Metrics: <Cpu className="h-4 w-4" />,
+};
+
+const categoryColors: Record<string, string> = {
+  "Getting Started":
+    "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300",
+  Logging:
+    "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+  Archival:
+    "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300",
+  Streaming:
+    "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
+  Metrics:
+    "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300",
+};
+
+/* ------------------------------------------------------------------ */
+/*  Page Component                                                     */
+/* ------------------------------------------------------------------ */
+
+export default function TemplatesPage() {
+  const trpc = useTRPC();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const selectedEnvironmentId = useEnvironmentStore(
+    (s) => s.selectedEnvironmentId,
+  );
+
+  const selectedTeamId = useTeamStore((s) => s.selectedTeamId);
+
+  // Fetch templates for the selected team
+  const templatesQuery = useQuery(
+    trpc.template.list.queryOptions(
+      { teamId: selectedTeamId! },
+      { enabled: !!selectedTeamId },
+    ),
+  );
+
+  const templates = templatesQuery.data ?? [];
+
+  // Create pipeline from template
+  const createPipelineMutation = useMutation(
+    trpc.pipeline.create.mutationOptions({
+      onSuccess: async (pipeline) => {
+        // Now load the template graph into the new pipeline
+        return pipeline;
+      },
+    }),
+  );
+
+  const saveGraphMutation = useMutation(
+    trpc.pipeline.saveGraph.mutationOptions({
+      onSuccess: (pipeline) => {
+        router.push(`/pipelines/${pipeline.id}`);
+      },
+    }),
+  );
+
+  const [deleteConfirm, setDeleteConfirm] = useState<{ id: string; name: string } | null>(null);
+
+  const deleteTemplateMutation = useMutation(
+    trpc.template.delete.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: trpc.template.list.queryKey() });
+        setDeleteConfirm(null);
+      },
+    }),
+  );
+
+  const handleUseTemplate = async (templateId: string) => {
+    if (!selectedEnvironmentId) return;
+
+    // Get the full template data
+    const template = await queryClient.fetchQuery(
+      trpc.template.get.queryOptions({ id: templateId }),
+    );
+
+    // Create a new pipeline
+    const pipeline = await createPipelineMutation.mutateAsync({
+      name: `${template.name} Pipeline`,
+      description: `Created from template: ${template.description}`,
+      environmentId: selectedEnvironmentId,
+    });
+
+    // Map template nodes to pipeline nodes
+    const templateNodes = template.nodes as Array<{
+      id: string;
+      componentType: string;
+      componentKey: string;
+      kind: string;
+      config: Record<string, unknown>;
+      positionX: number;
+      positionY: number;
+    }>;
+
+    const templateEdges = template.edges as Array<{
+      id: string;
+      sourceNodeId: string;
+      targetNodeId: string;
+      sourcePort?: string;
+    }>;
+
+    // Generate new IDs for nodes and update edge references
+    const idMap = new Map<string, string>();
+    const pipelineNodes = templateNodes.map((n) => {
+      const newId = generateId();
+      idMap.set(n.id, newId);
+      return {
+        id: newId,
+        componentKey: n.componentKey,
+        componentType: n.componentType,
+        kind: n.kind.toUpperCase() as "SOURCE" | "TRANSFORM" | "SINK",
+        config: n.config,
+        positionX: n.positionX,
+        positionY: n.positionY,
+      };
+    });
+
+    const pipelineEdges = templateEdges.map((e) => ({
+      id: generateId(),
+      sourceNodeId: idMap.get(e.sourceNodeId) ?? e.sourceNodeId,
+      targetNodeId: idMap.get(e.targetNodeId) ?? e.targetNodeId,
+      sourcePort: e.sourcePort,
+    }));
+
+    await saveGraphMutation.mutateAsync({
+      pipelineId: pipeline.id,
+      nodes: pipelineNodes,
+      edges: pipelineEdges,
+    });
+  };
+
+  const isLoading = templatesQuery.isLoading;
+  const isCreating =
+    createPipelineMutation.isPending || saveGraphMutation.isPending;
+
+  return (
+    <div className="space-y-8">
+      <PageHeader title="Templates" />
+      {/* Environment notice */}
+      {!selectedEnvironmentId && (
+        <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
+          Select an environment from the header to use templates
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} className="h-48 w-full" />
+          ))}
+        </div>
+      ) : templates.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
+          <Terminal className="h-10 w-10 text-muted-foreground mb-3" />
+          <p className="text-muted-foreground">
+            No templates yet. Save a pipeline as a template to get started.
+          </p>
+        </div>
+      ) : (
+        <section className="space-y-4">
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {templates.map((template) => (
+              <Card key={template.id} className="cursor-pointer flex flex-col">
+                <CardHeader className="pb-3">
+                  <div className="flex items-start justify-between gap-2">
+                    <CardTitle className="text-base">
+                      {template.name}
+                    </CardTitle>
+                    <Badge
+                      variant="outline"
+                      className={categoryColors[template.category] ?? ""}
+                    >
+                      {categoryIcons[template.category] ?? null}
+                      <span className={categoryIcons[template.category] ? "ml-1" : ""}>
+                        {template.category}
+                      </span>
+                    </Badge>
+                  </div>
+                  <CardDescription className="text-xs">
+                    {template.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="flex-1 pb-3">
+                  <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <Database className="h-3 w-3" />
+                      {template.nodeCount} nodes
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <ArrowRight className="h-3 w-3" />
+                      {template.edgeCount} edges
+                    </span>
+                  </div>
+                </CardContent>
+                <CardFooter className="flex gap-2 pt-0">
+                  <Button
+                    size="sm"
+                    className="flex-1"
+                    disabled={!selectedEnvironmentId || isCreating}
+                    onClick={() => handleUseTemplate(template.id)}
+                  >
+                    {isCreating ? "Creating..." : "Use Template"}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="text-destructive hover:text-destructive"
+                    onClick={() => setDeleteConfirm({ id: template.id, name: template.name })}
+                    disabled={deleteTemplateMutation.isPending}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </CardFooter>
+              </Card>
+            ))}
+          </div>
+        </section>
+      )}
+      <ConfirmDialog
+        open={!!deleteConfirm}
+        onOpenChange={(open) => !open && setDeleteConfirm(null)}
+        title="Delete template?"
+        description={<>Permanently delete <span className="font-medium">{deleteConfirm?.name}</span>? This action cannot be undone.</>}
+        confirmLabel="Delete"
+        isPending={deleteTemplateMutation.isPending}
+        pendingLabel="Deleting..."
+        onConfirm={() => {
+          if (!deleteConfirm) return;
+          deleteTemplateMutation.mutate({ id: deleteConfirm.id });
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/pipelines/[id]/page.tsx b/src/app/(dashboard)/pipelines/[id]/page.tsx
index bf2d877e..45eba29f 100644
--- a/src/app/(dashboard)/pipelines/[id]/page.tsx
+++ b/src/app/(dashboard)/pipelines/[id]/page.tsx
@@ -63,6 +63,12 @@ function dbNodesToFlowNodes(
     positionX: number;
     positionY: number;
     disabled?: boolean;
+    sharedComponentId?: string | null;
+    sharedComponentVersion?: number | null;
+    sharedComponent?: {
+      name: string;
+      version: number;
+    } | null;
   }>
 ): Node[] {
   return dbNodes.map((n) => {
@@ -86,6 +92,10 @@ function dbNodesToFlowNodes(
         displayName: n.displayName ?? undefined,
         config: (n.config as Record<string, unknown>) ?? {},
         disabled: n.disabled ?? false,
+        sharedComponentId: n.sharedComponentId ?? null,
+        sharedComponentVersion: n.sharedComponentVersion ?? null,
+        sharedComponentName: n.sharedComponent?.name ?? null,
+        sharedComponentLatestVersion: n.sharedComponent?.version ?? null,
       },
     };
   });
@@ -308,6 +318,8 @@ function PipelineBuilderInner({ pipelineId }: { pipelineId: string }) {
         positionX: n.position.x,
         positionY: n.position.y,
         disabled: !!((n.data as Record<string, unknown>).disabled),
+        sharedComponentId: ((n.data as Record<string, unknown>).sharedComponentId as string | null) ?? null,
+        sharedComponentVersion: ((n.data as Record<string, unknown>).sharedComponentVersion as number | null) ?? null,
       })),
       edges: state.edges.map((e) => ({
         id: e.id,
diff --git a/src/app/(dashboard)/pipelines/page.tsx b/src/app/(dashboard)/pipelines/page.tsx
index 22ed3103..77434eca 100644
--- a/src/app/(dashboard)/pipelines/page.tsx
+++ b/src/app/(dashboard)/pipelines/page.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTRPC } from "@/trpc/client";
 import { toast } from "sonner";
-import { Plus, MoreHorizontal, Copy, Trash2, BarChart3, ArrowUpRight, Clock } from "lucide-react";
+import { Plus, MoreHorizontal, Copy, Trash2, BarChart3, ArrowUpRight, Clock, AlertTriangle } from "lucide-react";
 import { useEnvironmentStore } from "@/stores/environment-store";
 import { useTeamStore } from "@/stores/team-store";
 
@@ -323,6 +323,16 @@ export default function PipelinesPage() {
                       <TooltipContent>Pending Approval</TooltipContent>
                     </Tooltip>
                   )}
+                  {pipeline.hasStaleComponents && (
+                    <Badge
+                      variant="secondary"
+                      className="bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300"
+                      title={`Updates available for: ${pipeline.staleComponentNames?.join(", ")}`}
+                    >
+                      <AlertTriangle className="mr-1 h-3 w-3" />
+                      Updates available
+                    </Badge>
+                  )}
                   </div>
                 </TableCell>
                 {/* Health */}
diff --git a/src/app/(dashboard)/templates/page.tsx b/src/app/(dashboard)/templates/page.tsx
index 54b07227..1c5a5e6e 100644
--- a/src/app/(dashboard)/templates/page.tsx
+++ b/src/app/(dashboard)/templates/page.tsx
@@ -1,279 +1,5 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useTRPC } from "@/trpc/client";
-import { useEnvironmentStore } from "@/stores/environment-store";
-import { generateId } from "@/lib/utils";
-import { useTeamStore } from "@/stores/team-store";
-import {
-  FileText,
-  Trash2,
-  ArrowRight,
-  Database,
-  Cloud,
-  Radio,
-  Cpu,
-  Terminal,
-  Play,
-} from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-import { ConfirmDialog } from "@/components/confirm-dialog";
-import { PageHeader } from "@/components/page-header";
-
-/* ------------------------------------------------------------------ */
-/*  Category icon mapping                                              */
-/* ------------------------------------------------------------------ */
-
-const categoryIcons: Record<string, React.ReactNode> = {
-  "Getting Started": <Play className="h-4 w-4" />,
-  Logging: <FileText className="h-4 w-4" />,
-  Archival: <Cloud className="h-4 w-4" />,
-  Streaming: <Radio className="h-4 w-4" />,
-  Metrics: <Cpu className="h-4 w-4" />,
-};
-
-const categoryColors: Record<string, string> = {
-  "Getting Started":
-    "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300",
-  Logging:
-    "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
-  Archival:
-    "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300",
-  Streaming:
-    "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
-  Metrics:
-    "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300",
-};
-
-/* ------------------------------------------------------------------ */
-/*  Page Component                                                     */
-/* ------------------------------------------------------------------ */
-
-export default function TemplatesPage() {
-  const trpc = useTRPC();
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const selectedEnvironmentId = useEnvironmentStore(
-    (s) => s.selectedEnvironmentId,
-  );
-
-  const selectedTeamId = useTeamStore((s) => s.selectedTeamId);
-
-  // Fetch templates for the selected team
-  const templatesQuery = useQuery(
-    trpc.template.list.queryOptions(
-      { teamId: selectedTeamId! },
-      { enabled: !!selectedTeamId },
-    ),
-  );
-
-  const templates = templatesQuery.data ?? [];
-
-  // Create pipeline from template
-  const createPipelineMutation = useMutation(
-    trpc.pipeline.create.mutationOptions({
-      onSuccess: async (pipeline) => {
-        // Now load the template graph into the new pipeline
-        return pipeline;
-      },
-    }),
-  );
-
-  const saveGraphMutation = useMutation(
-    trpc.pipeline.saveGraph.mutationOptions({
-      onSuccess: (pipeline) => {
-        router.push(`/pipelines/${pipeline.id}`);
-      },
-    }),
-  );
-
-  const [deleteConfirm, setDeleteConfirm] = useState<{ id: string; name: string } | null>(null);
-
-  const deleteTemplateMutation = useMutation(
-    trpc.template.delete.mutationOptions({
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: trpc.template.list.queryKey() });
-        setDeleteConfirm(null);
-      },
-    }),
-  );
-
-  const handleUseTemplate = async (templateId: string) => {
-    if (!selectedEnvironmentId) return;
-
-    // Get the full template data
-    const template = await queryClient.fetchQuery(
-      trpc.template.get.queryOptions({ id: templateId }),
-    );
-
-    // Create a new pipeline
-    const pipeline = await createPipelineMutation.mutateAsync({
-      name: `${template.name} Pipeline`,
-      description: `Created from template: ${template.description}`,
-      environmentId: selectedEnvironmentId,
-    });
-
-    // Map template nodes to pipeline nodes
-    const templateNodes = template.nodes as Array<{
-      id: string;
-      componentType: string;
-      componentKey: string;
-      kind: string;
-      config: Record<string, unknown>;
-      positionX: number;
-      positionY: number;
-    }>;
-
-    const templateEdges = template.edges as Array<{
-      id: string;
-      sourceNodeId: string;
-      targetNodeId: string;
-      sourcePort?: string;
-    }>;
-
-    // Generate new IDs for nodes and update edge references
-    const idMap = new Map<string, string>();
-    const pipelineNodes = templateNodes.map((n) => {
-      const newId = generateId();
-      idMap.set(n.id, newId);
-      return {
-        id: newId,
-        componentKey: n.componentKey,
-        componentType: n.componentType,
-        kind: n.kind.toUpperCase() as "SOURCE" | "TRANSFORM" | "SINK",
-        config: n.config,
-        positionX: n.positionX,
-        positionY: n.positionY,
-      };
-    });
-
-    const pipelineEdges = templateEdges.map((e) => ({
-      id: generateId(),
-      sourceNodeId: idMap.get(e.sourceNodeId) ?? e.sourceNodeId,
-      targetNodeId: idMap.get(e.targetNodeId) ?? e.targetNodeId,
-      sourcePort: e.sourcePort,
-    }));
-
-    await saveGraphMutation.mutateAsync({
-      pipelineId: pipeline.id,
-      nodes: pipelineNodes,
-      edges: pipelineEdges,
-    });
-  };
-
-  const isLoading = templatesQuery.isLoading;
-  const isCreating =
-    createPipelineMutation.isPending || saveGraphMutation.isPending;
-
-  return (
-    <div className="space-y-8">
-      <PageHeader title="Templates" />
-      {/* Environment notice */}
-      {!selectedEnvironmentId && (
-        <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
-          Select an environment from the header to use templates
-        </div>
-      )}
-
-      {isLoading ? (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {Array.from({ length: 3 }).map((_, i) => (
-            <Skeleton key={i} className="h-48 w-full" />
-          ))}
-        </div>
-      ) : templates.length === 0 ? (
-        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
-          <Terminal className="h-10 w-10 text-muted-foreground mb-3" />
-          <p className="text-muted-foreground">
-            No templates yet. Save a pipeline as a template to get started.
-          </p>
-        </div>
-      ) : (
-        <section className="space-y-4">
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {templates.map((template) => (
-              <Card key={template.id} className="cursor-pointer flex flex-col">
-                <CardHeader className="pb-3">
-                  <div className="flex items-start justify-between gap-2">
-                    <CardTitle className="text-base">
-                      {template.name}
-                    </CardTitle>
-                    <Badge
-                      variant="outline"
-                      className={categoryColors[template.category] ?? ""}
-                    >
-                      {categoryIcons[template.category] ?? null}
-                      <span className={categoryIcons[template.category] ? "ml-1" : ""}>
-                        {template.category}
-                      </span>
-                    </Badge>
-                  </div>
-                  <CardDescription className="text-xs">
-                    {template.description}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="flex-1 pb-3">
-                  <div className="flex items-center gap-4 text-xs text-muted-foreground">
-                    <span className="flex items-center gap-1">
-                      <Database className="h-3 w-3" />
-                      {template.nodeCount} nodes
-                    </span>
-                    <span className="flex items-center gap-1">
-                      <ArrowRight className="h-3 w-3" />
-                      {template.edgeCount} edges
-                    </span>
-                  </div>
-                </CardContent>
-                <CardFooter className="flex gap-2 pt-0">
-                  <Button
-                    size="sm"
-                    className="flex-1"
-                    disabled={!selectedEnvironmentId || isCreating}
-                    onClick={() => handleUseTemplate(template.id)}
-                  >
-                    {isCreating ? "Creating..." : "Use Template"}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    className="text-destructive hover:text-destructive"
-                    onClick={() => setDeleteConfirm({ id: template.id, name: template.name })}
-                    disabled={deleteTemplateMutation.isPending}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </CardFooter>
-              </Card>
-            ))}
-          </div>
-        </section>
-      )}
-      <ConfirmDialog
-        open={!!deleteConfirm}
-        onOpenChange={(open) => !open && setDeleteConfirm(null)}
-        title="Delete template?"
-        description={<>Permanently delete <span className="font-medium">{deleteConfirm?.name}</span>? This action cannot be undone.</>}
-        confirmLabel="Delete"
-        isPending={deleteTemplateMutation.isPending}
-        pendingLabel="Deleting..."
-        onConfirm={() => {
-          if (!deleteConfirm) return;
-          deleteTemplateMutation.mutate({ id: deleteConfirm.id });
-        }}
-      />
-    </div>
-  );
+export default function TemplatesRedirect() {
+  redirect("/library/templates");
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 6fabe042..6b9e2173 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -21,9 +21,11 @@
   --color-node-source: var(--node-source);
   --color-node-transform: var(--node-transform);
   --color-node-sink: var(--node-sink);
+  --color-node-shared: var(--node-shared);
   --color-node-source-foreground: var(--node-source-foreground);
   --color-node-transform-foreground: var(--node-transform-foreground);
   --color-node-sink-foreground: var(--node-sink-foreground);
+  --color-node-shared-foreground: var(--node-shared-foreground);
   --color-status-healthy: var(--status-healthy);
   --color-status-healthy-bg: var(--status-healthy-bg);
   --color-status-healthy-foreground: var(--status-healthy-foreground);
@@ -74,9 +76,11 @@
   --node-source: oklch(0.65 0.18 145);
   --node-transform: oklch(0.60 0.15 250);
   --node-sink: oklch(0.55 0.20 295);
+  --node-shared: oklch(0.60 0.18 300);
   --node-source-foreground: oklch(0.98 0 0);
   --node-transform-foreground: oklch(0.98 0 0);
   --node-sink-foreground: oklch(0.98 0 0);
+  --node-shared-foreground: oklch(0.98 0 0);
   --status-healthy: oklch(0.55 0.17 145);
   --status-healthy-bg: oklch(0.55 0.17 145 / 15%);
   --status-healthy-foreground: oklch(0.35 0.12 145);
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
index d766a82d..235082a3 100644
--- a/src/components/app-sidebar.tsx
+++ b/src/components/app-sidebar.tsx
@@ -43,7 +43,7 @@ const navItems = [
   { title: "Pipelines", href: "/pipelines", icon: Workflow },
   { title: "Fleet", href: "/fleet", icon: Server },
   { title: "Environments", href: "/environments", icon: Layers },
-  { title: "Templates", href: "/templates", icon: FileText },
+  { title: "Library", href: "/library", icon: FileText },
   { title: "Audit Log", href: "/audit", icon: ScrollText },
   { title: "Alerts", href: "/alerts", icon: Bell },
   { title: "Analytics", href: "/analytics", icon: BarChart3 },
diff --git a/src/components/flow/component-palette.tsx b/src/components/flow/component-palette.tsx
index 5cebc6fc..93917798 100644
--- a/src/components/flow/component-palette.tsx
+++ b/src/components/flow/component-palette.tsx
@@ -1,13 +1,16 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { ChevronDown, ChevronRight, Search, PackageOpen } from "lucide-react";
+import { ChevronDown, ChevronRight, Search, PackageOpen, Link2 as LinkIcon } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { VECTOR_CATALOG } from "@/lib/vector/catalog";
 import type { VectorComponentDef } from "@/lib/vector/types";
 import { getIcon } from "./node-icon";
+import { useQuery } from "@tanstack/react-query";
+import { useTRPC } from "@/trpc/client";
+import { useEnvironmentStore } from "@/stores/environment-store";
 
 const kindMeta: Record<
   VectorComponentDef["kind"],
@@ -175,7 +178,17 @@ function CollapsibleSection({
 
 export function ComponentPalette() {
   const [search, setSearch] = useState("");
+  const [activeTab, setActiveTab] = useState<"catalog" | "shared">("catalog");
+  const [sharedKindFilter, setSharedKindFilter] = useState<"all" | "source" | "transform" | "sink">("all");
+  const trpc = useTRPC();
+  const { selectedEnvironmentId } = useEnvironmentStore();
 
+  const sharedComponentsQuery = useQuery(
+    trpc.sharedComponent.list.queryOptions(
+      { environmentId: selectedEnvironmentId! },
+      { enabled: !!selectedEnvironmentId }
+    )
+  );
   const filtered = useMemo(() => {
     if (!search.trim()) return VECTOR_CATALOG;
 
@@ -189,6 +202,20 @@ export function ComponentPalette() {
     );
   }, [search]);
 
+  const filteredShared = useMemo(() => {
+    let items = sharedComponentsQuery.data ?? [];
+    if (sharedKindFilter !== "all") {
+      items = items.filter((sc) => sc.kind.toLowerCase() === sharedKindFilter);
+    }
+    if (!search.trim()) return items;
+    const term = search.toLowerCase().trim();
+    return items.filter(
+      (sc) =>
+        sc.name.toLowerCase().includes(term) ||
+        sc.componentType.toLowerCase().includes(term)
+    );
+  }, [search, sharedComponentsQuery.data, sharedKindFilter]);
+
   const sources = useMemo(
     () => filtered.filter((d) => d.kind === "source"),
     [filtered]
@@ -217,22 +244,142 @@ export function ComponentPalette() {
         </div>
       </div>
 
+      {/* Tab switcher */}
+      <div className="flex border-b px-3">
+        <button
+          className={cn(
+            "flex-1 border-b-2 px-2 py-2 text-xs font-medium transition-colors",
+            activeTab === "catalog"
+              ? "border-foreground text-foreground"
+              : "border-transparent text-muted-foreground hover:text-foreground"
+          )}
+          onClick={() => setActiveTab("catalog")}
+        >
+          Catalog
+        </button>
+        <button
+          className={cn(
+            "flex-1 border-b-2 px-2 py-2 text-xs font-medium transition-colors",
+            activeTab === "shared"
+              ? "border-purple-400 text-foreground"
+              : "border-transparent text-muted-foreground hover:text-foreground"
+          )}
+          onClick={() => setActiveTab("shared")}
+        >
+          <span className="flex items-center justify-center gap-1.5">
+            <LinkIcon className="h-3 w-3" />
+            Shared
+          </span>
+        </button>
+      </div>
+
       {/* Component list */}
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="space-y-1 p-3">
-          <CollapsibleSection kind="source" items={sources} />
-          <CollapsibleSection kind="transform" items={transforms} />
-          <CollapsibleSection kind="sink" items={sinks} />
-
-          {filtered.length === 0 && (
-            <div className="flex flex-col items-center justify-center p-8">
-              <PackageOpen className="h-8 w-8 text-muted-foreground/50" />
-              <p className="mt-2 text-sm text-muted-foreground">
-                No components match your search.
-              </p>
+        {activeTab === "catalog" && (
+          <div className="space-y-1 p-3">
+            <CollapsibleSection kind="source" items={sources} />
+            <CollapsibleSection kind="transform" items={transforms} />
+            <CollapsibleSection kind="sink" items={sinks} />
+
+            {filtered.length === 0 && (
+              <div className="flex flex-col items-center justify-center p-8">
+                <PackageOpen className="h-8 w-8 text-muted-foreground/50" />
+                <p className="mt-2 text-sm text-muted-foreground">
+                  No components match your search.
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {activeTab === "shared" && (
+          <div className="space-y-1.5 p-3">
+            <div className="flex gap-1 pb-1">
+              {(["all", "source", "transform", "sink"] as const).map((kind) => (
+                <button
+                  key={kind}
+                  className={cn(
+                    "rounded-md px-2 py-1 text-xs font-medium capitalize transition-colors",
+                    sharedKindFilter === kind
+                      ? "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300"
+                      : "text-muted-foreground hover:bg-muted"
+                  )}
+                  onClick={() => setSharedKindFilter(kind)}
+                >
+                  {kind}
+                </button>
+              ))}
             </div>
-          )}
-        </div>
+            {filteredShared.length === 0 ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <PackageOpen className="h-8 w-8 text-muted-foreground/50" />
+                <p className="mt-2 text-center text-sm text-muted-foreground">
+                  {search.trim()
+                    ? "No shared components match your search."
+                    : "No shared components in this environment."}
+                </p>
+              </div>
+            ) : (
+              filteredShared.map((sc) => {
+                const kindKey = sc.kind.toLowerCase() as VectorComponentDef["kind"];
+                const meta = kindMeta[kindKey] ?? kindMeta.transform;
+                const Icon = getIcon(
+                  VECTOR_CATALOG.find((d) => d.type === sc.componentType)?.icon
+                );
+                return (
+                  <div
+                    key={sc.id}
+                    draggable
+                    onDragStart={(e) => {
+                      e.dataTransfer.setData(
+                        "application/vectorflow-component",
+                        `${sc.kind.toLowerCase()}:${sc.componentType}`
+                      );
+                      e.dataTransfer.setData(
+                        "application/vectorflow-shared-component-id",
+                        sc.id
+                      );
+                      e.dataTransfer.setData(
+                        "application/vectorflow-shared-component-data",
+                        JSON.stringify(sc)
+                      );
+                      e.dataTransfer.effectAllowed = "move";
+                    }}
+                    className={cn(
+                      "flex cursor-grab items-start gap-3 rounded-md border border-l-[3px] bg-card px-3 py-2.5 transition-colors hover:bg-accent active:cursor-grabbing",
+                      meta.borderClass
+                    )}
+                  >
+                    <div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-purple-500/20 text-purple-400">
+                      <Icon className="h-4 w-4" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-1.5">
+                        <span className="truncate text-sm font-medium text-foreground">
+                          {sc.name}
+                        </span>
+                        <LinkIcon className="h-3 w-3 shrink-0 text-purple-400" />
+                      </div>
+                      <div className="mt-0.5 flex items-center gap-1.5">
+                        <span className="truncate text-xs text-muted-foreground">
+                          {sc.componentType}
+                        </span>
+                        {sc.linkedPipelineCount > 0 && (
+                          <Badge
+                            variant="outline"
+                            className="shrink-0 px-1 py-0 text-[10px]"
+                          >
+                            {sc.linkedPipelineCount} pipeline{sc.linkedPipelineCount !== 1 ? "s" : ""}
+                          </Badge>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        )}
       </div>
     </aside>
   );
diff --git a/src/components/flow/detail-panel.tsx b/src/components/flow/detail-panel.tsx
index fa0d327b..4aea047e 100644
--- a/src/components/flow/detail-panel.tsx
+++ b/src/components/flow/detail-panel.tsx
@@ -1,7 +1,11 @@
 "use client";
 
 import { useCallback, useMemo } from "react";
-import { Copy, Trash2, Lock, Info, MousePointerClick, Book } from "lucide-react";
+import { Copy, Trash2, Lock, Info, MousePointerClick, Book, Link2 as LinkIcon, Unlink, AlertTriangle, ExternalLink } from "lucide-react";
+import Link from "next/link";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTRPC } from "@/trpc/client";
+import { toast } from "sonner";
 import { useFlowStore } from "@/stores/flow-store";
 import { SchemaForm } from "@/components/config-forms/schema-form";
 import { VrlEditor } from "@/components/vrl-editor/vrl-editor";
@@ -121,11 +125,57 @@ export function DetailPanel({ pipelineId, isDeployed }: DetailPanelProps) {
   const updateDisplayName = useFlowStore((s) => s.updateDisplayName);
   const toggleNodeDisabled = useFlowStore((s) => s.toggleNodeDisabled);
   const removeNode = useFlowStore((s) => s.removeNode);
+  const acceptNodeSharedUpdate = useFlowStore((s) => s.acceptNodeSharedUpdate);
+  const unlinkNodeStore = useFlowStore((s) => s.unlinkNode);
+
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
 
   const selectedNode = selectedNodeId
     ? nodes.find((n) => n.id === selectedNodeId)
     : null;
 
+  const isShared = !!selectedNode?.data.sharedComponentId;
+  const isStale = isShared &&
+    selectedNode?.data.sharedComponentLatestVersion != null &&
+    (selectedNode?.data.sharedComponentVersion ?? 0) < selectedNode?.data.sharedComponentLatestVersion;
+
+  const acceptUpdateMutation = useMutation(
+    trpc.sharedComponent.acceptUpdate.mutationOptions({
+      onSuccess: (data, variables) => {
+        // Sync the Zustand store so saveGraph doesn't revert the update
+        acceptNodeSharedUpdate(
+          variables.nodeId,
+          data.config as Record<string, unknown>,
+          data.version,
+        );
+        queryClient.invalidateQueries({ queryKey: trpc.pipeline.get.queryKey({ id: pipelineId }) });
+        toast.success("Component updated to latest version");
+      },
+    })
+  );
+
+  const unlinkMutation = useMutation(
+    trpc.sharedComponent.unlink.mutationOptions({
+      onSuccess: (_data, variables) => {
+        // Sync the Zustand store so saveGraph doesn't revert the unlink
+        unlinkNodeStore(variables.nodeId);
+        queryClient.invalidateQueries({ queryKey: trpc.pipeline.get.queryKey({ id: pipelineId }) });
+        toast.success("Component unlinked");
+      },
+    })
+  );
+
+  const handleAcceptUpdate = () => {
+    if (!selectedNodeId) return;
+    acceptUpdateMutation.mutate({ nodeId: selectedNodeId, pipelineId });
+  };
+
+  const handleUnlink = () => {
+    if (!selectedNodeId) return;
+    unlinkMutation.mutate({ nodeId: selectedNodeId, pipelineId });
+  };
+
   const componentKey = (selectedNode?.data as { componentKey?: string })?.componentKey ?? "";
   const currentDisplayName = (selectedNode?.data as { displayName?: string })?.displayName ?? "";
 
@@ -220,8 +270,14 @@ export function DetailPanel({ pipelineId, isDeployed }: DetailPanelProps) {
     config: Record<string, unknown>;
     disabled?: boolean;
     isSystemLocked?: boolean;
+    sharedComponentId?: string;
+    sharedComponentName?: string;
+    sharedComponentVersion?: number;
+    sharedComponentLatestVersion?: number;
   };
 
+  const isReadOnly = isSystemLocked || isShared;
+
   return (
     <div className="flex h-full w-80 shrink-0 flex-col border-l bg-background">
       <Tabs defaultValue="config" className="flex min-h-0 flex-1 flex-col">
@@ -240,6 +296,47 @@ export function DetailPanel({ pipelineId, isDeployed }: DetailPanelProps) {
               </div>
             )}
 
+            {/* ---- Shared component info banner ---- */}
+            {isShared && (
+              <div className="flex items-start gap-2 rounded-md border border-purple-200 bg-purple-50 px-3 py-2 text-sm text-purple-800 dark:border-purple-800 dark:bg-purple-950/40 dark:text-purple-300">
+                <LinkIcon className="mt-0.5 h-4 w-4 shrink-0" />
+                <div className="flex-1">
+                  <span className="font-medium">{selectedNode.data.sharedComponentName as string}</span>
+                  <p className="mt-0.5 text-xs opacity-80">
+                    This component is shared. Config is managed in the Library.
+                  </p>
+                  <Link
+                    href={`/library/shared-components/${selectedNode.data.sharedComponentId as string}`}
+                    className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-purple-700 hover:text-purple-900 dark:text-purple-400 dark:hover:text-purple-200"
+                  >
+                    Open in Library <ExternalLink className="h-3 w-3" />
+                  </Link>
+                </div>
+              </div>
+            )}
+
+            {/* ---- Stale update banner ---- */}
+            {isStale && (
+              <div className="flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300">
+                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+                <div className="flex-1">
+                  <span className="font-medium">Update available</span>
+                  <p className="mt-0.5 text-xs opacity-80">
+                    This shared component has been updated since it was last synced.
+                  </p>
+                  <div className="mt-2 flex gap-2">
+                    <Button
+                      size="sm"
+                      className="h-7 text-xs"
+                      onClick={handleAcceptUpdate}
+                    >
+                      Accept update
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            )}
+
             {/* ---- Header ---- */}
             <Card className="gap-4 py-4">
               <CardHeader className="pb-0">
@@ -263,6 +360,17 @@ export function DetailPanel({ pipelineId, isDeployed }: DetailPanelProps) {
                     >
                       {componentDef.kind}
                     </Badge>
+                    {isShared && !isSystemLocked && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-muted-foreground hover:text-foreground"
+                        onClick={handleUnlink}
+                        title="Unlink from shared component"
+                      >
+                        <Unlink className="h-4 w-4" />
+                      </Button>
+                    )}
                     {isSystemLocked ? (
                       <div className="flex h-7 w-7 items-center justify-center text-blue-500">
                         <Lock className="h-3.5 w-3.5" />
@@ -289,7 +397,7 @@ export function DetailPanel({ pipelineId, isDeployed }: DetailPanelProps) {
                     id="display-name"
                     value={currentDisplayName}
                     onChange={(e) => handleNameChange(e.target.value)}
-                    disabled={isSystemLocked}
+                    disabled={isReadOnly}
                     placeholder="Component name"
                   />
                 </div>
@@ -309,7 +417,7 @@ export function DetailPanel({ pipelineId, isDeployed }: DetailPanelProps) {
                     onCheckedChange={() => {
                       if (selectedNodeId) toggleNodeDisabled(selectedNodeId);
                     }}
-                    disabled={isSystemLocked}
+                    disabled={isReadOnly}
                   />
                 </div>
 
@@ -327,8 +435,8 @@ export function DetailPanel({ pipelineId, isDeployed }: DetailPanelProps) {
             <div className="space-y-4">
               <h3 className="text-sm font-semibold">Configuration</h3>
 
-              {isSystemLocked ? (
-                /* Read-only config display for locked nodes */
+              {isReadOnly ? (
+                /* Read-only config display for locked/shared nodes */
                 <div className="space-y-3">
                   {Object.entries(config).map(([key, value]) => (
                     <div key={key} className="space-y-1">
diff --git a/src/components/flow/flow-canvas.tsx b/src/components/flow/flow-canvas.tsx
index c2cae534..71c745ff 100644
--- a/src/components/flow/flow-canvas.tsx
+++ b/src/components/flow/flow-canvas.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useRef, useState } from "react";
+import { useParams } from "next/navigation";
 import {
   ReactFlow,
   Background,
@@ -17,6 +18,7 @@ import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 import { nodeTypes } from "./node-types";
 import { NodeContextMenu } from "./node-context-menu";
 import { EdgeContextMenu } from "./edge-context-menu";
+import { SaveSharedComponentDialog } from "./save-shared-component-dialog";
 import { findComponentDef } from "@/lib/vector/catalog";
 import type { VectorComponentDef, DataType } from "@/lib/vector/types";
 
@@ -38,6 +40,8 @@ function hasOverlappingTypes(a: DataType[], b: DataType[]): boolean {
 
 export function FlowCanvas({ onSave, onExport, onImport }: FlowCanvasProps) {
   useKeyboardShortcuts({ onSave, onExport, onImport });
+  const params = useParams<{ id: string }>();
+  const pipelineId = params.id;
   const nodes = useFlowStore((s) => s.nodes);
   const edges = useFlowStore((s) => s.edges);
   const onNodesChange = useFlowStore((s) => s.onNodesChange);
@@ -47,6 +51,7 @@ export function FlowCanvas({ onSave, onExport, onImport }: FlowCanvasProps) {
   const hasFitRef = useRef(false);
   const [contextMenu, setContextMenu] = useState<{ nodeId: string; x: number; y: number } | null>(null);
   const [edgeContextMenu, setEdgeContextMenu] = useState<{ edgeId: string; x: number; y: number } | null>(null);
+  const [saveSharedNodeId, setSaveSharedNodeId] = useState<string | null>(null);
 
   const onNodeContextMenu: NodeMouseHandler = useCallback((event, node) => {
     event.preventDefault();
@@ -114,6 +119,35 @@ export function FlowCanvas({ onSave, onExport, onImport }: FlowCanvasProps) {
       });
 
       addNode(componentDef, position);
+
+      // If this is a shared component drop, patch the newly added node's data
+      const sharedComponentData = event.dataTransfer.getData(
+        "application/vectorflow-shared-component-data"
+      );
+      if (sharedComponentData) {
+        try {
+          const sc = JSON.parse(sharedComponentData) as {
+            id: string;
+            name: string;
+            version: number;
+            config: Record<string, unknown>;
+          };
+          // The newly added node is always last in the nodes array
+          const nodes = useFlowStore.getState().nodes;
+          const newNode = nodes[nodes.length - 1];
+          if (newNode) {
+            useFlowStore.getState().patchNodeSharedData(newNode.id, {
+              config: sc.config,
+              sharedComponentId: sc.id,
+              sharedComponentVersion: sc.version,
+              sharedComponentName: sc.name,
+              sharedComponentLatestVersion: sc.version,
+            });
+          }
+        } catch {
+          // Malformed shared component data — ignore, node was already added without link
+        }
+      }
     },
     [reactFlowInstance, addNode]
   );
@@ -145,6 +179,7 @@ export function FlowCanvas({ onSave, onExport, onImport }: FlowCanvasProps) {
           x={contextMenu.x}
           y={contextMenu.y}
           onClose={() => setContextMenu(null)}
+          onSaveAsShared={(nodeId) => setSaveSharedNodeId(nodeId)}
         />
       )}
       {edgeContextMenu && (
@@ -155,6 +190,14 @@ export function FlowCanvas({ onSave, onExport, onImport }: FlowCanvasProps) {
           onClose={() => setEdgeContextMenu(null)}
         />
       )}
+      {saveSharedNodeId && (
+        <SaveSharedComponentDialog
+          open={!!saveSharedNodeId}
+          onOpenChange={(open) => !open && setSaveSharedNodeId(null)}
+          nodeId={saveSharedNodeId}
+          pipelineId={pipelineId}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/flow/node-context-menu.tsx b/src/components/flow/node-context-menu.tsx
index 4203c101..44e2013d 100644
--- a/src/components/flow/node-context-menu.tsx
+++ b/src/components/flow/node-context-menu.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { Copy, ClipboardPaste, Trash2, CopyPlus } from "lucide-react";
+import { Copy, ClipboardPaste, Trash2, CopyPlus, Share2 } from "lucide-react";
 import { useFlowStore } from "@/stores/flow-store";
 
 interface NodeContextMenuProps {
@@ -9,9 +9,10 @@ interface NodeContextMenuProps {
   x: number;
   y: number;
   onClose: () => void;
+  onSaveAsShared?: (nodeId: string) => void;
 }
 
-export function NodeContextMenu({ nodeId, x, y, onClose }: NodeContextMenuProps) {
+export function NodeContextMenu({ nodeId, x, y, onClose, onSaveAsShared }: NodeContextMenuProps) {
   const duplicateNode = useFlowStore((s) => s.duplicateNode);
   const removeNode = useFlowStore((s) => s.removeNode);
   const selectedNodeIds = useFlowStore((s) => s.selectedNodeIds);
@@ -22,6 +23,7 @@ export function NodeContextMenu({ nodeId, x, y, onClose }: NodeContextMenuProps)
 
   const targetNode = nodes.find((n) => n.id === nodeId);
   const isLocked = !!targetNode?.data?.isSystemLocked;
+  const isShared = !!targetNode?.data?.sharedComponentId;
 
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
@@ -63,6 +65,12 @@ export function NodeContextMenu({ nodeId, x, y, onClose }: NodeContextMenuProps)
       disabled: isLocked,
       onClick: () => { if (isLocked) return; duplicateNode(nodeId); onClose(); },
     }] : []),
+    ...(!isMulti && !isLocked && !isShared && onSaveAsShared ? [{
+      label: "Save as Shared Component",
+      icon: Share2,
+      shortcut: "",
+      onClick: () => { onSaveAsShared(nodeId); onClose(); },
+    }] : []),
     { separator: true as const },
     {
       label: isMulti ? `Delete ${multiCount} components` : "Delete",
diff --git a/src/components/flow/save-shared-component-dialog.tsx b/src/components/flow/save-shared-component-dialog.tsx
new file mode 100644
index 00000000..5f8c3541
--- /dev/null
+++ b/src/components/flow/save-shared-component-dialog.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTRPC } from "@/trpc/client";
+import { useEnvironmentStore } from "@/stores/environment-store";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "sonner";
+import { useFlowStore } from "@/stores/flow-store";
+
+interface SaveSharedComponentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  nodeId: string;
+  pipelineId: string;
+}
+
+export function SaveSharedComponentDialog({
+  open,
+  onOpenChange,
+  nodeId,
+  pipelineId,
+}: SaveSharedComponentDialogProps) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const { selectedEnvironmentId } = useEnvironmentStore();
+
+  const patchNodeSharedData = useFlowStore((s) => s.patchNodeSharedData);
+  const nodes = useFlowStore((s) => s.nodes);
+
+  const createMutation = useMutation(
+    trpc.sharedComponent.createFromNode.mutationOptions({
+      onSuccess: (data) => {
+        // Sync the Zustand store so the canvas immediately shows the purple shared treatment
+        const node = nodes.find((n) => n.id === nodeId);
+        const config = (node?.data as { config?: Record<string, unknown> })?.config ?? {};
+        patchNodeSharedData(nodeId, {
+          config,
+          sharedComponentId: data.id,
+          sharedComponentVersion: data.version,
+          sharedComponentName: data.name,
+          sharedComponentLatestVersion: data.version,
+        });
+        toast.success("Shared component created");
+        queryClient.invalidateQueries({ queryKey: trpc.pipeline.get.queryKey({ id: pipelineId }) });
+        queryClient.invalidateQueries({ queryKey: trpc.sharedComponent.list.queryKey() });
+        setName("");
+        setDescription("");
+        onOpenChange(false);
+      },
+      onError: (error) => {
+        toast.error(error.message);
+      },
+    })
+  );
+
+  const handleSave = () => {
+    if (!selectedEnvironmentId) return;
+    createMutation.mutate({
+      nodeId,
+      pipelineId,
+      name,
+      description: description || undefined,
+      environmentId: selectedEnvironmentId,
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Save as Shared Component</DialogTitle>
+          <DialogDescription>
+            Create a reusable component that can be linked across pipelines in this environment.
+            Editing it later will notify all linked pipelines.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="space-y-2">
+            <Label htmlFor="sc-name">Name</Label>
+            <Input
+              id="sc-name"
+              placeholder="e.g., Production Elasticsearch Sink"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="sc-description">Description (optional)</Label>
+            <Textarea
+              id="sc-description"
+              placeholder="What is this component used for?"
+              rows={3}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={!name || !selectedEnvironmentId || createMutation.isPending}
+          >
+            {createMutation.isPending ? "Saving..." : "Save"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/flow/sink-node.tsx b/src/components/flow/sink-node.tsx
index 27625890..4a2b5ac5 100644
--- a/src/components/flow/sink-node.tsx
+++ b/src/components/flow/sink-node.tsx
@@ -2,6 +2,7 @@
 
 import { memo, useMemo } from "react";
 import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
+import { Link2 as LinkIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { VectorComponentDef } from "@/lib/vector/types";
 import type { NodeMetricsData } from "@/stores/flow-store";
@@ -19,19 +20,28 @@ type SinkNodeData = {
   config: Record<string, unknown>;
   metrics?: NodeMetricsData;
   disabled?: boolean;
+  sharedComponentId?: string | null;
+  sharedComponentVersion?: number | null;
+  sharedComponentLatestVersion?: number | null;
+  sharedComponentName?: string | null;
 };
 
 type SinkNodeType = Node<SinkNodeData, "sink">;
 
 function SinkNodeComponent({ data, selected }: NodeProps<SinkNodeType>) {
   const { componentDef, componentKey, displayName, metrics, disabled } = data;
+  const isShared = !!data.sharedComponentId;
+  const isStale = isShared && data.sharedComponentLatestVersion != null &&
+    (data.sharedComponentVersion ?? 0) < data.sharedComponentLatestVersion;
   const Icon = useMemo(() => getIcon(componentDef.icon), [componentDef.icon]);
 
   return (
     <div
       className={cn(
         "w-56 rounded-lg border bg-card shadow-sm transition-shadow",
-        selected && "ring-2 ring-node-sink shadow-md",
+        selected && !isShared && "ring-2 ring-node-sink shadow-md",
+        selected && isShared && "ring-2 ring-purple-400 shadow-md",
+        isShared && !selected && "border-purple-400/50 shadow-[0_0_8px_rgba(167,139,250,0.15)]",
         disabled && "opacity-40"
       )}
     >
@@ -71,6 +81,18 @@ function SinkNodeComponent({ data, selected }: NodeProps<SinkNodeType>) {
           )}
         </div>
       )}
+
+      {isShared && (
+        <div className="flex items-center gap-1.5 border-t px-3 py-1.5 text-[10px] text-purple-400">
+          <LinkIcon className="h-3 w-3" />
+          {isStale ? (
+            <span className="text-amber-400">Update available</span>
+          ) : (
+            <span>Shared</span>
+          )}
+          {isStale && <span className="ml-auto h-2 w-2 rounded-full bg-amber-400" />}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/flow/source-node.tsx b/src/components/flow/source-node.tsx
index db300a96..63b9f2e7 100644
--- a/src/components/flow/source-node.tsx
+++ b/src/components/flow/source-node.tsx
@@ -2,7 +2,7 @@
 
 import { memo, useMemo } from "react";
 import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
-import { Lock } from "lucide-react";
+import { Lock, Link2 as LinkIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { VectorComponentDef } from "@/lib/vector/types";
 import type { NodeMetricsData } from "@/stores/flow-store";
@@ -21,19 +21,28 @@ type SourceNodeData = {
   metrics?: NodeMetricsData;
   disabled?: boolean;
   isSystemLocked?: boolean;
+  sharedComponentId?: string | null;
+  sharedComponentVersion?: number | null;
+  sharedComponentLatestVersion?: number | null;
+  sharedComponentName?: string | null;
 };
 
 type SourceNodeType = Node<SourceNodeData, "source">;
 
 function SourceNodeComponent({ data, selected }: NodeProps<SourceNodeType>) {
   const { componentDef, componentKey, displayName, metrics, disabled, isSystemLocked } = data;
+  const isShared = !!data.sharedComponentId;
+  const isStale = isShared && data.sharedComponentLatestVersion != null &&
+    (data.sharedComponentVersion ?? 0) < data.sharedComponentLatestVersion;
   const Icon = useMemo(() => getIcon(componentDef.icon), [componentDef.icon]);
 
   return (
     <div
       className={cn(
         "w-56 rounded-lg border bg-card shadow-sm transition-shadow",
-        selected && !isSystemLocked && "ring-2 ring-node-source shadow-md",
+        selected && !isSystemLocked && !isShared && "ring-2 ring-node-source shadow-md",
+        selected && isShared && "ring-2 ring-purple-400 shadow-md",
+        isShared && !selected && "border-purple-400/50 shadow-[0_0_8px_rgba(167,139,250,0.15)]",
         isSystemLocked && "ring-2 ring-blue-400 shadow-md",
         disabled && "opacity-40"
       )}
@@ -71,6 +80,18 @@ function SourceNodeComponent({ data, selected }: NodeProps<SourceNodeType>) {
         </div>
       )}
 
+      {isShared && (
+        <div className="flex items-center gap-1.5 border-t px-3 py-1.5 text-[10px] text-purple-400">
+          <LinkIcon className="h-3 w-3" />
+          {isStale ? (
+            <span className="text-amber-400">Update available</span>
+          ) : (
+            <span>Shared</span>
+          )}
+          {isStale && <span className="ml-auto h-2 w-2 rounded-full bg-amber-400" />}
+        </div>
+      )}
+
       {/* Output handle on RIGHT */}
       <Handle
         type="source"
diff --git a/src/components/flow/transform-node.tsx b/src/components/flow/transform-node.tsx
index ff77954b..910d2665 100644
--- a/src/components/flow/transform-node.tsx
+++ b/src/components/flow/transform-node.tsx
@@ -2,6 +2,7 @@
 
 import { memo, useMemo } from "react";
 import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
+import { Link2 as LinkIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { VectorComponentDef } from "@/lib/vector/types";
 import type { NodeMetricsData } from "@/stores/flow-store";
@@ -19,6 +20,10 @@ type TransformNodeData = {
   config: Record<string, unknown>;
   metrics?: NodeMetricsData;
   disabled?: boolean;
+  sharedComponentId?: string | null;
+  sharedComponentVersion?: number | null;
+  sharedComponentLatestVersion?: number | null;
+  sharedComponentName?: string | null;
 };
 
 type TransformNodeType = Node<TransformNodeData, "transform">;
@@ -28,13 +33,18 @@ function TransformNodeComponent({
   selected,
 }: NodeProps<TransformNodeType>) {
   const { componentDef, componentKey, displayName, metrics, disabled } = data;
+  const isShared = !!data.sharedComponentId;
+  const isStale = isShared && data.sharedComponentLatestVersion != null &&
+    (data.sharedComponentVersion ?? 0) < data.sharedComponentLatestVersion;
   const Icon = useMemo(() => getIcon(componentDef.icon), [componentDef.icon]);
 
   return (
     <div
       className={cn(
         "w-56 rounded-lg border bg-card shadow-sm transition-shadow",
-        selected && "ring-2 ring-node-transform shadow-md",
+        selected && !isShared && "ring-2 ring-node-transform shadow-md",
+        selected && isShared && "ring-2 ring-purple-400 shadow-md",
+        isShared && !selected && "border-purple-400/50 shadow-[0_0_8px_rgba(167,139,250,0.15)]",
         disabled && "opacity-40"
       )}
     >
@@ -82,6 +92,18 @@ function TransformNodeComponent({
         </div>
       )}
 
+      {isShared && (
+        <div className="flex items-center gap-1.5 border-t px-3 py-1.5 text-[10px] text-purple-400">
+          <LinkIcon className="h-3 w-3" />
+          {isStale ? (
+            <span className="text-amber-400">Update available</span>
+          ) : (
+            <span>Shared</span>
+          )}
+          {isStale && <span className="ml-auto h-2 w-2 rounded-full bg-amber-400" />}
+        </div>
+      )}
+
       {/* Output handle on RIGHT */}
       <Handle
         type="source"
diff --git a/src/server/routers/pipeline.ts b/src/server/routers/pipeline.ts
index 947616dd..2c6e6fef 100644
--- a/src/server/routers/pipeline.ts
+++ b/src/server/routers/pipeline.ts
@@ -39,6 +39,8 @@ const nodeSchema = z.object({
   positionX: z.number(),
   positionY: z.number(),
   disabled: z.boolean().default(false),
+  sharedComponentId: z.string().nullable().optional(),
+  sharedComponentVersion: z.number().nullable().optional(),
 });
 
 const edgeSchema = z.object({
@@ -100,6 +102,11 @@ export const pipelineRouter = router({
               positionX: true,
               positionY: true,
               disabled: true,
+              sharedComponentId: true,
+              sharedComponentVersion: true,
+              sharedComponent: {
+                select: { version: true, name: true },
+              },
             },
           },
           edges: {
@@ -190,6 +197,12 @@ export const pipelineRouter = router({
           updatedBy: p.updatedBy,
           nodeStatuses: p.nodeStatuses,
           hasUndeployedChanges,
+          hasStaleComponents: p.nodes.some(
+            (n) => n.sharedComponentId && n.sharedComponent && (n.sharedComponentVersion ?? 0) < n.sharedComponent.version
+          ),
+          staleComponentNames: p.nodes
+            .filter((n) => n.sharedComponentId && n.sharedComponent && (n.sharedComponentVersion ?? 0) < n.sharedComponent.version)
+            .map((n) => n.sharedComponent!.name),
         };
       }));
 
@@ -203,7 +216,13 @@ export const pipelineRouter = router({
       const pipeline = await prisma.pipeline.findUnique({
         where: { id: input.id },
         include: {
-          nodes: true,
+          nodes: {
+            include: {
+              sharedComponent: {
+                select: { name: true, version: true },
+              },
+            },
+          },
           edges: true,
           environment: { select: { teamId: true, gitOpsMode: true, name: true } },
           nodeStatuses: {
@@ -639,6 +658,7 @@ export const pipelineRouter = router({
         await copyPipelineGraph(tx, {
           sourcePipelineId: input.pipelineId,
           targetPipelineId: created.id,
+          stripSharedComponentLinks: true,
           transformConfig: (config, componentKey) => {
             const result = stripEnvRefs(config, componentKey);
             allStrippedSecrets.push(...result.strippedSecrets);
@@ -691,6 +711,34 @@ export const pipelineRouter = router({
       };
 
       return prisma.$transaction(async (tx) => {
+        // Validate all sharedComponentIds belong to the same environment
+        const sharedComponentIds = [
+          ...new Set(input.nodes.map((n) => n.sharedComponentId).filter(Boolean) as string[]),
+        ];
+        if (sharedComponentIds.length > 0) {
+          const sharedComponents = await tx.sharedComponent.findMany({
+            where: { id: { in: sharedComponentIds } },
+            select: { id: true, environmentId: true },
+          });
+          const foundIds = new Set(sharedComponents.map((sc) => sc.id));
+          for (const scId of sharedComponentIds) {
+            if (!foundIds.has(scId)) {
+              throw new TRPCError({
+                code: "BAD_REQUEST",
+                message: `Shared component ${scId} not found`,
+              });
+            }
+          }
+          for (const sc of sharedComponents) {
+            if (sc.environmentId !== existing.environmentId) {
+              throw new TRPCError({
+                code: "BAD_REQUEST",
+                message: "Shared component does not belong to this pipeline's environment",
+              });
+            }
+          }
+        }
+
         await tx.pipeline.update({
           where: { id: input.pipelineId },
           data: {
@@ -722,6 +770,8 @@ export const pipelineRouter = router({
                 positionX: node.positionX,
                 positionY: node.positionY,
                 disabled: node.disabled,
+                sharedComponentId: node.sharedComponentId ?? null,
+                sharedComponentVersion: node.sharedComponentVersion ?? null,
               },
             })
           )
@@ -822,6 +872,8 @@ export const pipelineRouter = router({
                 positionX: node.positionX as number,
                 positionY: node.positionY as number,
                 disabled: (node.disabled as boolean) ?? false,
+                sharedComponentId: ((node as Record<string, unknown>).sharedComponentId as string | null) ?? null,
+                sharedComponentVersion: ((node as Record<string, unknown>).sharedComponentVersion as number | null) ?? null,
               },
             })
           )
@@ -885,6 +937,8 @@ export const pipelineRouter = router({
         positionX: n.positionX,
         positionY: n.positionY,
         disabled: n.disabled,
+        sharedComponentId: n.sharedComponentId ?? null,
+        sharedComponentVersion: n.sharedComponentVersion ?? null,
       }));
       const edgesSnapshot = pipeline.edges.map((e) => ({
         id: e.id,
diff --git a/src/server/routers/shared-component.ts b/src/server/routers/shared-component.ts
new file mode 100644
index 00000000..b0f66911
--- /dev/null
+++ b/src/server/routers/shared-component.ts
@@ -0,0 +1,480 @@
+import { z } from "zod";
+import { TRPCError } from "@trpc/server";
+import { Prisma, ComponentKind } from "@/generated/prisma";
+import { router, protectedProcedure, withTeamAccess } from "@/trpc/init";
+import { prisma } from "@/lib/prisma";
+import { withAudit } from "@/server/middleware/audit";
+import { encryptNodeConfig, decryptNodeConfig } from "@/server/services/config-crypto";
+
+export const sharedComponentRouter = router({
+  /** List all shared components for an environment */
+  list: protectedProcedure
+    .input(z.object({ environmentId: z.string() }))
+    .use(withTeamAccess("VIEWER"))
+    .query(async ({ input }) => {
+      const components = await prisma.sharedComponent.findMany({
+        where: { environmentId: input.environmentId },
+        include: {
+          linkedNodes: { select: { pipelineId: true } },
+        },
+        orderBy: { updatedAt: "desc" },
+      });
+
+      return components.map((sc) => ({
+        id: sc.id,
+        name: sc.name,
+        description: sc.description,
+        componentType: sc.componentType,
+        kind: sc.kind,
+        config: decryptNodeConfig(
+          sc.componentType,
+          (sc.config as Record<string, unknown>) ?? {},
+        ),
+        version: sc.version,
+        linkedPipelineCount: new Set(sc.linkedNodes.map((n) => n.pipelineId)).size,
+        createdAt: sc.createdAt,
+        updatedAt: sc.updatedAt,
+      }));
+    }),
+
+  /** Get a single shared component by ID with linked pipeline details */
+  getById: protectedProcedure
+    .input(z.object({ id: z.string(), environmentId: z.string() }))
+    .use(withTeamAccess("VIEWER"))
+    .query(async ({ input }) => {
+      const sc = await prisma.sharedComponent.findUnique({
+        where: { id: input.id },
+        include: {
+          linkedNodes: {
+            include: {
+              pipeline: { select: { id: true, name: true } },
+            },
+          },
+        },
+      });
+
+      if (!sc || sc.environmentId !== input.environmentId) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Shared component not found",
+        });
+      }
+
+      // Group linked nodes by pipeline and determine staleness per pipeline
+      const pipelineMap = new Map<
+        string,
+        { id: string; name: string; isStale: boolean }
+      >();
+      for (const node of sc.linkedNodes) {
+        const pid = node.pipelineId;
+        const existing = pipelineMap.get(pid);
+        const isStale = node.sharedComponentVersion !== sc.version;
+        if (!existing) {
+          pipelineMap.set(pid, {
+            id: node.pipeline.id,
+            name: node.pipeline.name,
+            isStale,
+          });
+        } else if (isStale) {
+          // If any node in this pipeline is stale, mark pipeline as stale
+          existing.isStale = true;
+        }
+      }
+
+      return {
+        id: sc.id,
+        name: sc.name,
+        description: sc.description,
+        componentType: sc.componentType,
+        kind: sc.kind,
+        config: decryptNodeConfig(
+          sc.componentType,
+          (sc.config as Record<string, unknown>) ?? {},
+        ),
+        version: sc.version,
+        environmentId: sc.environmentId,
+        createdAt: sc.createdAt,
+        updatedAt: sc.updatedAt,
+        linkedPipelines: Array.from(pipelineMap.values()),
+      };
+    }),
+
+  /** Create a new shared component */
+  create: protectedProcedure
+    .input(
+      z.object({
+        environmentId: z.string(),
+        name: z.string().min(1).max(100),
+        description: z.string().optional(),
+        componentType: z.string().min(1),
+        kind: z.nativeEnum(ComponentKind),
+        config: z.record(z.string(), z.any()),
+      }),
+    )
+    .use(withTeamAccess("EDITOR"))
+    .use(withAudit("shared_component.created", "SharedComponent"))
+    .mutation(async ({ input }) => {
+      return prisma.$transaction(async (tx) => {
+        // Check unique constraint inside transaction to prevent TOCTOU race
+        const existing = await tx.sharedComponent.findUnique({
+          where: {
+            environmentId_name: {
+              environmentId: input.environmentId,
+              name: input.name,
+            },
+          },
+        });
+        if (existing) {
+          throw new TRPCError({
+            code: "CONFLICT",
+            message: `A shared component named "${input.name}" already exists in this environment`,
+          });
+        }
+
+        return tx.sharedComponent.create({
+          data: {
+            environmentId: input.environmentId,
+            name: input.name,
+            description: input.description,
+            componentType: input.componentType,
+            kind: input.kind,
+            config: encryptNodeConfig(input.componentType, input.config) as Prisma.InputJsonValue,
+          },
+        });
+      });
+    }),
+
+  /** Create a shared component from an existing pipeline node */
+  createFromNode: protectedProcedure
+    .input(
+      z.object({
+        nodeId: z.string(),
+        pipelineId: z.string(),
+        name: z.string().min(1).max(100),
+        description: z.string().optional(),
+        environmentId: z.string(),
+      }),
+    )
+    .use(withTeamAccess("EDITOR"))
+    .use(withAudit("shared_component.created", "SharedComponent"))
+    .mutation(async ({ input }) => {
+      const node = await prisma.pipelineNode.findUnique({
+        where: { id: input.nodeId },
+        include: { pipeline: { select: { environmentId: true } } },
+      });
+      if (!node || node.pipelineId !== input.pipelineId) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Pipeline node not found",
+        });
+      }
+
+      // Verify the pipeline belongs to the claimed environment
+      if (node.pipeline.environmentId !== input.environmentId) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Pipeline does not belong to the specified environment",
+        });
+      }
+
+      return prisma.$transaction(async (tx) => {
+        // Check unique constraint inside transaction to prevent TOCTOU race
+        const existing = await tx.sharedComponent.findUnique({
+          where: {
+            environmentId_name: {
+              environmentId: input.environmentId,
+              name: input.name,
+            },
+          },
+        });
+        if (existing) {
+          throw new TRPCError({
+            code: "CONFLICT",
+            message: `A shared component named "${input.name}" already exists in this environment`,
+          });
+        }
+
+        const sharedComponent = await tx.sharedComponent.create({
+          data: {
+            environmentId: input.environmentId,
+            name: input.name,
+            description: input.description,
+            componentType: node.componentType,
+            kind: node.kind,
+            config: (node.config ?? {}) as Prisma.InputJsonValue,
+          },
+        });
+
+        // Link the original node to the shared component
+        await tx.pipelineNode.update({
+          where: { id: input.nodeId },
+          data: {
+            sharedComponentId: sharedComponent.id,
+            sharedComponentVersion: sharedComponent.version,
+          },
+        });
+
+        return sharedComponent;
+      });
+    }),
+
+  /** Update a shared component */
+  update: protectedProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        environmentId: z.string(),
+        name: z.string().min(1).max(100).optional(),
+        description: z.string().nullable().optional(),
+        config: z.record(z.string(), z.any()).optional(),
+      }),
+    )
+    .use(withTeamAccess("EDITOR"))
+    .use(withAudit("shared_component.updated", "SharedComponent"))
+    .mutation(async ({ input }) => {
+      return prisma.$transaction(async (tx) => {
+        const sc = await tx.sharedComponent.findUnique({
+          where: { id: input.id },
+        });
+        if (!sc || sc.environmentId !== input.environmentId) {
+          throw new TRPCError({
+            code: "NOT_FOUND",
+            message: "Shared component not found",
+          });
+        }
+
+        // If name changes, check for conflicts inside transaction
+        if (input.name && input.name !== sc.name) {
+          const conflict = await tx.sharedComponent.findUnique({
+            where: {
+              environmentId_name: {
+                environmentId: sc.environmentId,
+                name: input.name,
+              },
+            },
+          });
+          if (conflict) {
+            throw new TRPCError({
+              code: "CONFLICT",
+              message: `A shared component named "${input.name}" already exists in this environment`,
+            });
+          }
+        }
+
+        const data: Prisma.SharedComponentUpdateInput = {};
+        if (input.name !== undefined) data.name = input.name;
+        if (input.description !== undefined) data.description = input.description;
+
+        // If config changes, encrypt and bump version atomically
+        if (input.config) {
+          data.config = encryptNodeConfig(sc.componentType, input.config) as Prisma.InputJsonValue;
+          data.version = { increment: 1 };
+        }
+
+        return tx.sharedComponent.update({
+          where: { id: input.id },
+          data,
+        });
+      });
+    }),
+
+  /** Delete a shared component */
+  delete: protectedProcedure
+    .input(z.object({ id: z.string(), environmentId: z.string() }))
+    .use(withTeamAccess("EDITOR"))
+    .use(withAudit("shared_component.deleted", "SharedComponent"))
+    .mutation(async ({ input }) => {
+      const sc = await prisma.sharedComponent.findUnique({
+        where: { id: input.id },
+      });
+      if (!sc || sc.environmentId !== input.environmentId) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Shared component not found",
+        });
+      }
+
+      // onDelete: SetNull handles unlinking automatically
+      return prisma.sharedComponent.delete({
+        where: { id: input.id },
+      });
+    }),
+
+  /** Accept latest shared component config into a pipeline node */
+  acceptUpdate: protectedProcedure
+    .input(z.object({ nodeId: z.string(), pipelineId: z.string() }))
+    .use(withTeamAccess("EDITOR"))
+    .use(withAudit("shared_component.update_accepted", "SharedComponent"))
+    .mutation(async ({ input }) => {
+      const node = await prisma.pipelineNode.findUnique({
+        where: { id: input.nodeId },
+        include: { sharedComponent: true },
+      });
+      if (!node || node.pipelineId !== input.pipelineId) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Pipeline node not found",
+        });
+      }
+      if (!node.sharedComponent) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Node is not linked to a shared component",
+        });
+      }
+
+      // Copy latest config from shared component into the node
+      await prisma.pipelineNode.update({
+        where: { id: input.nodeId },
+        data: {
+          config: node.sharedComponent.config ?? undefined,
+          sharedComponentVersion: node.sharedComponent.version,
+        },
+      });
+
+      // Return decrypted config and version for the client to sync its local store
+      return {
+        config: decryptNodeConfig(
+          node.sharedComponent.componentType,
+          (node.sharedComponent.config as Record<string, unknown>) ?? {},
+        ),
+        version: node.sharedComponent.version,
+      };
+    }),
+
+  /** Accept updates for all stale linked nodes in a pipeline */
+  acceptUpdateBulk: protectedProcedure
+    .input(z.object({ pipelineId: z.string() }))
+    .use(withTeamAccess("EDITOR"))
+    .use(withAudit("shared_component.bulk_update_accepted", "Pipeline"))
+    .mutation(async ({ input }) => {
+      const pipeline = await prisma.pipeline.findUnique({
+        where: { id: input.pipelineId },
+      });
+      if (!pipeline) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Pipeline not found",
+        });
+      }
+
+      // Find all nodes in this pipeline that are linked to a shared component
+      const linkedNodes = await prisma.pipelineNode.findMany({
+        where: {
+          pipelineId: input.pipelineId,
+          sharedComponentId: { not: null },
+        },
+        include: { sharedComponent: true },
+      });
+
+      // Filter to only stale nodes
+      const staleNodes = linkedNodes.filter(
+        (n) =>
+          n.sharedComponent &&
+          n.sharedComponentVersion !== n.sharedComponent.version,
+      );
+
+      if (staleNodes.length === 0) {
+        return { updated: 0 };
+      }
+
+      await prisma.$transaction(
+        staleNodes.map((n) =>
+          prisma.pipelineNode.update({
+            where: { id: n.id },
+            data: {
+              config: n.sharedComponent!.config ?? undefined,
+              sharedComponentVersion: n.sharedComponent!.version,
+            },
+          }),
+        ),
+      );
+
+      return { updated: staleNodes.length };
+    }),
+
+  /** Unlink a pipeline node from its shared component */
+  unlink: protectedProcedure
+    .input(z.object({ nodeId: z.string(), pipelineId: z.string() }))
+    .use(withTeamAccess("EDITOR"))
+    .use(withAudit("shared_component.unlinked", "SharedComponent"))
+    .mutation(async ({ input }) => {
+      const node = await prisma.pipelineNode.findUnique({
+        where: { id: input.nodeId },
+      });
+      if (!node || node.pipelineId !== input.pipelineId) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Pipeline node not found",
+        });
+      }
+
+      return prisma.pipelineNode.update({
+        where: { id: input.nodeId },
+        data: {
+          sharedComponentId: null,
+          sharedComponentVersion: null,
+        },
+      });
+    }),
+
+  /** Link an existing pipeline node to a shared component */
+  linkExisting: protectedProcedure
+    .input(
+      z.object({
+        nodeId: z.string(),
+        pipelineId: z.string(),
+        sharedComponentId: z.string(),
+      }),
+    )
+    .use(withTeamAccess("EDITOR"))
+    .use(withAudit("shared_component.linked", "SharedComponent"))
+    .mutation(async ({ input }) => {
+      const node = await prisma.pipelineNode.findUnique({
+        where: { id: input.nodeId },
+        include: { pipeline: { select: { environmentId: true } } },
+      });
+      if (!node || node.pipelineId !== input.pipelineId) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Pipeline node not found",
+        });
+      }
+
+      const sc = await prisma.sharedComponent.findUnique({
+        where: { id: input.sharedComponentId },
+      });
+      if (!sc) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Shared component not found",
+        });
+      }
+
+      // Validate shared component belongs to the same environment as the pipeline
+      if (sc.environmentId !== node.pipeline.environmentId) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Shared component belongs to a different environment",
+        });
+      }
+
+      // Validate type/kind match
+      if (node.componentType !== sc.componentType || node.kind !== sc.kind) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: `Component type/kind mismatch: node is ${node.kind}/${node.componentType} but shared component is ${sc.kind}/${sc.componentType}`,
+        });
+      }
+
+      // Copy config from shared component and set link fields
+      return prisma.pipelineNode.update({
+        where: { id: input.nodeId },
+        data: {
+          config: sc.config ?? undefined,
+          sharedComponentId: sc.id,
+          sharedComponentVersion: sc.version,
+        },
+      });
+    }),
+});
diff --git a/src/server/services/copy-pipeline-graph.ts b/src/server/services/copy-pipeline-graph.ts
index 634260d5..0f6136fa 100644
--- a/src/server/services/copy-pipeline-graph.ts
+++ b/src/server/services/copy-pipeline-graph.ts
@@ -9,6 +9,8 @@ interface CopyPipelineGraphOptions {
     config: Record<string, unknown>,
     componentKey: string,
   ) => Record<string, unknown>;
+  /** When true, shared component links are stripped (e.g. cross-environment promote). */
+  stripSharedComponentLinks?: boolean;
 }
 
 /**
@@ -24,7 +26,7 @@ export async function copyPipelineGraph(
   tx: Tx,
   opts: CopyPipelineGraphOptions,
 ) {
-  const { sourcePipelineId, targetPipelineId, transformConfig } = opts;
+  const { sourcePipelineId, targetPipelineId, transformConfig, stripSharedComponentLinks } = opts;
 
   const sourceNodes = await tx.pipelineNode.findMany({
     where: { pipelineId: sourcePipelineId },
@@ -54,6 +56,8 @@ export async function copyPipelineGraph(
         positionX: node.positionX,
         positionY: node.positionY,
         disabled: node.disabled,
+        sharedComponentId: stripSharedComponentLinks ? null : (node.sharedComponentId ?? null),
+        sharedComponentVersion: stripSharedComponentLinks ? null : (node.sharedComponentVersion ?? null),
       },
     });
 
diff --git a/src/stores/flow-store.ts b/src/stores/flow-store.ts
index bf101b04..5de01e73 100644
--- a/src/stores/flow-store.ts
+++ b/src/stores/flow-store.ts
@@ -23,6 +23,10 @@ interface FlowNodeData {
   disabled?: boolean;
   metrics?: NodeMetricsData;
   isSystemLocked?: boolean;
+  sharedComponentId?: string | null;
+  sharedComponentVersion?: number | null;
+  sharedComponentName?: string | null;
+  sharedComponentLatestVersion?: number | null;
 }
 
 /* ------------------------------------------------------------------ */
@@ -83,6 +87,15 @@ export interface FlowState {
   updateNodeConfig: (id: string, config: Record<string, unknown>) => void;
   updateDisplayName: (id: string, displayName: string) => void;
   toggleNodeDisabled: (id: string) => void;
+  patchNodeSharedData: (id: string, data: {
+    config: Record<string, unknown>;
+    sharedComponentId: string;
+    sharedComponentVersion: number;
+    sharedComponentName: string;
+    sharedComponentLatestVersion: number;
+  }) => void;
+  acceptNodeSharedUpdate: (id: string, config: Record<string, unknown>, version: number) => void;
+  unlinkNode: (id: string) => void;
   updateNodeMetrics: (metricsMap: Map<string, NodeMetricsData>) => void;
 
   // Global config
@@ -131,7 +144,7 @@ function computeFlowFingerprint(nodes: Node[], edges: Edge[], globalConfig: Reco
     position: n.position,
     data: Object.fromEntries(
       Object.entries(n.data as Record<string, unknown>).filter(
-        ([k]) => k !== "metrics" && k !== "measured" && k !== "isSystemLocked"
+        ([k]) => k !== "metrics" && k !== "measured" && k !== "isSystemLocked" && k !== "sharedComponentName" && k !== "sharedComponentLatestVersion"
       )
     ),
   }));
@@ -407,6 +420,77 @@ export const useFlowStore = create<InternalState>()((set, get) => ({
     });
   },
 
+  patchNodeSharedData: (id, data) => {
+    set((state) => {
+      // Amend the last history entry — the addNode call already pushed a snapshot
+      return {
+        nodes: state.nodes.map((n) =>
+          n.id === id
+            ? {
+                ...n,
+                data: {
+                  ...n.data,
+                  config: data.config,
+                  sharedComponentId: data.sharedComponentId,
+                  sharedComponentVersion: data.sharedComponentVersion,
+                  sharedComponentName: data.sharedComponentName,
+                  sharedComponentLatestVersion: data.sharedComponentLatestVersion,
+                },
+              }
+            : n,
+        ),
+        isDirty: true,
+      };
+    });
+  },
+
+  acceptNodeSharedUpdate: (id, config, version) => {
+    set((state) => {
+      const history = pushSnapshot(state);
+      return {
+        ...history,
+        nodes: state.nodes.map((n) =>
+          n.id === id
+            ? {
+                ...n,
+                data: {
+                  ...n.data,
+                  config,
+                  sharedComponentVersion: version,
+                  sharedComponentLatestVersion: version,
+                },
+              }
+            : n,
+        ),
+        isDirty: true,
+      };
+    });
+  },
+
+  unlinkNode: (id) => {
+    set((state) => {
+      const history = pushSnapshot(state);
+      return {
+        ...history,
+        nodes: state.nodes.map((n) =>
+          n.id === id
+            ? {
+                ...n,
+                data: {
+                  ...n.data,
+                  sharedComponentId: null,
+                  sharedComponentVersion: null,
+                  sharedComponentName: null,
+                  sharedComponentLatestVersion: null,
+                },
+              }
+            : n,
+        ),
+        isDirty: true,
+      };
+    });
+  },
+
   updateNodeMetrics: (metricsMap) => {
     set((state) => ({
       nodes: state.nodes.map((n) => {
diff --git a/src/trpc/router.ts b/src/trpc/router.ts
index 032e185a..dc0871a1 100644
--- a/src/trpc/router.ts
+++ b/src/trpc/router.ts
@@ -19,6 +19,7 @@ import { vrlSnippetRouter } from "@/server/routers/vrl-snippet";
 import { alertRouter } from "@/server/routers/alert";
 import { serviceAccountRouter } from "@/server/routers/service-account";
 import { userPreferenceRouter } from "@/server/routers/user-preference";
+import { sharedComponentRouter } from "@/server/routers/shared-component";
 
 export const appRouter = router({
   team: teamRouter,
@@ -41,6 +42,7 @@ export const appRouter = router({
   alert: alertRouter,
   serviceAccount: serviceAccountRouter,
   userPreference: userPreferenceRouter,
+  sharedComponent: sharedComponentRouter,
 });
 
 export type AppRouter = typeof appRouter;