diff --git a/package.json b/package.json
index 2ab91bd..c742785 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@schemavaults/ui",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "private": false,
   "license": "UNLICENSED",
   "description": "React.js UI components for SchemaVaults frontend applications",
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index faf4957..b4ca33d 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -123,6 +123,9 @@ export type * from "./description-list";
 export * from "./status-blinker";
 export type * from "./status-blinker";
 
+export * from "./presence-indicator";
+export type * from "./presence-indicator";
+
 export * from "./context-menu";
 export type * from "./context-menu";
 
diff --git a/src/components/ui/presence-indicator/PresenceIndicator.stories.tsx b/src/components/ui/presence-indicator/PresenceIndicator.stories.tsx
new file mode 100644
index 0000000..265d7c6
--- /dev/null
+++ b/src/components/ui/presence-indicator/PresenceIndicator.stories.tsx
@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ReactElement } from "react";
+
+import { Avatar, AvatarFallback } from "../avatar/avatar";
+import {
+  PresenceIndicator,
+  presenceSizeIds,
+  presenceStatusIds,
+  type PresenceStatusId,
+} from "./presence-indicator";
+
+const meta = {
+  title: "Components/PresenceIndicator",
+  component: PresenceIndicator,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    status: {
+      options: presenceStatusIds,
+      control: { type: "radio" },
+      table: {
+        type: {
+          summary: "PresenceStatusId",
+          detail: presenceStatusIds.map((s) => `'${s}'`).join(" | "),
+        },
+      },
+    },
+    size: {
+      options: presenceSizeIds,
+      control: { type: "radio" },
+      table: {
+        type: {
+          summary: "PresenceSizeId",
+          detail: presenceSizeIds.map((s) => `'${s}'`).join(" | "),
+        },
+      },
+    },
+    pulse: { control: { type: "boolean" } },
+    bordered: { control: { type: "boolean" } },
+    label: { control: { type: "text" } },
+  },
+  args: {
+    status: "online",
+    size: "md",
+    pulse: false,
+    bordered: false,
+  },
+} satisfies Meta<typeof PresenceIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Pulsing: Story = {
+  args: {
+    status: "online",
+    pulse: true,
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    status: "online",
+    label: true,
+  },
+};
+
+export const CustomLabel: Story = {
+  args: {
+    status: "idle",
+    label: "Back in 5",
+  },
+};
+
+function AllStatusesExample(): ReactElement {
+  return (
+    <div className="grid grid-cols-2 gap-x-8 gap-y-3 sm:grid-cols-3">
+      {presenceStatusIds.map((status: PresenceStatusId) => (
+        <div key={status} className="flex items-center gap-2">
+          <PresenceIndicator status={status} />
+          <span className="text-sm capitalize text-foreground">{status}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const AllStatuses: Story = {
+  render: (): ReactElement => <AllStatusesExample />,
+};
+
+function AllSizesExample(): ReactElement {
+  return (
+    <div className="flex items-end gap-6">
+      {presenceSizeIds.map((size) => (
+        <div key={size} className="flex flex-col items-center gap-2">
+          <PresenceIndicator status="online" size={size} />
+          <span className="text-xs text-muted-foreground">{size}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const Sizes: Story = {
+  render: (): ReactElement => <AllSizesExample />,
+};
+
+function WithLabelsExample(): ReactElement {
+  return (
+    <div className="flex flex-col gap-2">
+      {presenceStatusIds.map((status: PresenceStatusId) => (
+        <PresenceIndicator key={status} status={status} label />
+      ))}
+    </div>
+  );
+}
+
+export const StatusesWithLabels: Story = {
+  render: (): ReactElement => <WithLabelsExample />,
+};
+
+function OnAvatarExample(): ReactElement {
+  const users: { initials: string; color: string; status: PresenceStatusId }[] = [
+    { initials: "AB", color: "bg-primary text-primary-foreground", status: "online" },
+    { initials: "CD", color: "bg-destructive text-white", status: "busy" },
+    { initials: "EF", color: "bg-secondary text-secondary-foreground", status: "idle" },
+    { initials: "GH", color: "bg-accent text-accent-foreground", status: "away" },
+    { initials: "IJ", color: "bg-muted text-muted-foreground", status: "dnd" },
+    { initials: "KL", color: "bg-muted text-muted-foreground", status: "offline" },
+  ];
+
+  return (
+    <div className="flex flex-wrap items-end gap-6">
+      {users.map((user) => (
+        <div key={user.initials} className="flex flex-col items-center gap-2">
+          <span className="relative inline-block">
+            <Avatar size="lg">
+              <AvatarFallback className={user.color}>{user.initials}</AvatarFallback>
+            </Avatar>
+            <PresenceIndicator
+              status={user.status}
+              size="md"
+              bordered
+              className="absolute bottom-0 right-0"
+            />
+          </span>
+          <span className="text-xs capitalize text-muted-foreground">
+            {user.status}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const OnAvatar: Story = {
+  render: (): ReactElement => <OnAvatarExample />,
+};
+
+function PulsingOnlineRosterExample(): ReactElement {
+  const teammates: { name: string; initials: string; status: PresenceStatusId }[] = [
+    { name: "Ada Lovelace", initials: "AL", status: "online" },
+    { name: "Grace Hopper", initials: "GH", status: "online" },
+    { name: "Linus Torvalds", initials: "LT", status: "idle" },
+    { name: "Margaret Hamilton", initials: "MH", status: "busy" },
+    { name: "Edsger Dijkstra", initials: "ED", status: "offline" },
+  ];
+
+  return (
+    <ul className="flex w-64 flex-col divide-y divide-border rounded-md border border-border bg-card">
+      {teammates.map((teammate) => (
+        <li
+          key={teammate.initials}
+          className="flex items-center gap-3 px-3 py-2"
+        >
+          <span className="relative inline-block">
+            <Avatar size="sm">
+              <AvatarFallback className="bg-muted text-muted-foreground">
+                {teammate.initials}
+              </AvatarFallback>
+            </Avatar>
+            <PresenceIndicator
+              status={teammate.status}
+              size="sm"
+              bordered
+              pulse={teammate.status === "online"}
+              className="absolute bottom-0 right-0"
+            />
+          </span>
+          <span className="flex-1 text-sm text-foreground">{teammate.name}</span>
+          <PresenceIndicator status={teammate.status} label size="xs" />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export const TeamRoster: Story = {
+  render: (): ReactElement => <PulsingOnlineRosterExample />,
+};
diff --git a/src/components/ui/presence-indicator/index.ts b/src/components/ui/presence-indicator/index.ts
new file mode 100644
index 0000000..c6d3aad
--- /dev/null
+++ b/src/components/ui/presence-indicator/index.ts
@@ -0,0 +1,11 @@
+export {
+  PresenceIndicator,
+  PresenceIndicator as default,
+  presenceStatusIds,
+  presenceSizeIds,
+} from "./presence-indicator";
+export type {
+  PresenceIndicatorProps,
+  PresenceStatusId,
+  PresenceSizeId,
+} from "./presence-indicator";
diff --git a/src/components/ui/presence-indicator/presence-indicator.tsx b/src/components/ui/presence-indicator/presence-indicator.tsx
new file mode 100644
index 0000000..37e7e63
--- /dev/null
+++ b/src/components/ui/presence-indicator/presence-indicator.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+import type { HTMLAttributes, ReactElement, Ref } from "react";
+
+import { cn } from "@/lib/utils";
+
+export const presenceStatusIds = [
+  "online",
+  "idle",
+  "busy",
+  "away",
+  "dnd",
+  "offline",
+  "invisible",
+] as const satisfies readonly string[];
+
+export type PresenceStatusId = (typeof presenceStatusIds)[number];
+
+export const presenceSizeIds = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+] as const satisfies readonly string[];
+
+export type PresenceSizeId = (typeof presenceSizeIds)[number];
+
+const dotColorClasses = {
+  online: "bg-green-500",
+  idle: "bg-yellow-400",
+  busy: "bg-orange-500",
+  away: "bg-amber-500",
+  dnd: "bg-destructive",
+  offline: "bg-muted-foreground/50",
+  invisible: "bg-transparent border border-muted-foreground/60",
+} satisfies Record<PresenceStatusId, string>;
+
+const dotSizeClasses = {
+  xs: "h-1.5 w-1.5",
+  sm: "h-2 w-2",
+  md: "h-2.5 w-2.5",
+  lg: "h-3 w-3",
+  xl: "h-3.5 w-3.5",
+} satisfies Record<PresenceSizeId, string>;
+
+const dndBarSizeClasses = {
+  xs: "h-px w-[60%]",
+  sm: "h-px w-[60%]",
+  md: "h-px w-[60%]",
+  lg: "h-[1.5px] w-[60%]",
+  xl: "h-[1.5px] w-[60%]",
+} satisfies Record<PresenceSizeId, string>;
+
+const ringSizeClasses = {
+  xs: "ring-[1.5px]",
+  sm: "ring-2",
+  md: "ring-2",
+  lg: "ring-2",
+  xl: "ring-[2.5px]",
+} satisfies Record<PresenceSizeId, string>;
+
+const labelTextClasses = {
+  xs: "text-[10px]",
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm",
+  xl: "text-sm",
+} satisfies Record<PresenceSizeId, string>;
+
+const statusLabels = {
+  online: "Online",
+  idle: "Idle",
+  busy: "Busy",
+  away: "Away",
+  dnd: "Do not disturb",
+  offline: "Offline",
+  invisible: "Invisible",
+} satisfies Record<PresenceStatusId, string>;
+
+const pulseColorClasses = {
+  online: "bg-green-500",
+  idle: "bg-yellow-400",
+  busy: "bg-orange-500",
+  away: "bg-amber-500",
+  dnd: "bg-destructive",
+  offline: "bg-muted-foreground/50",
+  invisible: "bg-muted-foreground/40",
+} satisfies Record<PresenceStatusId, string>;
+
+export interface PresenceIndicatorProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "aria-label"> {
+  /** Semantic presence status. Defaults to `"online"`. */
+  status?: PresenceStatusId;
+  /** Visual size of the dot. Defaults to `"md"`. */
+  size?: PresenceSizeId;
+  /** Render a soft `ping` animation around the dot. */
+  pulse?: boolean;
+  /**
+   * Render a contrasting ring around the dot. Useful when overlaying the
+   * indicator on top of an `Avatar` or coloured surface.
+   */
+  bordered?: boolean;
+  /**
+   * Render a text label next to the dot. Pass `true` to use the default
+   * status label (e.g. `"Online"`), or a string for a custom one.
+   */
+  label?: boolean | string;
+  /**
+   * Accessible label describing the status. Defaults to a humanised version of
+   * the `status` (e.g. `"Online"`). Set to `null` to mark the indicator as
+   * purely decorative (e.g. when paired with adjacent text that already
+   * conveys the status).
+   */
+  "aria-label"?: string | null;
+  ref?: Ref<HTMLSpanElement>;
+}
+
+function PresenceDot({
+  status,
+  size,
+  pulse,
+  bordered,
+}: {
+  status: PresenceStatusId;
+  size: PresenceSizeId;
+  pulse: boolean;
+  bordered: boolean;
+}): ReactElement {
+  return (
+    <span className="relative inline-flex items-center justify-center">
+      {pulse ? (
+        <span
+          aria-hidden="true"
+          className={cn(
+            "absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping",
+            pulseColorClasses[status],
+            dotSizeClasses[size],
+          )}
+        />
+      ) : null}
+      <span
+        data-slot="presence-indicator-dot"
+        className={cn(
+          "relative inline-flex items-center justify-center rounded-full",
+          dotColorClasses[status],
+          dotSizeClasses[size],
+          bordered && cn(ringSizeClasses[size], "ring-background"),
+        )}
+      >
+        {status === "dnd" ? (
+          <span
+            aria-hidden="true"
+            className={cn(
+              "block rounded-full bg-destructive-foreground",
+              dndBarSizeClasses[size],
+            )}
+          />
+        ) : null}
+      </span>
+    </span>
+  );
+}
+
+function PresenceIndicator({
+  className,
+  status = "online",
+  size = "md",
+  pulse = false,
+  bordered = false,
+  label,
+  ref,
+  "aria-label": ariaLabelProp,
+  ...rest
+}: PresenceIndicatorProps): ReactElement {
+  const decorative = ariaLabelProp === null;
+  const ariaLabel = decorative
+    ? undefined
+    : (ariaLabelProp ?? statusLabels[status]);
+
+  const labelText =
+    label === true
+      ? statusLabels[status]
+      : typeof label === "string"
+        ? label
+        : null;
+
+  if (labelText !== null) {
+    return (
+      <span
+        ref={ref}
+        data-slot="presence-indicator"
+        data-status={status}
+        role={decorative ? undefined : "status"}
+        aria-label={ariaLabel}
+        aria-hidden={decorative ? true : undefined}
+        className={cn(
+          "inline-flex items-center gap-1.5 text-foreground",
+          className,
+        )}
+        {...rest}
+      >
+        <PresenceDot
+          status={status}
+          size={size}
+          pulse={pulse}
+          bordered={bordered}
+        />
+        <span className={cn("font-medium leading-none", labelTextClasses[size])}>
+          {labelText}
+        </span>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      ref={ref}
+      data-slot="presence-indicator"
+      data-status={status}
+      role={decorative ? undefined : "status"}
+      aria-label={ariaLabel}
+      aria-hidden={decorative ? true : undefined}
+      className={cn("inline-flex shrink-0 items-center justify-center", className)}
+      {...rest}
+    >
+      <PresenceDot
+        status={status}
+        size={size}
+        pulse={pulse}
+        bordered={bordered}
+      />
+    </span>
+  );
+}
+PresenceIndicator.displayName = "PresenceIndicator";
+
+export { PresenceIndicator };