diff --git a/docs/reference/generated/toast-close.json b/docs/reference/generated/toast-close.json
new file mode 100644
index 0000000000..7381d9df92
--- /dev/null
+++ b/docs/reference/generated/toast-close.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToastClose",
+  "description": "Closes the toast when clicked.\nRenders a `<button>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/toast-description.json b/docs/reference/generated/toast-description.json
new file mode 100644
index 0000000000..8b7f1a94bd
--- /dev/null
+++ b/docs/reference/generated/toast-description.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToastDescription",
+  "description": "A description that describes the toast.\nRenders a `<p>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/toast-provider.json b/docs/reference/generated/toast-provider.json
new file mode 100644
index 0000000000..ba1e3bcc35
--- /dev/null
+++ b/docs/reference/generated/toast-provider.json
@@ -0,0 +1,22 @@
+{
+  "name": "ToastProvider",
+  "description": "Provides a context for creating and managing toasts.",
+  "props": {
+    "limit": {
+      "type": "number",
+      "default": "3",
+      "description": "The maximum number of toasts that can be displayed at once.\nWhen the limit is reached, the oldest toast will be removed to make room for the new one."
+    },
+    "toastManager": {
+      "type": "createToastManager.ToastManager",
+      "description": "A global manager for toasts to use outside of a React component."
+    },
+    "timeout": {
+      "type": "number",
+      "default": "5000",
+      "description": "The default amount of time (in ms) before a toast is auto dismissed.\nA value of `0` will prevent the toast from being dismissed automatically."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/toast-root.json b/docs/reference/generated/toast-root.json
new file mode 100644
index 0000000000..98d3afbdac
--- /dev/null
+++ b/docs/reference/generated/toast-root.json
@@ -0,0 +1,56 @@
+{
+  "name": "ToastRoot",
+  "description": "Groups all parts of an individual toast.\nRenders a `<div>` element.",
+  "props": {
+    "swipeDirection": {
+      "type": "'down' | 'left' | 'right' | 'up' | Array<'down' | 'left' | 'right' | 'up'>",
+      "default": "'up'",
+      "description": "Direction(s) in which the toast can be swiped to dismiss."
+    },
+    "toast": {
+      "type": "Toast",
+      "required": true,
+      "description": "The toast to render."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {
+    "data-swipe": {
+      "description": "Indicates the current swipe state.",
+      "type": "'start' | 'move' | 'end' | 'cancel'"
+    },
+    "data-swipe-direction": {
+      "description": "Indicates the direction of the swipe.",
+      "type": "'up' | 'down' | 'left' | 'right'"
+    }
+  },
+  "cssVariables": {
+    "--toast-index": {
+      "description": "Indicates the index of the toast in the list.",
+      "type": "number"
+    },
+    "--toast-offset": {
+      "description": "Indicates the offset of the toast in the list.",
+      "type": "number"
+    },
+    "--toast-swipe-direction": {
+      "description": "Indicates the direction the toast is swiped.",
+      "type": "'up' | 'down' | 'left' | 'right'"
+    },
+    "--toast-swipe-move-x": {
+      "description": "Indicates the horizontal swipe movement of the toast.",
+      "type": "number"
+    },
+    "--toast-swipe-move-y": {
+      "description": "Indicates the vertical swipe movement of the toast.",
+      "type": "number"
+    }
+  }
+}
diff --git a/docs/reference/generated/toast-title.json b/docs/reference/generated/toast-title.json
new file mode 100644
index 0000000000..805affa8d7
--- /dev/null
+++ b/docs/reference/generated/toast-title.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToastTitle",
+  "description": "A title that labels the toast.\nRenders an `<h2>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/toast-viewport.json b/docs/reference/generated/toast-viewport.json
new file mode 100644
index 0000000000..c2b0da29c6
--- /dev/null
+++ b/docs/reference/generated/toast-viewport.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToastViewport",
+  "description": "A container viewport for toasts.\nRenders a `<div>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/overrides/toast-provider.json b/docs/reference/overrides/toast-provider.json
new file mode 100644
index 0000000000..a1e0f94c91
--- /dev/null
+++ b/docs/reference/overrides/toast-provider.json
@@ -0,0 +1,8 @@
+{
+  "name": "ToastProvider",
+  "props": {
+    "toastManager": {
+      "type": "createToastManager.ToastManager"
+    }
+  }
+}
diff --git a/docs/reference/overrides/toast-root.json b/docs/reference/overrides/toast-root.json
new file mode 100644
index 0000000000..47cc27e015
--- /dev/null
+++ b/docs/reference/overrides/toast-root.json
@@ -0,0 +1,8 @@
+{
+  "name": "ToastRoot",
+  "props": {
+    "toast": {
+      "type": "Toast"
+    }
+  }
+}
diff --git a/docs/src/app/(private)/experiments/toast.module.css b/docs/src/app/(private)/experiments/toast.module.css
new file mode 100644
index 0000000000..e99ba4aba8
--- /dev/null
+++ b/docs/src/app/(private)/experiments/toast.module.css
@@ -0,0 +1,77 @@
+.viewport {
+  width: 300px;
+  position: fixed;
+  left: 50%;
+  top: 20px;
+  transform: translateX(-50%);
+}
+
+.root {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  transform-origin: top center;
+  background: white;
+  padding: 1rem;
+  width: 300px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  z-index: calc(2147483647 - var(--toast-index));
+  transition:
+    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.5s;
+  transform: translateY(calc(var(--toast-index) * 15px)) scale(calc(1 - (var(--toast-index) * 0.1)));
+  opacity: 1;
+  --gap: 10px;
+  user-select: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 100%;
+    width: 100%;
+    height: calc(var(--gap) + 1px);
+  }
+
+  &[data-expanded] {
+    transform: translateY(calc(var(--toast-offset) + calc(var(--toast-index) * var(--gap))));
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateY(-150%);
+  }
+
+  &[data-ending-style] {
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in;
+  }
+
+  &[data-swipe='end'][data-ending-style] {
+    transition-duration: calc(0.3s / var(--toast-momentum, 1));
+    transition-timing-function: linear;
+  }
+}
+
+.title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.button {
+  background: royalblue;
+  color: white;
+  padding: 0.5rem;
+  border-radius: 5px;
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 0.5rem;
+}
diff --git a/docs/src/app/(private)/experiments/toast.tsx b/docs/src/app/(private)/experiments/toast.tsx
new file mode 100644
index 0000000000..e94704be56
--- /dev/null
+++ b/docs/src/app/(private)/experiments/toast.tsx
@@ -0,0 +1,129 @@
+'use client';
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import styles from './toast.module.css';
+
+const globalToastManager = Toast.createToastManager();
+
+function showGlobalToast() {
+  globalToastManager.promise(fetchUserData(), {
+    error: 'Failed to fetch user data',
+    success: 'User data loaded!',
+    loading: 'Fetching user data...',
+  });
+}
+
+function fetchUserData() {
+  return new Promise((resolve, reject) => {
+    // Simulate API call with a 50% chance of success
+    setTimeout(() => {
+      const success = Math.random() > 0.5;
+      if (success) {
+        resolve({ name: 'John Doe', email: 'john@example.com' });
+      } else {
+        reject(new Error('Failed to fetch user data'));
+      }
+    }, 1000);
+  });
+}
+
+export default function Page() {
+  return (
+    <Toast.Provider toastManager={globalToastManager}>
+      <Toast.Viewport className={styles.viewport}>
+        <Toasts />
+      </Toast.Viewport>
+      <ToastButtons />
+    </Toast.Provider>
+  );
+}
+
+function ToastButtons() {
+  const toast = Toast.useToast();
+
+  function showRegularToast() {
+    toast.add({
+      title: 'Toast created',
+      description: 'This is a toast.',
+    });
+  }
+
+  function showActionToast() {
+    toast.add({
+      type: 'undo',
+      title: 'Message deleted',
+    });
+  }
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: 20,
+        display: 'flex',
+        gap: 10,
+        justifyContent: 'center',
+      }}
+    >
+      <button className={styles.button} type="button" onClick={showRegularToast}>
+        Show regular toast
+      </button>
+      <button className={styles.button} type="button" onClick={showActionToast}>
+        Show action toast
+      </button>
+      <button className={styles.button} type="button" onClick={showGlobalToast}>
+        Show global toast
+      </button>
+      <ToastPromiseExample />
+    </div>
+  );
+}
+
+function Toasts() {
+  const { toasts } = Toast.useToast();
+  return toasts.map((toast) => (
+    <Toast.Root key={toast.id} toast={toast} className={styles.root}>
+      {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+      {toast.description && (
+        <Toast.Description>{toast.description}</Toast.Description>
+      )}
+      {toast.type === 'undo' && (
+        <button
+          className={styles.button}
+          type="button"
+          onClick={() => alert('Action undone')}
+        >
+          Undo
+        </button>
+      )}
+      <Toast.Close className={styles.close} aria-label="Close">
+        x
+      </Toast.Close>
+    </Toast.Root>
+  ));
+}
+
+function ToastPromiseExample() {
+  const toast = Toast.useToast();
+
+  const handlePromiseClick = () => {
+    toast
+      .promise(fetchUserData(), {
+        loading: 'Fetching user data...',
+        success: 'User data loaded!',
+        error: 'Failed to load user data',
+      })
+      .then((data) => {
+        console.log('User data:', data);
+      })
+      .catch((err) => {
+        console.error('Error handled:', err);
+      });
+  };
+
+  return (
+    <button className={styles.button} type="button" onClick={handlePromiseClick}>
+      Show promise toast
+    </button>
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/toast/demos/custom/css-modules/index.module.css
new file mode 100644
index 0000000000..16eb3f0f27
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -0,0 +1,280 @@
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Viewport {
+  position: fixed;
+  width: 100%;
+  max-width: 320px;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+
+  &[data-position='top'] {
+    top: 1rem;
+  }
+
+  &[data-position='top-left'] {
+    top: 1rem;
+    left: 1rem;
+    right: auto;
+    align-items: flex-start;
+  }
+
+  &[data-position='top-right'] {
+    top: 1rem;
+    right: 1rem;
+    left: auto;
+    align-items: flex-end;
+  }
+
+  &[data-position='bottom'] {
+    bottom: 2rem;
+    top: auto;
+  }
+
+  &[data-position='bottom-left'] {
+    bottom: 2rem;
+    left: 2rem;
+    right: auto;
+    top: auto;
+  }
+
+  &[data-position='bottom-right'] {
+    bottom: 2rem;
+    right: 2rem;
+    left: auto;
+    top: auto;
+  }
+}
+
+.Toast {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  box-sizing: border-box;
+  background: var(--color-gray-50);
+  color: var(--color-gray-900);
+  border: 1px solid var(--color-gray-200);
+  padding: 1rem;
+  width: 300px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  transition:
+    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.5s;
+  user-select: none;
+  z-index: calc(2147483647 - var(--toast-index));
+
+  --gap: 10px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    left: 0;
+    height: calc(var(--gap) + 1px);
+  }
+
+  &[data-position^='top'] {
+    transform: translate(
+        var(--toast-swipe-move-x),
+        calc(var(--toast-swipe-move-y) + calc(var(--toast-index) * 20%))
+      )
+      scale(calc(1 - (var(--toast-index) * 0.1)));
+
+    &::after {
+      top: 100%;
+    }
+
+    &[data-expanded] {
+      transform: translate(
+        var(--toast-swipe-move-x),
+        calc(
+          calc(var(--toast-offset) + calc(var(--toast-index) * var(--gap))) +
+            var(--toast-swipe-move-y)
+        )
+      );
+    }
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translateY(-150%);
+    }
+
+    &[data-ending-style] {
+      &[data-swipe-direction='up'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) - 100%));
+      }
+
+      &[data-swipe-direction='left'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) - 100%));
+      }
+
+      &[data-swipe-direction='right'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) + 100%));
+      }
+
+      &[data-swipe-direction='down'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) + 100%));
+      }
+    }
+  }
+
+  &[data-position^='bottom'] {
+    transform: translate(
+        var(--toast-swipe-move-x),
+        calc(var(--toast-swipe-move-y) + calc(var(--toast-index) * -20%))
+      )
+      scale(calc(1 - (var(--toast-index) * 0.1)));
+    bottom: 0;
+
+    &::after {
+      top: 100%;
+    }
+
+    &[data-expanded] {
+      transform: translate(
+        var(--toast-swipe-move-x),
+        calc(
+          calc(var(--toast-offset) * -1 + calc(var(--toast-index) * var(--gap) * -1)) +
+            var(--toast-swipe-move-y)
+        )
+      );
+    }
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translateY(150%);
+    }
+
+    &[data-ending-style] {
+      &[data-swipe-direction='up'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) - 100%));
+      }
+
+      &[data-swipe-direction='left'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) - 100%));
+      }
+
+      &[data-swipe-direction='right'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) + 100%));
+      }
+
+      &[data-swipe-direction='down'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) + 100%));
+      }
+    }
+  }
+
+  &[data-position$='left'] {
+    right: auto;
+    margin-left: 0;
+  }
+
+  &[data-position$='right'] {
+    left: auto;
+    margin-right: 0;
+  }
+
+  &[data-ending-style] {
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+}
+
+.Title {
+  font-weight: 500;
+  font-size: 0.975rem;
+  line-height: 1.25rem;
+}
+
+.Description {
+  font-size: 0.925rem;
+  line-height: 1.25rem;
+  color: var(--color-gray-700);
+}
+
+.Actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.UndoButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  border-radius: 0.25rem;
+  background-color: var(--color-gray-900);
+  color: var(--color-gray-50);
+  border: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  border: none;
+  background: transparent;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-gray-500);
+  border-radius: 0.25rem;
+
+  &:hover {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-700);
+  }
+}
+
+.Icon {
+  width: 1rem;
+  height: 1rem;
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/custom/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/toast/demos/custom/css-modules/index.tsx
new file mode 100644
index 0000000000..9db3b954c4
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/custom/css-modules/index.tsx
@@ -0,0 +1,97 @@
+'use client';
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import styles from './index.module.css';
+
+interface CustomToastData {
+  userId: string;
+}
+
+function isCustomToast(
+  toast: Toast.Root.ToastType,
+): toast is Toast.Root.ToastType<CustomToastData> {
+  return toast.data?.userId !== undefined;
+}
+
+export default function CustomToastExample() {
+  return (
+    <Toast.Provider>
+      <CustomToast />
+      <Toast.Viewport className={styles.Viewport} data-position="top">
+        <ToastList />
+      </Toast.Viewport>
+    </Toast.Provider>
+  );
+}
+
+function CustomToast() {
+  const toast = Toast.useToast();
+
+  function action() {
+    const data: CustomToastData = {
+      userId: '123',
+    };
+
+    toast.add({
+      title: 'Toast with custom data',
+      data,
+    });
+  }
+
+  return (
+    <button type="button" onClick={action} className={styles.Button}>
+      Create custom toast
+    </button>
+  );
+}
+
+function ToastList() {
+  const { toasts } = Toast.useToast();
+
+  return toasts.map((toast) => (
+    <Toast.Root
+      key={toast.id}
+      toast={toast}
+      className={styles.Toast}
+      data-position="top"
+      swipeDirection="up"
+    >
+      {toast.title && (
+        <Toast.Title className={styles.Title}>{toast.title}</Toast.Title>
+      )}
+      {toast.description && (
+        <Toast.Description className={styles.Description}>
+          {toast.description}
+        </Toast.Description>
+      )}
+      {isCustomToast(toast) && toast.data && (
+        <span className={styles.NotifyButton}>
+          `data.userId` is {toast.data.userId}
+        </span>
+      )}
+      <Toast.Close className={styles.Close} aria-label="Close">
+        <XIcon className={styles.Icon} />
+      </Toast.Close>
+    </Toast.Root>
+  ));
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/custom/index.ts b/docs/src/app/(public)/(content)/react/components/toast/demos/custom/index.ts
new file mode 100644
index 0000000000..94264ab85d
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/custom/index.ts
@@ -0,0 +1,2 @@
+'use client';
+export { default as CssModules } from './css-modules';
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/toast/demos/hero/css-modules/index.module.css
new file mode 100644
index 0000000000..dfb5b55a2b
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -0,0 +1,255 @@
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Viewport {
+  position: fixed;
+  width: 100%;
+  max-width: 320px;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+
+  &[data-position='top'] {
+    top: 1rem;
+  }
+
+  &[data-position='top-left'] {
+    top: 1rem;
+    left: 1rem;
+    right: auto;
+    align-items: flex-start;
+  }
+
+  &[data-position='top-right'] {
+    top: 1rem;
+    right: 1rem;
+    left: auto;
+    align-items: flex-end;
+  }
+
+  &[data-position='bottom'] {
+    bottom: 2rem;
+    top: auto;
+  }
+
+  &[data-position='bottom-left'] {
+    bottom: 2rem;
+    left: 2rem;
+    right: auto;
+    top: auto;
+  }
+
+  &[data-position='bottom-right'] {
+    bottom: 2rem;
+    right: 2rem;
+    left: auto;
+    top: auto;
+  }
+}
+
+.Toast {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  box-sizing: border-box;
+  background: var(--color-gray-50);
+  color: var(--color-gray-900);
+  border: 1px solid var(--color-gray-200);
+  padding: 1rem;
+  width: 300px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  background-clip: padding-box;
+  border-radius: 0.5rem;
+  transition:
+    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.5s;
+  user-select: none;
+  z-index: calc(1000 - var(--toast-index));
+
+  --gap: 10px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    left: 0;
+    height: calc(var(--gap) + 1px);
+  }
+
+  &[data-position^='top'] {
+    transform: translate(
+        var(--toast-swipe-move-x),
+        calc(var(--toast-swipe-move-y) + calc(var(--toast-index) * 20%))
+      )
+      scale(calc(1 - (var(--toast-index) * 0.1)));
+
+    &::after {
+      top: 100%;
+    }
+
+    &[data-expanded] {
+      transform: translate(
+        var(--toast-swipe-move-x),
+        calc(
+          calc(var(--toast-offset) + calc(var(--toast-index) * var(--gap))) +
+            var(--toast-swipe-move-y)
+        )
+      );
+    }
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translateY(-150%);
+    }
+
+    &[data-ending-style] {
+      &[data-swipe-direction='up'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) - 100%));
+      }
+
+      &[data-swipe-direction='left'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) - 100%));
+      }
+
+      &[data-swipe-direction='right'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) + 100%));
+      }
+
+      &[data-swipe-direction='down'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) + 100%));
+      }
+    }
+  }
+
+  &[data-position^='bottom'] {
+    transform: translate(
+        var(--toast-swipe-move-x),
+        calc(var(--toast-swipe-move-y) + calc(var(--toast-index) * -20%))
+      )
+      scale(calc(1 - (var(--toast-index) * 0.1)));
+    bottom: 0;
+
+    &::after {
+      top: 100%;
+    }
+
+    &[data-expanded] {
+      transform: translate(
+        var(--toast-swipe-move-x),
+        calc(
+          calc(var(--toast-offset) * -1 + calc(var(--toast-index) * var(--gap) * -1)) +
+            var(--toast-swipe-move-y)
+        )
+      );
+    }
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translateY(150%);
+    }
+
+    &[data-ending-style] {
+      &[data-swipe-direction='up'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) - 100%));
+      }
+
+      &[data-swipe-direction='left'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) - 100%));
+      }
+
+      &[data-swipe-direction='right'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) + 100%));
+      }
+
+      &[data-swipe-direction='down'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) + 100%));
+      }
+    }
+  }
+
+  &[data-position$='left'] {
+    right: auto;
+    margin-left: 0;
+  }
+
+  &[data-position$='right'] {
+    left: auto;
+    margin-right: 0;
+  }
+
+  &[data-ending-style] {
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+}
+
+.Title {
+  font-weight: 500;
+  font-size: 0.975rem;
+  line-height: 1.25rem;
+}
+
+.Description {
+  font-size: 0.925rem;
+  line-height: 1.25rem;
+  color: var(--color-gray-700);
+}
+
+.Close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  border: none;
+  background: transparent;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-gray-500);
+  border-radius: 0.25rem;
+
+  &:hover {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-700);
+  }
+}
+
+.Icon {
+  width: 1rem;
+  height: 1rem;
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/hero/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/toast/demos/hero/css-modules/index.tsx
new file mode 100644
index 0000000000..a19f880d66
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/hero/css-modules/index.tsx
@@ -0,0 +1,79 @@
+'use client';
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import styles from './index.module.css';
+
+export default function ExampleToast() {
+  return (
+    <Toast.Provider>
+      <ToastButton />
+      <Toast.Viewport className={styles.Viewport} data-position="top">
+        <ToastList />
+      </Toast.Viewport>
+    </Toast.Provider>
+  );
+}
+
+function ToastButton() {
+  const toast = Toast.useToast();
+  const [count, setCount] = React.useState(0);
+
+  function createToast() {
+    setCount((prev) => prev + 1);
+    toast.add({
+      title: `Toast ${count + 1} created`,
+      description: 'This is a toast notification.',
+    });
+  }
+
+  return (
+    <button type="button" className={styles.Button} onClick={createToast}>
+      Create toast
+    </button>
+  );
+}
+
+function ToastList() {
+  const { toasts } = Toast.useToast();
+
+  return toasts.map((toast) => (
+    <Toast.Root
+      key={toast.id}
+      toast={toast}
+      className={styles.Toast}
+      data-position="top"
+    >
+      {toast.title && (
+        <Toast.Title className={styles.Title}>{toast.title}</Toast.Title>
+      )}
+      {toast.description && (
+        <Toast.Description className={styles.Description}>
+          {toast.description}
+        </Toast.Description>
+      )}
+      <Toast.Close className={styles.Close} aria-label="Close">
+        <XIcon className={styles.Icon} />
+      </Toast.Close>
+    </Toast.Root>
+  ));
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/hero/index.ts b/docs/src/app/(public)/(content)/react/components/toast/demos/hero/index.ts
new file mode 100644
index 0000000000..80097d6015
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/hero/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/toast/demos/hero/tailwind/index.tsx
new file mode 100644
index 0000000000..f7b22163d0
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -0,0 +1,148 @@
+'use client';
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+
+export default function ExampleToast() {
+  return (
+    <Toast.Provider>
+      <ToastButton />
+      <Toast.Viewport
+        // prettier-ignore
+        className="
+          fixed mx-auto flex w-full max-w-[320px]
+
+          data-[position=top]:top-4 data-[position=top]:right-0 data-[position=top]:left-0
+          data-[position=bottom]:bottom-4 data-[position=bottom]:right-0 data-[position=bottom]:left-0
+          data-[position=top-left]:top-4 data-[position=top-left]:left-4 data-[position=top-left]:items-start
+          data-[position=top-right]:top-4 data-[position=top-right]:right-4 data-[position=top-right]:items-end
+          data-[position=bottom-left]:bottom-4 data-[position=bottom-left]:left-4 data-[position=bottom-left]:top-auto data-[position=bottom-left]:items-start
+          data-[position=bottom-right]:bottom-4 data-[position=bottom-right]:right-4 data-[position=bottom-right]:top-auto data-[position=bottom-right]:items-end
+        "
+        data-position="top"
+      >
+        <ToastList />
+      </Toast.Viewport>
+    </Toast.Provider>
+  );
+}
+
+function ToastButton() {
+  const toast = Toast.useToast();
+  const [count, setCount] = React.useState(0);
+
+  function createToast() {
+    setCount((prev) => prev + 1);
+    toast.add({
+      title: `Toast ${count + 1} created`,
+      description: 'This is a toast notification.',
+    });
+  }
+
+  return (
+    <button
+      type="button"
+      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-medium text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue active:bg-gray-100"
+      onClick={createToast}
+    >
+      Create toast
+    </button>
+  );
+}
+
+function ToastList() {
+  const { toasts } = Toast.useToast();
+
+  return toasts.map((toast) => (
+    <Toast.Root
+      key={toast.id}
+      toast={toast}
+      data-position="top"
+      swipeDirection="up"
+      // prettier-ignore
+      className="
+        absolute left-0 right-0 mx-auto
+        bg-gray-50 p-4
+        bg-clip-padding
+        w-[300px]
+        shadow-lg
+        rounded-lg
+        select-none
+        border border-gray-200
+        z-[calc(1000-var(--toast-index))]
+        transition-all [transition-property:opacity,transform] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
+        data-[ending-style]:duration-200 data-[ending-style]:ease-in data-[ending-style]:opacity-0
+
+        after:content-[''] after:absolute after:left-0 after:w-full after:h-[calc(var(--gap)+1px)]
+        data-[position^=top]:after:top-full
+        data-[position^=bottom]:after:bottom-full
+
+        data-[position^=bottom]:bottom-0
+
+        data-[position$=left]:right-auto data-[position$=left]:ml-0
+        data-[position$=right]:left-auto data-[position$=right]:mr-0
+       
+        data-[position^=top]:data-[expanded]:[transform:translate(var(--toast-swipe-move-x),calc(var(--toast-offset)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-move-y)))]
+        data-[position^=bottom]:data-[expanded]:[transform:translate(var(--toast-swipe-move-x),calc(var(--toast-offset)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-move-y)))]
+
+        data-[position^=top]:[transform:translate(var(--toast-swipe-move-x),calc(var(--toast-swipe-move-y)+calc(var(--toast-index)*20%)))_scale(calc(1-(var(--toast-index)*0.1)))]
+        data-[position^=bottom]:[transform:translate(var(--toast-swipe-move-x),calc(var(--toast-swipe-move-y)+calc(var(--toast-index)*-20%)))_scale(calc(1-(var(--toast-index)*0.1)))]
+
+        data-[position^=top]:data-[starting-style]:[transform:translateY(-150%)]
+        data-[position^=top]:data-[ending-style]:[transform:translateY(-150%)]
+        data-[position^=top]:data-[expanded]:data-[ending-style]:[transform:translateY(-150%)]
+
+        data-[position^=bottom]:data-[starting-style]:[transform:translateY(150%)]
+        data-[position^=bottom]:data-[ending-style]:[transform:translateY(150%)]
+        data-[position^=bottom]:data-[expanded]:data-[ending-style]:[transform:translateY(150%)]
+
+        data-[position^=top]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-move-y)-100%))]
+        data-[position^=top]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-move-x)-100%))]
+        data-[position^=top]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-move-x)+100%))]
+        data-[position^=top]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-move-y)+100%))]
+        
+        data-[position^=bottom]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-move-y)-100%))]
+        data-[position^=bottom]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-move-x)-100%))]
+        data-[position^=bottom]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-move-x)+100%))]
+        data-[position^=bottom]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-move-y)+100%))]
+      "
+      style={{ '--gap': '10px' } as React.CSSProperties}
+    >
+      {toast.title && (
+        <Toast.Title className="text-[0.975rem] leading-5 font-medium">
+          {toast.title}
+        </Toast.Title>
+      )}
+      {toast.description && (
+        <Toast.Description className="text-[0.925rem] leading-5 text-gray-700">
+          {toast.description}
+        </Toast.Description>
+      )}
+      <Toast.Close
+        className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+        aria-label="Close"
+      >
+        <XIcon className="h-4 w-4" />
+      </Toast.Close>
+    </Toast.Root>
+  ));
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/toast/demos/promise/css-modules/index.module.css
new file mode 100644
index 0000000000..4ec3ce4d64
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -0,0 +1,263 @@
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Viewport {
+  position: fixed;
+  width: 100%;
+  max-width: 320px;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+
+  &[data-position='top'] {
+    top: 1rem;
+  }
+
+  &[data-position='top-left'] {
+    top: 1rem;
+    left: 1rem;
+    right: auto;
+    align-items: flex-start;
+  }
+
+  &[data-position='top-right'] {
+    top: 1rem;
+    right: 1rem;
+    left: auto;
+    align-items: flex-end;
+  }
+
+  &[data-position='bottom'] {
+    bottom: 2rem;
+    top: auto;
+  }
+
+  &[data-position='bottom-left'] {
+    bottom: 2rem;
+    left: 2rem;
+    right: auto;
+    top: auto;
+  }
+
+  &[data-position='bottom-right'] {
+    bottom: 2rem;
+    right: 2rem;
+    left: auto;
+    top: auto;
+  }
+}
+
+.Toast {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  box-sizing: border-box;
+  background: var(--color-gray-50);
+  color: var(--color-gray-900);
+  border: 1px solid var(--color-gray-200);
+  padding: 1rem;
+  width: 300px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  background-clip: padding-box;
+  border-radius: 0.5rem;
+  transition:
+    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.5s;
+  user-select: none;
+  z-index: calc(2147483647 - var(--toast-index));
+
+  --gap: 10px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    left: 0;
+    height: calc(var(--gap) + 1px);
+  }
+
+  &[data-type='success'] {
+    background-color: lightgreen;
+  }
+
+  &[data-type='error'] {
+    background-color: lightpink;
+  }
+
+  &[data-position^='top'] {
+    transform: translate(
+        var(--toast-swipe-move-x),
+        calc(var(--toast-swipe-move-y) + calc(var(--toast-index) * 20%))
+      )
+      scale(calc(1 - (var(--toast-index) * 0.1)));
+
+    &::after {
+      top: 100%;
+    }
+
+    &[data-expanded] {
+      transform: translate(
+        var(--toast-swipe-move-x),
+        calc(
+          calc(var(--toast-offset) + calc(var(--toast-index) * var(--gap))) +
+            var(--toast-swipe-move-y)
+        )
+      );
+    }
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translateY(-150%);
+    }
+
+    &[data-ending-style] {
+      &[data-swipe-direction='up'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) - 100%));
+      }
+
+      &[data-swipe-direction='left'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) - 100%));
+      }
+
+      &[data-swipe-direction='right'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) + 100%));
+      }
+
+      &[data-swipe-direction='down'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) + 100%));
+      }
+    }
+  }
+
+  &[data-position^='bottom'] {
+    transform: translate(
+        var(--toast-swipe-move-x),
+        calc(var(--toast-swipe-move-y) + calc(var(--toast-index) * -20%))
+      )
+      scale(calc(1 - (var(--toast-index) * 0.1)));
+    bottom: 0;
+
+    &::after {
+      top: 100%;
+    }
+
+    &[data-expanded] {
+      transform: translate(
+        var(--toast-swipe-move-x),
+        calc(
+          calc(var(--toast-offset) * -1 + calc(var(--toast-index) * var(--gap) * -1)) +
+            var(--toast-swipe-move-y)
+        )
+      );
+    }
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translateY(150%);
+    }
+
+    &[data-ending-style] {
+      &[data-swipe-direction='up'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) - 100%));
+      }
+
+      &[data-swipe-direction='left'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) - 100%));
+      }
+
+      &[data-swipe-direction='right'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) + 100%));
+      }
+
+      &[data-swipe-direction='down'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) + 100%));
+      }
+    }
+  }
+
+  &[data-position$='left'] {
+    right: auto;
+    margin-left: 0;
+  }
+
+  &[data-position$='right'] {
+    left: auto;
+    margin-right: 0;
+  }
+
+  &[data-ending-style] {
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+}
+
+.Title {
+  font-weight: 500;
+  font-size: 0.975rem;
+  line-height: 1.25rem;
+}
+
+.Description {
+  font-size: 0.925rem;
+  line-height: 1.25rem;
+  color: var(--color-gray-700);
+}
+
+.Close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  border: none;
+  background: transparent;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-gray-500);
+  border-radius: 0.25rem;
+
+  &:hover {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-700);
+  }
+}
+
+.Icon {
+  width: 1rem;
+  height: 1rem;
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/promise/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/toast/demos/promise/css-modules/index.tsx
new file mode 100644
index 0000000000..bb6114dcf9
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/promise/css-modules/index.tsx
@@ -0,0 +1,93 @@
+'use client';
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import styles from './index.module.css';
+
+export default function PromiseToastExample() {
+  return (
+    <Toast.Provider>
+      <PromiseDemo />
+      <Toast.Viewport className={styles.Viewport} data-position="top">
+        <ToastList />
+      </Toast.Viewport>
+    </Toast.Provider>
+  );
+}
+
+function PromiseDemo() {
+  const toast = Toast.useToast();
+
+  function runPromise() {
+    toast.promise(
+      // Simulate an API request with a promise that resolves after 2 seconds
+      new Promise<string>((resolve, reject) => {
+        const shouldSucceed = Math.random() > 0.3; // 70% success rate
+        setTimeout(() => {
+          if (shouldSucceed) {
+            resolve('operation completed');
+          } else {
+            reject(new Error('operation failed'));
+          }
+        }, 2000);
+      }),
+      {
+        loading: 'Loading data...',
+        success: (data: string) => `Success: ${data}`,
+        error: (err: Error) => `Error: ${err.message}`,
+      },
+    );
+  }
+
+  return (
+    <button type="button" onClick={runPromise} className={styles.Button}>
+      Run promise
+    </button>
+  );
+}
+
+function ToastList() {
+  const { toasts } = Toast.useToast();
+
+  return toasts.map((toast) => (
+    <Toast.Root
+      key={toast.id}
+      toast={toast}
+      className={styles.Toast}
+      data-type={toast.type}
+      data-position="top"
+      swipeDirection="up"
+    >
+      {toast.title && (
+        <Toast.Title className={styles.Title}>{toast.title}</Toast.Title>
+      )}
+      {toast.description && (
+        <Toast.Description className={styles.Description}>
+          {toast.description}
+        </Toast.Description>
+      )}
+      <Toast.Close className={styles.Close} aria-label="Close">
+        <XIcon className={styles.Icon} />
+      </Toast.Close>
+    </Toast.Root>
+  ));
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/promise/index.ts b/docs/src/app/(public)/(content)/react/components/toast/demos/promise/index.ts
new file mode 100644
index 0000000000..94264ab85d
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/promise/index.ts
@@ -0,0 +1,2 @@
+'use client';
+export { default as CssModules } from './css-modules';
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/toast/demos/undo/css-modules/index.module.css
new file mode 100644
index 0000000000..16eb3f0f27
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -0,0 +1,280 @@
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Viewport {
+  position: fixed;
+  width: 100%;
+  max-width: 320px;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+
+  &[data-position='top'] {
+    top: 1rem;
+  }
+
+  &[data-position='top-left'] {
+    top: 1rem;
+    left: 1rem;
+    right: auto;
+    align-items: flex-start;
+  }
+
+  &[data-position='top-right'] {
+    top: 1rem;
+    right: 1rem;
+    left: auto;
+    align-items: flex-end;
+  }
+
+  &[data-position='bottom'] {
+    bottom: 2rem;
+    top: auto;
+  }
+
+  &[data-position='bottom-left'] {
+    bottom: 2rem;
+    left: 2rem;
+    right: auto;
+    top: auto;
+  }
+
+  &[data-position='bottom-right'] {
+    bottom: 2rem;
+    right: 2rem;
+    left: auto;
+    top: auto;
+  }
+}
+
+.Toast {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  box-sizing: border-box;
+  background: var(--color-gray-50);
+  color: var(--color-gray-900);
+  border: 1px solid var(--color-gray-200);
+  padding: 1rem;
+  width: 300px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  transition:
+    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.5s;
+  user-select: none;
+  z-index: calc(2147483647 - var(--toast-index));
+
+  --gap: 10px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    left: 0;
+    height: calc(var(--gap) + 1px);
+  }
+
+  &[data-position^='top'] {
+    transform: translate(
+        var(--toast-swipe-move-x),
+        calc(var(--toast-swipe-move-y) + calc(var(--toast-index) * 20%))
+      )
+      scale(calc(1 - (var(--toast-index) * 0.1)));
+
+    &::after {
+      top: 100%;
+    }
+
+    &[data-expanded] {
+      transform: translate(
+        var(--toast-swipe-move-x),
+        calc(
+          calc(var(--toast-offset) + calc(var(--toast-index) * var(--gap))) +
+            var(--toast-swipe-move-y)
+        )
+      );
+    }
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translateY(-150%);
+    }
+
+    &[data-ending-style] {
+      &[data-swipe-direction='up'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) - 100%));
+      }
+
+      &[data-swipe-direction='left'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) - 100%));
+      }
+
+      &[data-swipe-direction='right'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) + 100%));
+      }
+
+      &[data-swipe-direction='down'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) + 100%));
+      }
+    }
+  }
+
+  &[data-position^='bottom'] {
+    transform: translate(
+        var(--toast-swipe-move-x),
+        calc(var(--toast-swipe-move-y) + calc(var(--toast-index) * -20%))
+      )
+      scale(calc(1 - (var(--toast-index) * 0.1)));
+    bottom: 0;
+
+    &::after {
+      top: 100%;
+    }
+
+    &[data-expanded] {
+      transform: translate(
+        var(--toast-swipe-move-x),
+        calc(
+          calc(var(--toast-offset) * -1 + calc(var(--toast-index) * var(--gap) * -1)) +
+            var(--toast-swipe-move-y)
+        )
+      );
+    }
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translateY(150%);
+    }
+
+    &[data-ending-style] {
+      &[data-swipe-direction='up'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) - 100%));
+      }
+
+      &[data-swipe-direction='left'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) - 100%));
+      }
+
+      &[data-swipe-direction='right'] {
+        transform: translateX(calc(var(--toast-swipe-move-x) + 100%));
+      }
+
+      &[data-swipe-direction='down'] {
+        transform: translateY(calc(var(--toast-swipe-move-y) + 100%));
+      }
+    }
+  }
+
+  &[data-position$='left'] {
+    right: auto;
+    margin-left: 0;
+  }
+
+  &[data-position$='right'] {
+    left: auto;
+    margin-right: 0;
+  }
+
+  &[data-ending-style] {
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+}
+
+.Title {
+  font-weight: 500;
+  font-size: 0.975rem;
+  line-height: 1.25rem;
+}
+
+.Description {
+  font-size: 0.925rem;
+  line-height: 1.25rem;
+  color: var(--color-gray-700);
+}
+
+.Actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.UndoButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  border-radius: 0.25rem;
+  background-color: var(--color-gray-900);
+  color: var(--color-gray-50);
+  border: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  border: none;
+  background: transparent;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-gray-500);
+  border-radius: 0.25rem;
+
+  &:hover {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-700);
+  }
+}
+
+.Icon {
+  width: 1rem;
+  height: 1rem;
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/undo/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/toast/demos/undo/css-modules/index.tsx
new file mode 100644
index 0000000000..c6396cb1e6
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/undo/css-modules/index.tsx
@@ -0,0 +1,97 @@
+'use client';
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import styles from './index.module.css';
+
+export default function UndoToastExample() {
+  return (
+    <Toast.Provider>
+      <SaveForm />
+      <Toast.Viewport className={styles.Viewport} data-position="top">
+        <ToastList />
+      </Toast.Viewport>
+    </Toast.Provider>
+  );
+}
+
+function SaveForm() {
+  const toast = Toast.useToast();
+
+  function action() {
+    const id = toast.add({
+      title: 'Action performed',
+      description: 'You can undo this action.',
+      type: 'success',
+      actionProps: {
+        children: 'Undo',
+        onClick() {
+          toast.remove(id);
+          toast.add({
+            title: 'Action undone',
+          });
+        },
+      },
+    });
+  }
+
+  return (
+    <button type="button" onClick={action} className={styles.Button}>
+      Perform action
+    </button>
+  );
+}
+
+function ToastList() {
+  const { toasts } = Toast.useToast();
+
+  return toasts.map((toast) => (
+    <Toast.Root
+      key={toast.id}
+      toast={toast}
+      className={styles.Toast}
+      data-position="top"
+      swipeDirection="up"
+    >
+      {toast.title && (
+        <Toast.Title className={styles.Title}>{toast.title}</Toast.Title>
+      )}
+      {toast.description && (
+        <Toast.Description className={styles.Description}>
+          {toast.description}
+        </Toast.Description>
+      )}
+      {toast.actionProps && (
+        <div className={styles.Actions}>
+          <button
+            {...toast.actionProps}
+            type="button"
+            className={styles.UndoButton}
+          />
+        </div>
+      )}
+      <Toast.Close className={styles.Close} aria-label="Close">
+        <XIcon className={styles.Icon} />
+      </Toast.Close>
+    </Toast.Root>
+  ));
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/undo/index.ts b/docs/src/app/(public)/(content)/react/components/toast/demos/undo/index.ts
new file mode 100644
index 0000000000..94264ab85d
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/undo/index.ts
@@ -0,0 +1,2 @@
+'use client';
+export { default as CssModules } from './css-modules';
diff --git a/docs/src/app/(public)/(content)/react/components/toast/page.mdx b/docs/src/app/(public)/(content)/react/components/toast/page.mdx
new file mode 100644
index 0000000000..3b4a9ca396
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toast/page.mdx
@@ -0,0 +1,250 @@
+# Toast
+
+<Subtitle>Generates toast notifications.</Subtitle>
+
+<Meta
+  name="description"
+  content="A high-quality, unstyled React toast component to generate notifications."
+/>
+
+<Demo path="./demos/hero" />
+
+## Usage
+
+- `<Toast.Provider>` can be wrapped around your entire app, ensuring all toasts are rendered in the same viewport.
+- `<Toast.Viewport>` is positioned with your own CSS. The example above specifies `data-position` attributes for the CSS to adjust the position of the viewport container—the available positions in the example are `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, and `bottom-right`, but you're free to change the CSS as needed.
+- <kbd>F6</kbd> lets users jump into the toast viewport landmark region to navigate toasts with
+  their keyboard.
+
+## API reference
+
+Import the component and assemble its parts:
+
+```jsx title="Anatomy"
+import { Toast } from '@base-ui-components/react/toast';
+
+<Toast.Provider>
+  <Toast.Viewport>
+    <Toast.Root>
+      <Toast.Title />
+      <Toast.Description />
+      <Toast.Close />
+    </Toast.Root>
+  </Toast.Viewport>
+</Toast.Provider>;
+```
+
+<Reference component="Toast" parts="Provider, Viewport, Root, Title, Description, Close" />
+
+## useToast
+
+Manages toasts, called inside of a `Toast.Provider`.
+
+```tsx
+const toast = Toast.useToast();
+```
+
+### Return value
+
+<PropsReferenceTable
+  type="return"
+  data={{
+    toasts: {
+      type: 'Toast[]',
+      description: 'The array of toasts.',
+    },
+    add: {
+      type: '(options: useToast.AddOptions) => void',
+      description: 'Add a toast to the toast list.',
+    },
+    remove: {
+      type: '(toastId: string) => void',
+      description: 'Remove a toast from the toast list.',
+    },
+    update: {
+      type: '(toastId: string, options: useToast.UpdateOptions) => void',
+      description: 'Update a toast in the toast list.',
+    },
+    promise: {
+      type: '<Value>(promise: Promise<Value>, options: useToast.PromiseOptions) => void',
+      description:
+        'Create a toast that resolves with a value, with three possible states for the toast: `loading`, `success`, and `error`.',
+    },
+  }}
+/>
+
+### Method options
+
+<PropsReferenceTable
+  data={{
+    title: {
+      type: 'string',
+      description: 'The title of the toast.',
+    },
+    description: {
+      type: 'string',
+      description: 'The description of the toast.',
+    },
+    type: {
+      type: 'string',
+      description:
+        'The type of the toast. Used to conditionally style the toast or render different elements.',
+    },
+    timeout: {
+      type: 'number',
+      description: 'The amount of time (in ms) before the toast is auto dismissed.',
+    },
+    priority: {
+      type: "'low' | 'high'",
+      description: `
+        The priority of the toast.
+        - \`low\` - The toast will be announced politely.
+        - \`high\` - The toast will be announced urgently.
+      `,
+      default: "'low'",
+    },
+    onRemove: {
+      type: '() => void',
+      description: 'A callback invoked when the toast is removed.',
+    },
+    onRemoveComplete: {
+      type: '() => void',
+      description:
+        'A callback invoked when the toast is removed after any animations are complete.',
+    },
+    actionProps: {
+      type: "React.ComponentPropsWithRef<'button'>",
+      description: 'The props of the action button.',
+    },
+    data: {
+      type: 'Record<string, unknown>',
+      description: 'The data of the toast.',
+    },
+  }}
+/>
+
+### `add` method
+
+Creates a toast by adding it to the toast list.
+
+```jsx
+const toastId = toast.add({
+  title: 'Hello, world!',
+});
+```
+
+```jsx title="Usage" {2,7}
+function App() {
+  const toast = Toast.useToast();
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        toast.add({ title: 'Hello, world!' });
+      }}
+    >
+      Add toast
+    </button>
+  );
+}
+```
+
+### `update` method
+
+The `add` method returns a toast ID, which can be used to update the toast later.
+
+```jsx
+toast.update(toastId, {
+  title: 'New title',
+});
+```
+
+### `remove` method
+
+The `add` method returns a toast ID, which can be used to remove the toast from the toast list later.
+
+```jsx
+toast.remove(toastId);
+```
+
+### `promise` method
+
+Creates an asynchronous toast that resolves with a value, with three possible states for the toast: `loading`, `success`, and `error`.
+
+```tsx
+const toastId = toast.promise(
+  new Promise((resolve) => {
+    setTimeout(() => resolve('world!'), 1000);
+  }),
+  {
+    // Each are a shortcut for the title of the toast.
+    loading: 'Loading...',
+    success: (data) => `Hello ${data}`,
+    error: (err) => `Error: ${err}`,
+  },
+);
+```
+
+Each state also accepts the [method options](/react/components/toast#method-options) object to granularly control the toast for each state:
+
+```tsx
+const toastId = toast.promise(
+  new Promise((resolve) => {
+    setTimeout(() => resolve('world!'), 1000);
+  }),
+  {
+    loading: {
+      title: 'Loading...',
+      description: 'The promise is loading.',
+    },
+    success: {
+      title: 'Success',
+      description: 'The promise resolved successfully.',
+    },
+    error: {
+      title: 'Error',
+      description: 'The promise rejected.',
+      actionProps: {
+        children: 'Contact support',
+        onClick() {
+          // Redirect to support page
+        },
+      },
+    },
+  },
+);
+```
+
+## Global manager
+
+A global toast manager can be created by passing the `toastManager` prop to the `Toast.Provider`. This enables you to queue a toast from anywhere in the app (such as in functions outside the React tree) while still using the same toast renderer.
+
+The created `toastManager` object has the same properties and methods as the `Toast.useToast()` hook.
+
+```tsx
+const toastManager = Toast.createToastManager();
+```
+
+```jsx
+<Toast.Provider toastManager={toastManager}>
+```
+
+## Examples
+
+### Undo action
+
+When adding a toast, the `actionProps` option can be used to define props for an action button inside of it—this enables the ability to undo an action associated with the toast.
+
+<Demo path="./demos/undo" />
+
+### Promise
+
+An asynchronous toast can be created with three possible states for the toast's title: `loading`, `success`, and `error`. The `type` string matches these states to change the styling. Each of the states also accepts the [method options](/react/components/toast#method-options) object for more granular control.
+
+<Demo path="./demos/promise" />
+
+### Custom
+
+A toast with custom data can be created by passing any typed object interface to the `data` option. This enables you to pass any data (including functions) you need to the toast and access it in the toast's rendering logic.
+
+<Demo path="./demos/custom" />
diff --git a/docs/src/components/ReferenceTable/PropsReferenceTable.tsx b/docs/src/components/ReferenceTable/PropsReferenceTable.tsx
index 9d30687fea..9155567289 100644
--- a/docs/src/components/ReferenceTable/PropsReferenceTable.tsx
+++ b/docs/src/components/ReferenceTable/PropsReferenceTable.tsx
@@ -9,18 +9,31 @@ import { TableCode } from '../TableCode';
 
 interface PropsReferenceTableProps extends React.ComponentProps<typeof Table.Root> {
   data: Record<string, PropDef>;
+  type?: 'props' | 'return';
 }
 
-export async function PropsReferenceTable({ data, ...props }: PropsReferenceTableProps) {
+export async function PropsReferenceTable({
+  data,
+  type = 'props',
+  ...props
+}: PropsReferenceTableProps) {
   return (
     <Table.Root {...props}>
       <Table.Head>
         <Table.Row>
           <Table.ColumnHeader className="w-full xs:w-48 sm:w-56 md:w-1/3">Prop</Table.ColumnHeader>
-          <Table.ColumnHeader className="max-xs:hidden xs:w-full md:w-7/15">
+          <Table.ColumnHeader
+            className={
+              type === 'props'
+                ? 'max-xs:hidden xs:w-full md:w-7/15'
+                : 'max-xs:hidden xs:w-full md:w-full'
+            }
+          >
             Type
           </Table.ColumnHeader>
-          <Table.ColumnHeader className="max-md:hidden md:w-1/5">Default</Table.ColumnHeader>
+          {type === 'props' && (
+            <Table.ColumnHeader className="max-md:hidden md:w-1/5">Default</Table.ColumnHeader>
+          )}
           <Table.ColumnHeader className="w-10" aria-label="Description" />
         </Table.Row>
       </Table.Head>
@@ -51,9 +64,11 @@ export async function PropsReferenceTable({ data, ...props }: PropsReferenceTabl
               <Table.Cell className="max-xs:hidden">
                 <PropType />
               </Table.Cell>
-              <Table.Cell className="max-md:hidden">
-                <PropDefault />
-              </Table.Cell>
+              {type === 'props' && (
+                <Table.Cell className="max-md:hidden">
+                  <PropDefault />
+                </Table.Cell>
+              )}
               <Table.Cell>
                 <ReferenceTablePopover>
                   <PropDescription />
@@ -62,10 +77,12 @@ export async function PropsReferenceTable({ data, ...props }: PropsReferenceTabl
                       <div className="mb-1 font-bold">Type</div>
                       <PropType />
                     </div>
-                    <div className="border-t border-gray-200 pt-2">
-                      <div className="mb-1 font-bold">Default</div>
-                      <PropDefault />
-                    </div>
+                    {type === 'props' && (
+                      <div className="border-t border-gray-200 pt-2">
+                        <div className="mb-1 font-bold">Default</div>
+                        <PropDefault />
+                      </div>
+                    )}
                   </div>
                 </ReferenceTablePopover>
               </Table.Cell>
diff --git a/docs/src/nav.ts b/docs/src/nav.ts
index 32cdcf1ab0..36ad976e7b 100644
--- a/docs/src/nav.ts
+++ b/docs/src/nav.ts
@@ -132,6 +132,10 @@ export const nav = [
         label: 'Tabs',
         href: '/react/components/tabs',
       },
+      {
+        label: 'Toast',
+        href: '/react/components/toast',
+      },
       {
         label: 'Toggle',
         href: '/react/components/toggle',
diff --git a/packages/react/package.json b/packages/react/package.json
index f747bcd61b..43e8ecaa3a 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -53,6 +53,7 @@
     "./slider": "./src/slider/index.ts",
     "./switch": "./src/switch/index.ts",
     "./tabs": "./src/tabs/index.ts",
+    "./toast": "./src/toast/index.ts",
     "./toggle": "./src/toggle/index.ts",
     "./toggle-group": "./src/toggle-group/index.ts",
     "./tooltip": "./src/tooltip/index.ts",
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 8bbe3a2fa9..97605278bf 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -24,6 +24,7 @@ export * from './separator';
 export * from './slider';
 export * from './switch';
 export * from './tabs';
+export * from './toast';
 export * from './toggle';
 export * from './toggle-group';
 export * from './tooltip';
diff --git a/packages/react/src/tabs/indicator/TabsIndicator.tsx b/packages/react/src/tabs/indicator/TabsIndicator.tsx
index c3024c5bc9..38215b0189 100644
--- a/packages/react/src/tabs/indicator/TabsIndicator.tsx
+++ b/packages/react/src/tabs/indicator/TabsIndicator.tsx
@@ -10,6 +10,7 @@ import { tabsStyleHookMapping } from '../root/styleHooks';
 import { useTabsListContext } from '../list/TabsListContext';
 import { ActiveTabPosition, ActiveTabSize, useTabsIndicator } from './useTabsIndicator';
 import { script as prehydrationScript } from './prehydrationScript.min';
+import { generateId } from '../../utils/generateId';
 
 const noop = () => null;
 
@@ -28,7 +29,7 @@ const TabsIndicator = React.forwardRef<HTMLSpanElement, TabsIndicator.Props>(
 
     const { tabsListRef } = useTabsListContext();
 
-    const [instanceId] = React.useState(() => Math.random().toString(36).slice(2));
+    const [instanceId] = React.useState(() => generateId('tab'));
     const [isMounted, setIsMounted] = React.useState(false);
     const { value: activeTabValue } = useTabsRootContext();
 
diff --git a/packages/react/src/toast/close/ToastClose.test.tsx b/packages/react/src/toast/close/ToastClose.test.tsx
new file mode 100644
index 0000000000..84f75c17bf
--- /dev/null
+++ b/packages/react/src/toast/close/ToastClose.test.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import { screen } from '@mui/internal-test-utils';
+import { expect } from 'chai';
+import { createRenderer, describeConformance } from '#test-utils';
+import { List, Button } from '../utils/test-utils';
+
+describe('<Toast.Close />', () => {
+  const { render } = createRenderer();
+
+  const toast = {
+    id: 'test',
+    title: 'title',
+  };
+
+  describeConformance(<Toast.Close />, () => ({
+    refInstanceof: window.HTMLButtonElement,
+    render(node) {
+      return render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <Toast.Root toast={toast}>{node}</Toast.Root>
+          </Toast.Viewport>
+        </Toast.Provider>,
+      );
+    },
+  }));
+
+  it('closes the toast when clicked', async () => {
+    const { user } = await render(
+      <Toast.Provider>
+        <Toast.Viewport>
+          <List />
+        </Toast.Viewport>
+        <Button />
+      </Toast.Provider>,
+    );
+
+    const button = screen.getByRole('button', { name: 'add' });
+
+    await user.click(button);
+
+    expect(screen.getByTestId('title')).not.to.equal(null);
+
+    const closeButton = screen.getByRole('button', { name: 'close' });
+
+    await user.click(closeButton);
+
+    expect(screen.queryByTestId('title')).to.equal(null);
+  });
+});
diff --git a/packages/react/src/toast/close/ToastClose.tsx b/packages/react/src/toast/close/ToastClose.tsx
new file mode 100644
index 0000000000..21ea6ca159
--- /dev/null
+++ b/packages/react/src/toast/close/ToastClose.tsx
@@ -0,0 +1,85 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import type { BaseUIComponentProps } from '../../utils/types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useToastRootContext } from '../root/ToastRootContext';
+import { mergeProps } from '../../merge-props';
+import { useToastContext } from '../provider/ToastProviderContext';
+import { useButton } from '../../use-button/useButton';
+
+const state = {};
+
+/**
+ * Closes the toast when clicked.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+const ToastClose = React.forwardRef(function ToastClose(
+  props: ToastClose.Props,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { render, className, disabled, ...other } = props;
+
+  const { remove } = useToastContext();
+  const { toast } = useToastRootContext();
+
+  const { getButtonProps } = useButton({
+    disabled,
+    buttonRef: forwardedRef,
+  });
+
+  const { renderElement } = useComponentRenderer({
+    render: render ?? 'button',
+    ref: forwardedRef,
+    className,
+    state,
+    extraProps: mergeProps<'button'>(
+      {
+        onClick() {
+          remove(toast.id);
+        },
+      },
+      other,
+      getButtonProps,
+    ),
+  });
+
+  return renderElement();
+});
+
+namespace ToastClose {
+  export interface State {}
+
+  export interface Props extends BaseUIComponentProps<'button', State> {}
+}
+
+ToastClose.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { ToastClose };
diff --git a/packages/react/src/toast/createToastManager.test.tsx b/packages/react/src/toast/createToastManager.test.tsx
new file mode 100644
index 0000000000..141f009c96
--- /dev/null
+++ b/packages/react/src/toast/createToastManager.test.tsx
@@ -0,0 +1,253 @@
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import { fireEvent, flushMicrotasks, screen } from '@mui/internal-test-utils';
+import { expect } from 'chai';
+import { createRenderer } from '#test-utils';
+import { List } from './utils/test-utils';
+
+describe('Manager', () => {
+  const { render, clock } = createRenderer();
+
+  clock.withFakeTimers();
+
+  describe('add', () => {
+    it('adds a toast', async () => {
+      const toastManager = Toast.createToastManager();
+
+      function add() {
+        toastManager.add({
+          title: 'title',
+        });
+      }
+
+      function AddButton() {
+        return (
+          <button type="button" onClick={add}>
+            add
+          </button>
+        );
+      }
+
+      await render(
+        <Toast.Provider toastManager={toastManager}>
+          <Toast.Viewport>
+            <List />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      expect(screen.queryByTestId('title')).to.equal(null);
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+
+      expect(screen.queryByTestId('title')).not.to.equal(null);
+
+      clock.tick(5000);
+
+      expect(screen.queryByTestId('title')).to.equal(null);
+    });
+
+    it('returns a toast id', async () => {
+      const toastManager = Toast.createToastManager();
+
+      const toastId = toastManager.add({
+        title: 'title',
+      });
+
+      expect(toastId).to.be.a('string');
+    });
+  });
+
+  describe('promise', () => {
+    it('adds a toast with the loading state that is updated with the success state', async () => {
+      const toastManager = Toast.createToastManager();
+
+      function add() {
+        toastManager.promise(
+          new Promise((resolve) => {
+            setTimeout(() => {
+              resolve('success');
+            }, 1000);
+          }),
+          {
+            loading: 'loading',
+            success: 'success',
+            error: 'error',
+          },
+        );
+      }
+
+      function AddButton() {
+        return (
+          <button type="button" onClick={add}>
+            add
+          </button>
+        );
+      }
+
+      await render(
+        <Toast.Provider toastManager={toastManager}>
+          <Toast.Viewport>
+            <List />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+      await flushMicrotasks();
+
+      expect(screen.queryByTestId('title')).to.have.text('loading');
+
+      clock.tick(1000);
+      await flushMicrotasks();
+
+      expect(screen.queryByTestId('title')).to.have.text('success');
+    });
+
+    it('adds a toast with the loading state that is updated with the error state', async () => {
+      const toastManager = Toast.createToastManager();
+
+      function promise() {
+        toastManager
+          .promise(
+            new Promise((res, rej) => {
+              rej(new Error('error'));
+            }),
+            {
+              loading: 'loading',
+              success: 'success',
+              error: 'error',
+            },
+          )
+          .catch(() => {
+            // Swallow the error
+          });
+      }
+
+      function AddButton() {
+        return (
+          <button type="button" onClick={promise}>
+            add
+          </button>
+        );
+      }
+
+      await render(
+        <Toast.Provider toastManager={toastManager}>
+          <Toast.Viewport>
+            <List />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+      await flushMicrotasks();
+
+      expect(screen.getByTestId('title')).to.have.text('error');
+    });
+  });
+
+  describe('update', () => {
+    it('updates a toast', async () => {
+      const toastManager = Toast.createToastManager();
+
+      let toastId: string;
+
+      function add() {
+        toastId = toastManager.add({
+          title: 'title',
+        });
+      }
+
+      function update() {
+        toastManager.update(toastId, {
+          title: 'updated',
+        });
+      }
+
+      function Buttons() {
+        return (
+          <React.Fragment>
+            <button type="button" onClick={add}>
+              add
+            </button>
+            <button type="button" onClick={update}>
+              update
+            </button>
+          </React.Fragment>
+        );
+      }
+
+      await render(
+        <Toast.Provider toastManager={toastManager}>
+          <Toast.Viewport>
+            <List />
+          </Toast.Viewport>
+          <Buttons />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+
+      const updateButton = screen.getByRole('button', { name: 'update' });
+      fireEvent.click(updateButton);
+
+      expect(screen.getByTestId('title')).to.have.text('updated');
+    });
+  });
+
+  describe('remove', () => {
+    it('removes a toast', async () => {
+      const toastManager = Toast.createToastManager();
+
+      let toastId: string;
+
+      function add() {
+        toastId = toastManager.add({
+          title: 'title',
+        });
+      }
+
+      function remove() {
+        toastManager.remove(toastId);
+      }
+
+      function Buttons() {
+        return (
+          <React.Fragment>
+            <button type="button" onClick={add}>
+              add
+            </button>
+            <button type="button" onClick={remove}>
+              remove
+            </button>
+          </React.Fragment>
+        );
+      }
+
+      await render(
+        <Toast.Provider toastManager={toastManager}>
+          <Toast.Viewport>
+            <List />
+          </Toast.Viewport>
+          <Buttons />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+
+      const removeButton = screen.getByRole('button', { name: 'remove' });
+      fireEvent.click(removeButton);
+
+      expect(screen.queryByTestId('title')).to.equal(null);
+    });
+  });
+});
diff --git a/packages/react/src/toast/createToastManager.ts b/packages/react/src/toast/createToastManager.ts
new file mode 100644
index 0000000000..4a4079de35
--- /dev/null
+++ b/packages/react/src/toast/createToastManager.ts
@@ -0,0 +1,98 @@
+import { generateId } from '../utils/generateId';
+import { useToast } from './useToast';
+
+export interface ToastManagerEvent {
+  action: 'add' | 'remove' | 'update' | 'promise';
+  options: any;
+}
+
+/**
+ * Creates a new toast manager.
+ */
+export function createToastManager(): createToastManager.ToastManager {
+  const listeners: ((data: ToastManagerEvent) => void)[] = [];
+
+  function emit(data: ToastManagerEvent) {
+    listeners.forEach((listener) => listener(data));
+  }
+
+  return {
+    // This should be private aside from ToastProvider needing to access it.
+    // https://x.com/drosenwasser/status/1816947740032872664
+    ' subscribe': function subscribe(listener: (data: ToastManagerEvent) => void) {
+      listeners.push(listener);
+      return () => {
+        const index = listeners.indexOf(listener);
+        if (index !== -1) {
+          listeners.splice(index, 1);
+        }
+      };
+    },
+
+    add<Data extends object>(options: useToast.AddOptions<Data>): string {
+      const id = options.id || generateId('toast');
+      const toastToAdd = {
+        ...options,
+        id,
+        animation: 'starting' as const,
+      };
+
+      emit({
+        action: 'add',
+        options: toastToAdd,
+      });
+
+      return id;
+    },
+
+    remove(id: string): void {
+      emit({
+        action: 'remove',
+        options: { id },
+      });
+    },
+
+    update<Data extends object>(id: string, updates: useToast.UpdateOptions<Data>): void {
+      emit({
+        action: 'update',
+        options: {
+          ...updates,
+          id,
+        },
+      });
+    },
+
+    promise<Value, Data extends object>(
+      promiseValue: Promise<Value>,
+      options: useToast.PromiseOptions<Value, Data>,
+    ): Promise<Value> {
+      let handledPromise = promiseValue;
+
+      emit({
+        action: 'promise',
+        options: {
+          ...options,
+          promise: promiseValue,
+          setPromise(promise: Promise<Value>) {
+            handledPromise = promise;
+          },
+        },
+      });
+
+      return handledPromise;
+    },
+  };
+}
+
+export namespace createToastManager {
+  export interface ToastManager {
+    ' subscribe': (listener: (data: ToastManagerEvent) => void) => () => void;
+    add: <Data extends object>(options: useToast.AddOptions<Data>) => string;
+    remove: (id: string) => void;
+    update: <Data extends object>(id: string, updates: useToast.UpdateOptions<Data>) => void;
+    promise: <Value, Data extends object>(
+      promiseValue: Promise<Value>,
+      options: useToast.PromiseOptions<Value, Data>,
+    ) => Promise<Value>;
+  }
+}
diff --git a/packages/react/src/toast/description/ToastDescription.test.tsx b/packages/react/src/toast/description/ToastDescription.test.tsx
new file mode 100644
index 0000000000..603e53a816
--- /dev/null
+++ b/packages/react/src/toast/description/ToastDescription.test.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import { createRenderer, describeConformance } from '#test-utils';
+import { screen } from '@mui/internal-test-utils';
+import { expect } from 'chai';
+import { List, Button } from '../utils/test-utils';
+
+const toast = {
+  id: 'test',
+  title: 'Toast title',
+};
+
+describe('<Toast.Description />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Toast.Description />, () => ({
+    refInstanceof: window.HTMLParagraphElement,
+    render(node) {
+      return render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <Toast.Root toast={toast}>{node}</Toast.Root>
+          </Toast.Viewport>
+        </Toast.Provider>,
+      );
+    },
+  }));
+
+  it('adds aria-describedby to the root element', async () => {
+    const { user } = await render(
+      <Toast.Provider>
+        <Toast.Viewport>
+          <List />
+        </Toast.Viewport>
+        <Button />
+      </Toast.Provider>,
+    );
+
+    const button = screen.getByRole('button', { name: 'add' });
+    await user.click(button);
+
+    const descriptionElement = screen.getByTestId('description');
+    const descriptionId = descriptionElement.id;
+
+    const rootElement = screen.getByTestId('root');
+    expect(rootElement).to.not.equal(null);
+    expect(rootElement.getAttribute('aria-describedby')).to.equal(descriptionId);
+  });
+});
diff --git a/packages/react/src/toast/description/ToastDescription.tsx b/packages/react/src/toast/description/ToastDescription.tsx
new file mode 100644
index 0000000000..9aca546fe5
--- /dev/null
+++ b/packages/react/src/toast/description/ToastDescription.tsx
@@ -0,0 +1,82 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import type { BaseUIComponentProps } from '../../utils/types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useToastRootContext } from '../root/ToastRootContext';
+import { useId } from '../../utils/useId';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+
+const state = {};
+
+/**
+ * A description that describes the toast.
+ * Renders a `<p>` element.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+const ToastDescription = React.forwardRef(function ToastDescription(
+  props: ToastDescription.Props,
+  forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
+) {
+  const { render, className, id: idProp, ...other } = props;
+
+  const id = useId(idProp);
+
+  const { setDescriptionId } = useToastRootContext();
+
+  useEnhancedEffect(() => {
+    setDescriptionId(id);
+    return () => {
+      setDescriptionId(undefined);
+    };
+  }, [id, setDescriptionId]);
+
+  const { renderElement } = useComponentRenderer({
+    render: render ?? 'p',
+    ref: forwardedRef,
+    className,
+    state,
+    extraProps: {
+      id,
+      ...other,
+    },
+  });
+
+  return renderElement();
+});
+
+namespace ToastDescription {
+  export interface State {}
+
+  export interface Props extends BaseUIComponentProps<'p', State> {}
+}
+
+ToastDescription.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { ToastDescription };
diff --git a/packages/react/src/toast/index.parts.ts b/packages/react/src/toast/index.parts.ts
new file mode 100644
index 0000000000..c1a573a092
--- /dev/null
+++ b/packages/react/src/toast/index.parts.ts
@@ -0,0 +1,8 @@
+export { ToastProvider as Provider } from './provider/ToastProvider';
+export { ToastViewport as Viewport } from './viewport/ToastViewport';
+export { ToastRoot as Root } from './root/ToastRoot';
+export { ToastDescription as Description } from './description/ToastDescription';
+export { ToastTitle as Title } from './title/ToastTitle';
+export { ToastClose as Close } from './close/ToastClose';
+export { useToast } from './useToast';
+export { createToastManager } from './createToastManager';
diff --git a/packages/react/src/toast/index.ts b/packages/react/src/toast/index.ts
new file mode 100644
index 0000000000..e294d115c2
--- /dev/null
+++ b/packages/react/src/toast/index.ts
@@ -0,0 +1 @@
+export * as Toast from './index.parts';
diff --git a/packages/react/src/toast/provider/ToastProvider.tsx b/packages/react/src/toast/provider/ToastProvider.tsx
new file mode 100644
index 0000000000..01b882c26d
--- /dev/null
+++ b/packages/react/src/toast/provider/ToastProvider.tsx
@@ -0,0 +1,373 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { activeElement, contains } from '@floating-ui/react/utils';
+import { ToastContext } from './ToastProviderContext';
+import { generateId } from '../../utils/generateId';
+import { resolvePromiseOptions } from '../utils/resolvePromiseOptions';
+import { useEventCallback } from '../../utils/useEventCallback';
+import { useToast, type Toast } from '../useToast';
+import { useLatestRef } from '../../utils/useLatestRef';
+import { ownerDocument } from '../../utils/owner';
+import { isFocusVisible } from '../utils/focusVisible';
+import { createToastManager } from '../createToastManager';
+
+interface TimerInfo {
+  timeoutId?: ReturnType<typeof setTimeout>;
+  start: number;
+  delay: number;
+  remaining: number;
+  callback: () => void;
+}
+
+/**
+ * Provides a context for creating and managing toasts.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+const ToastProvider: React.FC<ToastProvider.Props> = function ToastProvider(props) {
+  const { children, timeout = 5000, limit = 3, toastManager } = props;
+
+  const [toasts, setToasts] = React.useState<Toast<any>[]>([]);
+  const [hovering, setHovering] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const [prevFocusElement, setPrevFocusElement] = React.useState<HTMLElement | null>(null);
+
+  if (toasts.length === 0) {
+    if (hovering) {
+      setHovering(false);
+    }
+
+    if (focused) {
+      setFocused(false);
+    }
+  }
+
+  const timersRef = React.useRef(new Map<string, TimerInfo>());
+  const viewportRef = React.useRef<HTMLElement | null>(null);
+  const windowFocusedRef = React.useRef(true);
+
+  const hoveringRef = useLatestRef(hovering);
+  const focusedRef = useLatestRef(focused);
+
+  const handleFocusManagement = useEventCallback((toastId: string) => {
+    const activeEl = activeElement(ownerDocument(viewportRef.current));
+    if (
+      !viewportRef.current ||
+      !contains(viewportRef.current, activeEl) ||
+      !isFocusVisible(activeEl)
+    ) {
+      return;
+    }
+
+    const toastElements = toasts
+      .filter((toast) => toast.animation !== 'ending')
+      .map((toast) => toast.ref?.current);
+    const currentIndex = toasts.findIndex((toast) => toast.id === toastId);
+    const nextToast = toastElements[currentIndex + 1] || toastElements[currentIndex - 1];
+
+    if (nextToast) {
+      nextToast.focus();
+    } else {
+      prevFocusElement?.focus({ preventScroll: true });
+    }
+  });
+
+  const pauseTimers = useEventCallback(() => {
+    timersRef.current.forEach((timer) => {
+      if (timer.timeoutId) {
+        clearTimeout(timer.timeoutId);
+        const elapsed = Date.now() - timer.start;
+        const remaining = timer.delay - elapsed;
+        timer.remaining = remaining > 0 ? remaining : 0;
+      }
+    });
+  });
+
+  const resumeTimers = useEventCallback(() => {
+    timersRef.current.forEach((timer, id) => {
+      timer.remaining = timer.remaining > 0 ? timer.remaining : timer.delay;
+      timer.timeoutId = setTimeout(() => {
+        timersRef.current.delete(id);
+        timer.callback();
+      }, timer.remaining);
+      timer.start = Date.now();
+    });
+  });
+
+  const remove = useEventCallback((toastId: string) => {
+    setToasts((prev) =>
+      prev.map((toast) =>
+        toast.id === toastId ? { ...toast, animation: 'ending' as const, height: 0 } : toast,
+      ),
+    );
+
+    const timer = timersRef.current.get(toastId);
+    if (timer && timer.timeoutId) {
+      clearTimeout(timer.timeoutId);
+      timersRef.current.delete(toastId);
+    }
+
+    const toast = toasts.find((t) => t.id === toastId);
+    toast?.onRemove?.();
+
+    handleFocusManagement(toastId);
+  });
+
+  const finalizeRemove = useEventCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    const toast = toasts.find((t) => t.id === id);
+    toast?.onRemoveComplete?.();
+  });
+
+  const scheduleTimer = useEventCallback((id: string, delay: number, callback: () => void) => {
+    const start = Date.now();
+
+    // Only set up an active timer if the window is focused and not hovering/focused on toasts
+    const shouldStartActive =
+      windowFocusedRef.current && !hoveringRef.current && !focusedRef.current;
+
+    const timeoutId = shouldStartActive
+      ? setTimeout(() => {
+          timersRef.current.delete(id);
+          callback();
+        }, delay)
+      : undefined;
+
+    timersRef.current.set(id, {
+      timeoutId,
+      start: shouldStartActive ? start : 0,
+      delay,
+      remaining: delay,
+      callback,
+    });
+  });
+
+  const add = useEventCallback(<Data extends object>(toast: useToast.AddOptions<Data>): string => {
+    const id = toast.id || generateId('toast');
+    const toastToAdd = {
+      ...toast,
+      id,
+      animation: 'starting' as const,
+    };
+
+    setToasts((prev) => {
+      const updatedToasts = [toastToAdd, ...prev];
+      const activeToasts = updatedToasts.filter((t) => t.animation !== 'ending');
+
+      // Mark oldest toasts for removal when over limit
+      if (activeToasts.length > limit) {
+        const excessCount = activeToasts.length - limit;
+        const oldestActiveToasts = activeToasts.slice(-excessCount);
+
+        oldestActiveToasts.forEach((t) => {
+          const timer = timersRef.current.get(t.id);
+          if (timer && timer.timeoutId) {
+            clearTimeout(timer.timeoutId);
+          }
+        });
+
+        return updatedToasts.map((t) =>
+          oldestActiveToasts.some((old) => old.id === t.id)
+            ? { ...t, animation: 'ending' as const }
+            : t,
+        );
+      }
+
+      return updatedToasts;
+    });
+
+    const duration = toastToAdd.timeout ?? timeout;
+    if (toastToAdd.type !== 'loading' && duration > 0) {
+      scheduleTimer(id, duration, () => remove(id));
+    }
+
+    // Wait for focus to potentially leave the viewport due to
+    // a removal occurring at the same time
+    setTimeout(() => {
+      if (hoveringRef.current || focusedRef.current || !windowFocusedRef.current) {
+        pauseTimers();
+      }
+    });
+
+    return id;
+  });
+
+  const update = useEventCallback(
+    <Data extends object>(id: string, updates: useToast.UpdateOptions<Data>) => {
+      setToasts((prev) =>
+        prev.map((toast) => (toast.id === id ? { ...toast, ...updates } : toast)),
+      );
+    },
+  );
+
+  const promise = useEventCallback(
+    <Value, Data extends object>(
+      promiseValue: Promise<Value>,
+      options: useToast.PromiseOptions<Value, Data>,
+    ): Promise<Value> => {
+      // Create a loading toast (which does not auto-dismiss).
+      const loadingOptions = resolvePromiseOptions(options.loading);
+      const id = add({
+        ...loadingOptions,
+        type: 'loading',
+      });
+
+      const handledPromise = promiseValue
+        .then((result: Value) => {
+          update(id, {
+            ...resolvePromiseOptions(options.success, result),
+            type: 'success',
+          });
+
+          scheduleTimer(id, timeout, () => remove(id));
+
+          if (hoveringRef.current || focusedRef.current || !windowFocusedRef.current) {
+            pauseTimers();
+          }
+
+          return result;
+        })
+        .catch((error) => {
+          update(id, {
+            ...resolvePromiseOptions(options.error, error),
+            type: 'error',
+          });
+
+          scheduleTimer(id, timeout, () => remove(id));
+
+          if (hoveringRef.current || focusedRef.current || !windowFocusedRef.current) {
+            pauseTimers();
+          }
+
+          return Promise.reject(error);
+        });
+
+      // Private API used exclusively by `Manager` to handoff the promise
+      // back to the manager after it's handled here.
+      if ({}.hasOwnProperty.call(options, 'setPromise')) {
+        (options as any).setPromise(handledPromise);
+      }
+
+      return handledPromise;
+    },
+  );
+
+  React.useEffect(() => {
+    if (!toastManager) {
+      return undefined;
+    }
+
+    const unsubscribe = toastManager[' subscribe'](({ action, options }) => {
+      const id = options.id;
+
+      if (action === 'promise' && options.promise) {
+        promise(options.promise, options);
+      } else if (action === 'update' && id) {
+        update(id, options);
+      } else if (action === 'remove' && id) {
+        remove(id);
+      } else {
+        add(options);
+      }
+    });
+
+    return unsubscribe;
+  }, [add, update, remove, scheduleTimer, timeout, toastManager, promise]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      toasts,
+      setToasts,
+      hovering,
+      setHovering,
+      focused,
+      setFocused,
+      add,
+      remove,
+      finalizeRemove,
+      update,
+      promise,
+      pauseTimers,
+      resumeTimers,
+      prevFocusElement,
+      setPrevFocusElement,
+      viewportRef,
+      scheduleTimer,
+      windowFocusedRef,
+    }),
+    [
+      toasts,
+      hovering,
+      focused,
+      add,
+      remove,
+      finalizeRemove,
+      update,
+      promise,
+      pauseTimers,
+      resumeTimers,
+      prevFocusElement,
+      scheduleTimer,
+    ],
+  ) as ToastContext<any>;
+
+  return <ToastContext.Provider value={contextValue}>{children}</ToastContext.Provider>;
+};
+
+namespace ToastProvider {
+  export interface Props {
+    children?: React.ReactNode;
+    /**
+     * The default amount of time (in ms) before a toast is auto dismissed.
+     * A value of `0` will prevent the toast from being dismissed automatically.
+     * @default 5000
+     */
+    timeout?: number;
+    /**
+     * The maximum number of toasts that can be displayed at once.
+     * When the limit is reached, the oldest toast will be removed to make room for the new one.
+     * @default 3
+     */
+    limit?: number;
+    /**
+     * A global manager for toasts to use outside of a React component.
+     */
+    toastManager?: createToastManager.ToastManager;
+  }
+}
+
+ToastProvider.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * The maximum number of toasts that can be displayed at once.
+   * When the limit is reached, the oldest toast will be removed to make room for the new one.
+   * @default 3
+   */
+  limit: PropTypes.number,
+  /**
+   * The default amount of time (in ms) before a toast is auto dismissed.
+   * A value of `0` will prevent the toast from being dismissed automatically.
+   * @default 5000
+   */
+  timeout: PropTypes.number,
+  /**
+   * A global manager for toasts to use outside of a React component.
+   */
+  toastManager: PropTypes.shape({
+    ' subscribe': PropTypes.func.isRequired,
+    add: PropTypes.func.isRequired,
+    promise: PropTypes.func.isRequired,
+    remove: PropTypes.func.isRequired,
+    update: PropTypes.func.isRequired,
+  }),
+} as any;
+
+export { ToastProvider };
diff --git a/packages/react/src/toast/provider/ToastProviderContext.ts b/packages/react/src/toast/provider/ToastProviderContext.ts
new file mode 100644
index 0000000000..833407afc5
--- /dev/null
+++ b/packages/react/src/toast/provider/ToastProviderContext.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { ToastContextValue } from '../useToast';
+
+export type ToastContext<Data extends object> = ToastContextValue<Data>;
+
+export const ToastContext = React.createContext<ToastContext<any> | undefined>(undefined);
+
+export function useToastContext() {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error('Base UI: useToast must be used within <Toast.Provider>.');
+  }
+  return context;
+}
diff --git a/packages/react/src/toast/root/ToastRoot.test.tsx b/packages/react/src/toast/root/ToastRoot.test.tsx
new file mode 100644
index 0000000000..40913f79b9
--- /dev/null
+++ b/packages/react/src/toast/root/ToastRoot.test.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import { act, screen, fireEvent, waitFor } from '@mui/internal-test-utils';
+import { expect } from 'chai';
+import { createRenderer, describeConformance, isJSDOM } from '#test-utils';
+import { List, Button } from '../utils/test-utils';
+
+const toast = {
+  id: 'test',
+  title: 'Toast title',
+};
+
+describe('<Toast.Root />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Toast.Root toast={toast} />, () => ({
+    refInstanceof: window.HTMLDivElement,
+    render(node) {
+      return render(
+        <Toast.Provider>
+          <Toast.Viewport>{node}</Toast.Viewport>
+        </Toast.Provider>,
+      );
+    },
+  }));
+
+  // requires :focus-visible check
+  it.skipIf(isJSDOM)('closes when pressing escape', async () => {
+    const { user } = await render(
+      <Toast.Provider>
+        <Toast.Viewport>
+          <List />
+        </Toast.Viewport>
+        <Button />
+      </Toast.Provider>,
+    );
+
+    const button = screen.getByRole('button', { name: 'add' });
+
+    await act(async () => button.focus());
+    await user.click(button);
+
+    await user.keyboard('{F6}');
+    await user.keyboard('{Tab}');
+    await user.keyboard('{Escape}');
+
+    expect(screen.queryByTestId('root')).to.equal(null);
+  });
+
+  it('renders title and description inside role=status node one tick later', async () => {
+    function AccessibilityTestButton() {
+      const { add } = Toast.useToast();
+      return (
+        <button
+          type="button"
+          onClick={() => {
+            add({
+              title: 'title',
+              description: 'description',
+            });
+          }}
+        >
+          add
+        </button>
+      );
+    }
+
+    function AccessibilityTestList() {
+      return Toast.useToast().toasts.map((toastItem) => (
+        <Toast.Root key={toastItem.id} toast={toastItem} data-testid="root">
+          <Toast.Title>{toastItem.title}</Toast.Title>
+          <Toast.Description data-testid="description">{toastItem.description}</Toast.Description>
+          <Toast.Close aria-label="close" />
+        </Toast.Root>
+      ));
+    }
+
+    await render(
+      <Toast.Provider>
+        <Toast.Viewport>
+          <AccessibilityTestList />
+        </Toast.Viewport>
+        <AccessibilityTestButton />
+      </Toast.Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'add' }));
+
+    const status = screen.getByRole('status');
+    expect(status).not.to.have.text('titledescription');
+
+    await waitFor(() => {
+      expect(status).to.have.text('titledescription');
+    });
+  });
+});
diff --git a/packages/react/src/toast/root/ToastRoot.tsx b/packages/react/src/toast/root/ToastRoot.tsx
new file mode 100644
index 0000000000..24d4735e6b
--- /dev/null
+++ b/packages/react/src/toast/root/ToastRoot.tsx
@@ -0,0 +1,625 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { activeElement, contains, getTarget } from '@floating-ui/react/utils';
+import { useToastContext } from '../provider/ToastProviderContext';
+import type { BaseUIComponentProps } from '../../utils/types';
+import type { Toast } from '../useToast';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { ToastRootContext } from './ToastRootContext';
+import { useForkRef } from '../../utils/useForkRef';
+import { mergeProps } from '../../merge-props';
+import { ToastRootCssVars } from './ToastRootCssVars';
+import { transitionStatusMapping } from '../../utils/styleHookMapping';
+import type { TransitionStatus } from '../../utils/useTransitionStatus';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { useOpenChangeComplete } from '../../utils/useOpenChangeComplete';
+import { ownerDocument } from '../../utils/owner';
+import { visuallyHidden } from '../../utils/visuallyHidden';
+import { ToastRootDataAttributes } from './ToastRootDataAttributes';
+
+const SWIPE_THRESHOLD = 15;
+const OPPOSITE_DIRECTION_DAMPING_FACTOR = 0.5;
+const MIN_DRAG_THRESHOLD = 0;
+
+/**
+ * Groups all parts of an individual toast.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+const ToastRoot = React.forwardRef(function ToastRoot(
+  props: ToastRoot.Props,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const { toast, render, className, children, swipeDirection = 'up', ...other } = props;
+
+  const swipeDirections = Array.isArray(swipeDirection) ? swipeDirection : [swipeDirection];
+
+  const { toasts, hovering, focused, finalizeRemove, setToasts, remove } = useToastContext();
+
+  const [renderChildren, setRenderChildren] = React.useState(false);
+
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const mergedRef = useForkRef(rootRef, forwardedRef);
+
+  useOpenChangeComplete({
+    open: toast.animation !== 'ending',
+    ref: rootRef,
+    onComplete() {
+      if (toast.animation === 'ending') {
+        finalizeRemove(toast.id);
+      }
+    },
+  });
+
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [isRealDrag, setIsRealDrag] = React.useState(false);
+  const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
+  const [dragDismissed, setDragDismissed] = React.useState(false);
+  const [swipeState, setSwipeState] = React.useState<'start' | 'move' | 'end' | 'cancel' | null>(
+    null,
+  );
+  const [initialTransform, setInitialTransform] = React.useState({ x: 0, y: 0, scale: 1 });
+  const [titleId, setTitleId] = React.useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = React.useState<string | undefined>();
+  const [lockedDirection, setLockedDirection] = React.useState<'horizontal' | 'vertical' | null>(
+    null,
+  );
+
+  const dragStartPosRef = React.useRef({ x: 0, y: 0 });
+  const initialTransformRef = React.useRef({ x: 0, y: 0, scale: 1 });
+  const dragHistoryRef = React.useRef<Array<{ x: number; y: number; time: number }>>([]);
+
+  const domIndex = React.useMemo(() => toasts.indexOf(toast), [toast, toasts]);
+  const index = React.useMemo(
+    () => toasts.filter((t) => t.animation !== 'ending').indexOf(toast),
+    [toast, toasts],
+  );
+  // It's not possible to stack a smaller height toast onto a larger height toast, but
+  // the reverse is possible. For simplicity, we'll enforce the expanded state if the
+  // toasts aren't all the same height.
+  const hasDifferingHeights = React.useMemo(() => {
+    return toasts.some((t) => t.height !== 0 && toast.height !== 0 && t.height !== toast.height);
+  }, [toast, toasts]);
+
+  const state: ToastRoot.State = React.useMemo(
+    () => ({
+      transitionStatus: toast.animation,
+      expanded: hovering || focused || hasDifferingHeights,
+    }),
+    [toast.animation, hovering, focused, hasDifferingHeights],
+  );
+
+  useEnhancedEffect(() => {
+    if (!rootRef.current) {
+      return undefined;
+    }
+
+    function setHeights() {
+      const height = rootRef.current?.offsetHeight;
+      setToasts((prev) =>
+        prev.map((t) =>
+          t.id === toast.id
+            ? {
+                ...t,
+                ref: rootRef,
+                height,
+                animation: undefined,
+              }
+            : t,
+        ),
+      );
+    }
+
+    setHeights();
+
+    if (typeof ResizeObserver === 'function') {
+      const resizeObserver = new ResizeObserver(setHeights);
+      resizeObserver.observe(rootRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+
+    return undefined;
+  }, [toast.id, setToasts]);
+
+  // Calculate offset based on heights of previous toasts
+  const offset = React.useMemo(() => {
+    const i = toasts.findIndex((t) => t.id === toast.id);
+    return toasts.slice(0, i).reduce((acc, t) => acc + (t.height ?? 0), 0);
+  }, [toasts, toast.id]);
+
+  function getElementTransform(element: HTMLElement) {
+    const computedStyle = window.getComputedStyle(element);
+    const transform = computedStyle.transform;
+
+    let translateX = 0;
+    let translateY = 0;
+    let scale = 1;
+
+    // Parse transform matrix if it exists
+    if (transform && transform !== 'none') {
+      const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
+      if (matrix) {
+        const values = matrix[1].split(', ').map(parseFloat);
+
+        // Handle both 2D (6 values) and 3D (16 values) matrices
+        if (values.length === 6) {
+          // 2D matrix: matrix(a, b, c, d, tx, ty)
+          translateX = values[4];
+          translateY = values[5];
+          // Calculate scale from the matrix (approximate)
+          scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
+        } else if (values.length === 16) {
+          // 3D matrix: matrix3d(...)
+          translateX = values[12];
+          translateY = values[13];
+          scale = values[0]; // Simplified scale calculation
+        }
+      }
+    }
+
+    return { x: translateX, y: translateY, scale };
+  }
+
+  function applyDirectionalDamping(deltaX: number, deltaY: number) {
+    let newDeltaX = deltaX;
+    let newDeltaY = deltaY;
+
+    // If horizontal direction is not allowed, apply damping to X movements
+    if (!swipeDirections.includes('left') && !swipeDirections.includes('right')) {
+      newDeltaX =
+        deltaX > 0
+          ? deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR
+          : -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+    } else {
+      // Apply damping based on allowed directions
+      if (!swipeDirections.includes('right') && deltaX > 0) {
+        newDeltaX = deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
+      }
+      if (!swipeDirections.includes('left') && deltaX < 0) {
+        newDeltaX = -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+      }
+    }
+
+    // If vertical direction is not allowed, apply damping to Y movements
+    if (!swipeDirections.includes('up') && !swipeDirections.includes('down')) {
+      newDeltaY =
+        deltaY > 0
+          ? deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR
+          : -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+    } else {
+      // Apply damping based on allowed directions
+      if (!swipeDirections.includes('down') && deltaY > 0) {
+        newDeltaY = deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
+      }
+      if (!swipeDirections.includes('up') && deltaY < 0) {
+        newDeltaY = -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+      }
+    }
+
+    return { x: newDeltaX, y: newDeltaY };
+  }
+
+  function handlePointerDown(event: React.PointerEvent) {
+    // Only handle left clicks or touch
+    if (event.button !== 0) {
+      return;
+    }
+
+    // Check if the event target is (or is inside) an interactive element (button, a, input, etc.)
+    // If so, don't initiate dragging to allow normal click behavior
+    const target = event.target as HTMLElement;
+    const isInteractiveElement =
+      target.tagName === 'BUTTON' ||
+      target.tagName === 'A' ||
+      target.tagName === 'INPUT' ||
+      target.closest('button,a,input,[role="button"]') !== null;
+
+    if (isInteractiveElement) {
+      return;
+    }
+
+    dragStartPosRef.current = { x: event.clientX, y: event.clientY };
+
+    if (rootRef.current) {
+      const transform = getElementTransform(rootRef.current);
+      initialTransformRef.current = transform;
+      setInitialTransform(transform);
+      setDragOffset({
+        x: transform.x,
+        y: transform.y,
+      });
+    }
+
+    setIsDragging(true);
+    setIsRealDrag(false);
+    setLockedDirection(null);
+    setSwipeState('start');
+
+    if (rootRef.current) {
+      rootRef.current.setPointerCapture(event.pointerId);
+    }
+  }
+
+  function handlePointerMove(event: React.PointerEvent) {
+    if (!isDragging) {
+      return;
+    }
+
+    // Record position for velocity calculation
+    dragHistoryRef.current.push({
+      x: event.clientX,
+      y: event.clientY,
+      time: Date.now(),
+    });
+
+    if (dragHistoryRef.current.length > 5) {
+      dragHistoryRef.current.shift();
+    }
+
+    const deltaX = event.clientX - dragStartPosRef.current.x;
+    const deltaY = event.clientY - dragStartPosRef.current.y;
+
+    if (!isRealDrag) {
+      const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (movementDistance >= MIN_DRAG_THRESHOLD) {
+        setIsRealDrag(true);
+        setSwipeState('move');
+
+        if (lockedDirection === null) {
+          // Only lock a direction if multiple directions are allowed
+          const hasHorizontalDirections =
+            swipeDirections.includes('left') || swipeDirections.includes('right');
+          const hasVerticalDirections =
+            swipeDirections.includes('up') || swipeDirections.includes('down');
+
+          if (hasHorizontalDirections && hasVerticalDirections) {
+            // Determine the primary direction based on which has greater movement
+            const absX = Math.abs(deltaX);
+            const absY = Math.abs(deltaY);
+            setLockedDirection(absX > absY ? 'horizontal' : 'vertical');
+          }
+        }
+      }
+    }
+
+    // Apply damping to opposite direction movements
+    const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
+
+    let newOffsetX = initialTransformRef.current.x;
+    let newOffsetY = initialTransformRef.current.y;
+
+    // If we have a locked direction, only allow movement in that direction
+    if (lockedDirection === 'horizontal') {
+      // Only allow x movement
+      if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
+        newOffsetX += dampedDelta.x;
+      }
+    } else if (lockedDirection === 'vertical') {
+      // Only allow y movement
+      if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
+        newOffsetY += dampedDelta.y;
+      }
+    } else {
+      // No locked direction yet, allow movement based on allowed directions
+      if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
+        newOffsetX += dampedDelta.x;
+      }
+
+      if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
+        newOffsetY += dampedDelta.y;
+      }
+    }
+
+    setDragOffset({ x: newOffsetX, y: newOffsetY });
+  }
+
+  function handlePointerUp(event: React.PointerEvent) {
+    if (!isDragging) {
+      return;
+    }
+
+    setIsDragging(false);
+    setIsRealDrag(false);
+    setLockedDirection(null);
+
+    if (rootRef.current) {
+      rootRef.current.releasePointerCapture(event.pointerId);
+    }
+
+    // Check if swipe exceeds threshold in any of the allowed directions.
+    // Use the dragOffset (which respects the locked direction and damping) rather than raw event coordinates.
+    let shouldClose = false;
+
+    const deltaX = dragOffset.x - initialTransform.x;
+    const deltaY = dragOffset.y - initialTransform.y;
+
+    for (const direction of swipeDirections) {
+      switch (direction) {
+        case 'right':
+          if (deltaX > SWIPE_THRESHOLD) {
+            shouldClose = true;
+          }
+          break;
+        case 'left':
+          if (deltaX < -SWIPE_THRESHOLD) {
+            shouldClose = true;
+          }
+          break;
+        case 'down':
+          if (deltaY > SWIPE_THRESHOLD) {
+            shouldClose = true;
+          }
+          break;
+        case 'up':
+          if (deltaY < -SWIPE_THRESHOLD) {
+            shouldClose = true;
+          }
+          break;
+        default:
+          break;
+      }
+
+      if (shouldClose) {
+        break;
+      }
+    }
+
+    if (shouldClose) {
+      setDragDismissed(true);
+      setSwipeState('end');
+      remove(toast.id);
+    } else {
+      setDragOffset({
+        x: initialTransform.x,
+        y: initialTransform.y,
+      });
+      setSwipeState('cancel');
+      dragHistoryRef.current = [];
+    }
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent) {
+    if (event.key === 'Escape') {
+      if (
+        !rootRef.current ||
+        !contains(rootRef.current, activeElement(ownerDocument(rootRef.current)))
+      ) {
+        return;
+      }
+
+      remove(toast.id);
+    }
+  }
+
+  // Prevent page scrolling when dragging the toast
+  React.useEffect(() => {
+    const element = rootRef.current;
+
+    if (!element) {
+      return undefined;
+    }
+
+    function preventDefaultTouchStart(event: TouchEvent) {
+      if (contains(element, getTarget(event) as HTMLElement | null)) {
+        event.preventDefault();
+      }
+    }
+
+    element.addEventListener('touchmove', preventDefaultTouchStart, { passive: false });
+
+    return () => {
+      element.removeEventListener('touchmove', preventDefaultTouchStart);
+    };
+  }, []);
+
+  // Add the effect from ToastContent for screen reader announcements
+  React.useEffect(() => {
+    const timeout = setTimeout(
+      () => {
+        setRenderChildren(true);
+      },
+      // macOS Safari needs some time to pass after the status node has been
+      // created before changing its text content to reliably announce the toast
+      50,
+    );
+    return () => clearTimeout(timeout);
+  }, []);
+
+  function getDragStyles() {
+    if (
+      !isDragging &&
+      dragOffset.x === initialTransform.x &&
+      dragOffset.y === initialTransform.y &&
+      !dragDismissed
+    ) {
+      return {
+        [ToastRootCssVars.swipeMoveX]: '0px',
+        [ToastRootCssVars.swipeMoveY]: '0px',
+      };
+    }
+
+    const deltaX = dragOffset.x - initialTransform.x;
+    const deltaY = dragOffset.y - initialTransform.y;
+
+    // Determine primary swipe direction based on movement
+    let currentSwipeDirection: 'up' | 'down' | 'left' | 'right' | undefined;
+
+    if (Math.abs(deltaX) > Math.abs(deltaY)) {
+      currentSwipeDirection = deltaX > 0 ? 'right' : 'left';
+    } else {
+      currentSwipeDirection = deltaY > 0 ? 'down' : 'up';
+    }
+
+    // Only use a direction that's allowed
+    if (currentSwipeDirection && !swipeDirections.includes(currentSwipeDirection)) {
+      currentSwipeDirection = undefined;
+    }
+
+    return {
+      transition: isDragging ? 'none' : undefined,
+      userSelect: isDragging ? 'none' : undefined,
+      touchAction: 'none',
+      [ToastRootCssVars.swipeMoveX]: `${deltaX}px`,
+      [ToastRootCssVars.swipeMoveY]: `${deltaY}px`,
+    } as const;
+  }
+
+  function getSwipeDirection(): 'up' | 'down' | 'left' | 'right' | undefined {
+    if (!isRealDrag && !dragDismissed) {
+      return undefined;
+    }
+
+    const deltaX = dragOffset.x - initialTransform.x;
+    const deltaY = dragOffset.y - initialTransform.y;
+
+    if (Math.abs(deltaX) > Math.abs(deltaY)) {
+      return deltaX > 0 ? 'right' : 'left';
+    }
+
+    return deltaY > 0 ? 'down' : 'up';
+  }
+
+  const { renderElement } = useComponentRenderer({
+    render: render ?? 'div',
+    ref: mergedRef,
+    className,
+    state,
+    customStyleHookMapping: transitionStatusMapping,
+    extraProps: mergeProps(
+      {
+        role: toast.priority === 'high' ? 'alertdialog' : 'dialog',
+        tabIndex: 0,
+        'aria-modal': false,
+        'aria-labelledby': titleId,
+        'aria-describedby': descriptionId,
+        'data-base-ui-toast': toast.id,
+        [ToastRootDataAttributes.swipe]: swipeState,
+        [ToastRootDataAttributes.swipeDirection]: getSwipeDirection(),
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onKeyDown: handleKeyDown,
+        style: {
+          ...getDragStyles(),
+          [ToastRootCssVars.index]: toast.animation === 'ending' ? domIndex : index,
+          [ToastRootCssVars.offset]: `${offset}px`,
+        },
+        // Screen readers won't announce the text upon DOM insertion
+        // of the component. We need to wait until the next tick to render the children
+        // so that screen readers can announce the contents.
+        children: (
+          <React.Fragment>
+            {children}
+            {!focused && (
+              <div
+                style={visuallyHidden}
+                {...(toast.priority === 'high'
+                  ? { role: 'alert', 'aria-atomic': true }
+                  : { role: 'status', 'aria-live': 'polite' })}
+              >
+                {renderChildren && (
+                  <React.Fragment>
+                    <div>{toast.title}</div>
+                    <div>{toast.description}</div>
+                  </React.Fragment>
+                )}
+              </div>
+            )}
+          </React.Fragment>
+        ),
+      },
+      other,
+    ),
+  });
+
+  const contextValue = React.useMemo(
+    () => ({
+      toast,
+      rootRef,
+      titleId,
+      setTitleId,
+      descriptionId,
+      setDescriptionId,
+    }),
+    [toast, rootRef, titleId, setTitleId, descriptionId, setDescriptionId],
+  );
+
+  return (
+    <ToastRootContext.Provider value={contextValue}>{renderElement()}</ToastRootContext.Provider>
+  );
+});
+
+export namespace ToastRoot {
+  export type ToastType<Data extends object = any> = Toast<Data>;
+
+  export interface State {
+    transitionStatus: TransitionStatus;
+    expanded: boolean;
+  }
+
+  export interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * The toast to render.
+     */
+    toast: Toast<any>;
+    /**
+     * Direction(s) in which the toast can be swiped to dismiss.
+     * @default 'up'
+     */
+    swipeDirection?: 'up' | 'down' | 'left' | 'right' | ('up' | 'down' | 'left' | 'right')[];
+  }
+}
+
+ToastRoot.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * Direction(s) in which the toast can be swiped to dismiss.
+   * @default 'up'
+   */
+  swipeDirection: PropTypes.oneOfType([
+    PropTypes.oneOf(['down', 'left', 'right', 'up']),
+    PropTypes.arrayOf(PropTypes.oneOf(['down', 'left', 'right', 'up']).isRequired),
+  ]),
+  /**
+   * The toast to render.
+   */
+  toast: PropTypes.shape({
+    actionProps: PropTypes.object,
+    animation: PropTypes.oneOf(['ending', 'starting']),
+    data: PropTypes.any,
+    description: PropTypes.string,
+    height: PropTypes.number,
+    id: PropTypes.string.isRequired,
+    onRemove: PropTypes.func,
+    onRemoveComplete: PropTypes.func,
+    priority: PropTypes.oneOf(['high', 'low']),
+    timeout: PropTypes.number,
+    title: PropTypes.string,
+    type: PropTypes.string,
+  }).isRequired,
+} as any;
+
+export { ToastRoot };
diff --git a/packages/react/src/toast/root/ToastRootContext.ts b/packages/react/src/toast/root/ToastRootContext.ts
new file mode 100644
index 0000000000..060a88ce00
--- /dev/null
+++ b/packages/react/src/toast/root/ToastRootContext.ts
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { Toast } from '../useToast';
+
+export interface ToastRootContext {
+  toast: Toast<any>;
+  rootRef: React.RefObject<HTMLElement | null>;
+  titleId: string | undefined;
+  setTitleId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  descriptionId: string | undefined;
+  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+
+export const ToastRootContext = React.createContext<ToastRootContext | undefined>(undefined);
+
+export function useToastRootContext(): ToastRootContext {
+  const context = React.useContext(ToastRootContext);
+  if (!context) {
+    throw new Error('useToastRoot must be used within a ToastRoot');
+  }
+  return context as ToastRootContext;
+}
diff --git a/packages/react/src/toast/root/ToastRootCssVars.ts b/packages/react/src/toast/root/ToastRootCssVars.ts
new file mode 100644
index 0000000000..d2a59ab49d
--- /dev/null
+++ b/packages/react/src/toast/root/ToastRootCssVars.ts
@@ -0,0 +1,27 @@
+export enum ToastRootCssVars {
+  /**
+   * Indicates the index of the toast in the list.
+   * @type {number}
+   */
+  index = '--toast-index',
+  /**
+   * Indicates the offset of the toast in the list.
+   * @type {number}
+   */
+  offset = '--toast-offset',
+  /**
+   * Indicates the direction the toast is swiped.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  swipeDirection = '--toast-swipe-direction',
+  /**
+   * Indicates the horizontal swipe movement of the toast.
+   * @type {number}
+   */
+  swipeMoveX = '--toast-swipe-move-x',
+  /**
+   * Indicates the vertical swipe movement of the toast.
+   * @type {number}
+   */
+  swipeMoveY = '--toast-swipe-move-y',
+}
diff --git a/packages/react/src/toast/root/ToastRootDataAttributes.ts b/packages/react/src/toast/root/ToastRootDataAttributes.ts
new file mode 100644
index 0000000000..0c56f7f55e
--- /dev/null
+++ b/packages/react/src/toast/root/ToastRootDataAttributes.ts
@@ -0,0 +1,12 @@
+export enum ToastRootDataAttributes {
+  /**
+   * Indicates the current swipe state.
+   * @type {'start' | 'move' | 'end' | 'cancel'}
+   */
+  swipe = 'data-swipe',
+  /**
+   * Indicates the direction of the swipe.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  swipeDirection = 'data-swipe-direction',
+}
diff --git a/packages/react/src/toast/title/ToastTitle.test.tsx b/packages/react/src/toast/title/ToastTitle.test.tsx
new file mode 100644
index 0000000000..a59910988b
--- /dev/null
+++ b/packages/react/src/toast/title/ToastTitle.test.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import { createRenderer, describeConformance } from '#test-utils';
+import { screen } from '@mui/internal-test-utils';
+import { expect } from 'chai';
+import { List, Button } from '../utils/test-utils';
+
+const toast = {
+  id: 'test',
+  title: 'Toast title',
+};
+
+describe('<Toast.Title />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Toast.Title />, () => ({
+    refInstanceof: window.HTMLHeadingElement,
+    render(node) {
+      return render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <Toast.Root toast={toast}>{node}</Toast.Root>
+          </Toast.Viewport>
+        </Toast.Provider>,
+      );
+    },
+  }));
+
+  it('adds aria-labelledby to the root element', async () => {
+    const { user } = await render(
+      <Toast.Provider>
+        <Toast.Viewport>
+          <List />
+        </Toast.Viewport>
+        <Button />
+      </Toast.Provider>,
+    );
+
+    const button = screen.getByRole('button', { name: 'add' });
+    await user.click(button);
+
+    const titleElement = screen.getByTestId('title');
+    const titleId = titleElement.id;
+
+    const rootElement = screen.getByTestId('root');
+    expect(rootElement).to.not.equal(null);
+    expect(rootElement.getAttribute('aria-labelledby')).to.equal(titleId);
+  });
+});
diff --git a/packages/react/src/toast/title/ToastTitle.tsx b/packages/react/src/toast/title/ToastTitle.tsx
new file mode 100644
index 0000000000..cb82b9c062
--- /dev/null
+++ b/packages/react/src/toast/title/ToastTitle.tsx
@@ -0,0 +1,82 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import type { BaseUIComponentProps } from '../../utils/types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useToastRootContext } from '../root/ToastRootContext';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { useId } from '../../utils/useId';
+
+const state = {};
+
+/**
+ * A title that labels the toast.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+const ToastTitle = React.forwardRef(function ToastTitle(
+  props: ToastTitle.Props,
+  forwardedRef: React.ForwardedRef<HTMLHeadingElement>,
+) {
+  const { render, className, id: idProp, ...other } = props;
+
+  const id = useId(idProp);
+
+  const { setTitleId } = useToastRootContext();
+
+  useEnhancedEffect(() => {
+    setTitleId(id);
+    return () => {
+      setTitleId(undefined);
+    };
+  }, [id, setTitleId]);
+
+  const { renderElement } = useComponentRenderer({
+    render: render ?? 'h2',
+    ref: forwardedRef,
+    className,
+    state,
+    extraProps: {
+      id,
+      ...other,
+    },
+  });
+
+  return renderElement();
+});
+
+namespace ToastTitle {
+  export interface State {}
+
+  export interface Props extends BaseUIComponentProps<'h2', State> {}
+}
+
+ToastTitle.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { ToastTitle };
diff --git a/packages/react/src/toast/useToast.test.tsx b/packages/react/src/toast/useToast.test.tsx
new file mode 100644
index 0000000000..5cff4fefb9
--- /dev/null
+++ b/packages/react/src/toast/useToast.test.tsx
@@ -0,0 +1,562 @@
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import { fireEvent, flushMicrotasks, screen } from '@mui/internal-test-utils';
+import { expect } from 'chai';
+import { createRenderer } from '#test-utils';
+import { useToast } from './useToast';
+import { List } from './utils/test-utils';
+
+describe('useToast', () => {
+  describe('add', () => {
+    const { clock, render } = createRenderer();
+
+    clock.withFakeTimers();
+
+    it('adds a toast to the viewport that auto-dismisses after 5s by default', async () => {
+      function AddButton() {
+        const { add } = useToast();
+        return (
+          <button
+            onClick={() => {
+              add({
+                title: 'test',
+              });
+            }}
+          >
+            add
+          </button>
+        );
+      }
+
+      await render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <List />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+
+      expect(screen.queryByTestId('root')).not.to.equal(null);
+
+      clock.tick(5000);
+
+      expect(screen.queryByTestId('root')).to.equal(null);
+    });
+
+    describe('option: timeout', () => {
+      it('dismisses the toast after the specified timeout', async () => {
+        function AddButton() {
+          const { add } = useToast();
+          return <button onClick={() => add({ title: 'test', timeout: 1000 })}>add</button>;
+        }
+
+        await render(
+          <Toast.Provider>
+            <Toast.Viewport>
+              <List />
+            </Toast.Viewport>
+            <AddButton />
+          </Toast.Provider>,
+        );
+
+        const button = screen.getByRole('button', { name: 'add' });
+        fireEvent.click(button);
+
+        expect(screen.queryByTestId('root')).not.to.equal(null);
+
+        clock.tick(1000);
+
+        expect(screen.queryByTestId('root')).to.equal(null);
+      });
+    });
+
+    describe('option: title', () => {
+      it('renders the title', async () => {
+        function AddButton() {
+          const { add } = useToast();
+          return (
+            <button
+              onClick={() =>
+                add({
+                  title: 'title',
+                  description: 'description',
+                })
+              }
+            >
+              add
+            </button>
+          );
+        }
+
+        function CustomList() {
+          const { toasts } = useToast();
+          return toasts.map((t) => (
+            <Toast.Root key={t.id} toast={t} data-testid="root">
+              <Toast.Title data-testid="title">{t.title}</Toast.Title>
+            </Toast.Root>
+          ));
+        }
+
+        await render(
+          <Toast.Provider>
+            <Toast.Viewport>
+              <CustomList />
+            </Toast.Viewport>
+            <AddButton />
+          </Toast.Provider>,
+        );
+
+        const button = screen.getByRole('button', { name: 'add' });
+        fireEvent.click(button);
+
+        expect(screen.queryByTestId('title')).to.have.text('title');
+      });
+    });
+
+    describe('option: description', () => {
+      it('renders the description', async () => {
+        function AddButton() {
+          const { add } = useToast();
+          return (
+            <button
+              onClick={() =>
+                add({
+                  title: 'title',
+                  description: 'description',
+                })
+              }
+            >
+              add
+            </button>
+          );
+        }
+
+        function CustomList() {
+          const { toasts } = useToast();
+          return toasts.map((t) => (
+            <Toast.Root key={t.id} toast={t} data-testid="root">
+              <Toast.Description data-testid="description">{t.description}</Toast.Description>
+            </Toast.Root>
+          ));
+        }
+
+        await render(
+          <Toast.Provider>
+            <Toast.Viewport>
+              <CustomList />
+            </Toast.Viewport>
+            <AddButton />
+          </Toast.Provider>,
+        );
+
+        const button = screen.getByRole('button', { name: 'add' });
+        fireEvent.click(button);
+
+        expect(screen.queryByTestId('description')).to.have.text('description');
+      });
+    });
+
+    describe('option: type', () => {
+      it('renders the type', async () => {
+        function AddButton() {
+          const { add } = useToast();
+          return <button onClick={() => add({ title: 'test', type: 'success' })}>add</button>;
+        }
+
+        function CustomList() {
+          const { toasts } = useToast();
+          return toasts.map((t) => (
+            <Toast.Root key={t.id} toast={t} data-testid="root">
+              <Toast.Title data-testid="title">{t.title}</Toast.Title>
+              <span>{t.type}</span>
+            </Toast.Root>
+          ));
+        }
+
+        await render(
+          <Toast.Provider>
+            <Toast.Viewport>
+              <CustomList />
+            </Toast.Viewport>
+            <AddButton />
+          </Toast.Provider>,
+        );
+
+        const button = screen.getByRole('button', { name: 'add' });
+        fireEvent.click(button);
+
+        expect(screen.queryByTestId('title')).to.have.text('test');
+        expect(screen.queryByText('success')).not.to.equal(null);
+      });
+    });
+  });
+
+  describe('promise', () => {
+    const { clock, render } = createRenderer();
+
+    clock.withFakeTimers();
+
+    function CustomList() {
+      const { toasts } = useToast();
+      return toasts.map((t) => (
+        <Toast.Root key={t.id} toast={t} data-testid="root">
+          <Toast.Title data-testid="title">{t.title}</Toast.Title>
+          <Toast.Description data-testid="description">{t.description}</Toast.Description>
+          <span>{t.type}</span>
+        </Toast.Root>
+      ));
+    }
+
+    it('displays success state as title after promise resolves', async () => {
+      function AddButton() {
+        const { promise } = useToast();
+        return (
+          <button
+            onClick={() => {
+              promise(
+                new Promise((res) => {
+                  setTimeout(() => {
+                    res('success');
+                  }, 1000);
+                }),
+                {
+                  loading: 'loading',
+                  success: 'success',
+                  error: 'error',
+                },
+              );
+            }}
+          >
+            add
+          </button>
+        );
+      }
+
+      await render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <CustomList />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+
+      expect(screen.getByTestId('title')).to.have.text('loading');
+
+      clock.tick(1000);
+      await flushMicrotasks();
+
+      expect(screen.getByTestId('title')).to.have.text('success');
+    });
+
+    it('displays error state as title after promise rejects', async () => {
+      function AddButton() {
+        const { promise } = useToast();
+        return (
+          <button
+            onClick={() => {
+              promise(
+                new Promise((res, rej) => {
+                  setTimeout(() => {
+                    rej(new Error('error'));
+                  }, 1000);
+                }),
+                {
+                  loading: 'loading',
+                  success: 'success',
+                  error: 'error',
+                },
+              ).catch(() => {
+                // Explicitly catch rejection to prevent test failure
+              });
+            }}
+          >
+            add
+          </button>
+        );
+      }
+
+      await render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <CustomList />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+
+      expect(screen.getByTestId('title')).to.have.text('loading');
+
+      clock.tick(1000);
+      await flushMicrotasks();
+
+      expect(screen.getByTestId('title')).to.have.text('error');
+    });
+
+    it('passes data when success is a function', async () => {
+      function AddButton() {
+        const { promise } = useToast();
+        return (
+          <button
+            onClick={() =>
+              promise(
+                new Promise((res) => {
+                  res('test success');
+                }),
+                {
+                  loading: 'loading',
+                  success: (data) => `${data}`,
+                  error: 'error',
+                },
+              )
+            }
+          >
+            add
+          </button>
+        );
+      }
+
+      await render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <CustomList />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+
+      expect(screen.getByTestId('title')).to.have.text('loading');
+
+      clock.tick(1000);
+      await flushMicrotasks();
+
+      expect(screen.getByTestId('title')).to.have.text('test success');
+    });
+
+    it('passes data when error is a function', async () => {
+      function AddButton() {
+        const { promise } = useToast();
+        return (
+          <button
+            onClick={() =>
+              promise(
+                new Promise((res, rej) => {
+                  rej(new Error('test error'));
+                }),
+                {
+                  loading: 'loading',
+                  success: 'success',
+                  error: (error: Error) => `${error.message}`,
+                },
+              ).catch(() => {
+                // Explicitly catch rejection to prevent test failure
+              })
+            }
+          >
+            add
+          </button>
+        );
+      }
+
+      await render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <CustomList />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+
+      expect(screen.getByTestId('title')).to.have.text('loading');
+
+      clock.tick(1000);
+      await flushMicrotasks();
+
+      expect(screen.getByTestId('title')).to.have.text('test error');
+    });
+
+    it('supports custom options', async () => {
+      function AddButton() {
+        const { promise } = useToast();
+        return (
+          <button
+            onClick={() =>
+              promise(
+                new Promise((res) => {
+                  res('success');
+                }),
+                {
+                  loading: {
+                    title: 'loading title',
+                    description: 'loading description',
+                  },
+                  success: 'success',
+                  error: 'error',
+                },
+              )
+            }
+          >
+            add
+          </button>
+        );
+      }
+
+      await render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <CustomList />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+
+      expect(screen.getByTestId('title')).to.have.text('loading title');
+      expect(screen.getByTestId('description')).to.have.text('loading description');
+
+      await flushMicrotasks();
+    });
+  });
+
+  describe('update', () => {
+    const { clock, render } = createRenderer();
+
+    clock.withFakeTimers();
+
+    function CustomList() {
+      const { toasts } = useToast();
+      return toasts.map((t) => (
+        <Toast.Root key={t.id} toast={t} data-testid="root">
+          <Toast.Title data-testid="title">{t.title}</Toast.Title>
+        </Toast.Root>
+      ));
+    }
+
+    it('updates the toast', async () => {
+      function AddButton() {
+        const { add, update } = useToast();
+        const idRef = React.useRef<string | null>(null);
+        return (
+          <React.Fragment>
+            <button
+              type="button"
+              onClick={() => {
+                idRef.current = add({ title: 'test' });
+              }}
+            >
+              add
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                if (idRef.current) {
+                  update(idRef.current, { title: 'updated' });
+                }
+              }}
+            >
+              update
+            </button>
+          </React.Fragment>
+        );
+      }
+
+      await render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <CustomList />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(button);
+
+      expect(screen.getByTestId('title')).to.have.text('test');
+
+      const updateButton = screen.getByRole('button', { name: 'update' });
+      fireEvent.click(updateButton);
+
+      expect(screen.getByTestId('title')).to.have.text('updated');
+    });
+  });
+
+  describe('remove', () => {
+    const { clock, render } = createRenderer();
+
+    clock.withFakeTimers();
+
+    function CustomList() {
+      const { toasts } = useToast();
+      return toasts.map((t) => (
+        <Toast.Root key={t.id} toast={t} data-testid="root">
+          <Toast.Title data-testid="title">{t.title}</Toast.Title>
+        </Toast.Root>
+      ));
+    }
+
+    it('removes the toast', async () => {
+      function AddButton() {
+        const { add, remove } = useToast();
+        const idRef = React.useRef<string | null>(null);
+        return (
+          <React.Fragment>
+            <button
+              onClick={() => {
+                idRef.current = add({ title: 'test' });
+              }}
+            >
+              add
+            </button>
+            <button
+              onClick={() => {
+                if (idRef.current) {
+                  remove(idRef.current);
+                }
+              }}
+            >
+              remove
+            </button>
+          </React.Fragment>
+        );
+      }
+
+      await render(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <CustomList />
+          </Toast.Viewport>
+          <AddButton />
+        </Toast.Provider>,
+      );
+
+      const addButton = screen.getByRole('button', { name: 'add' });
+      fireEvent.click(addButton);
+
+      expect(screen.getByTestId('root')).not.to.equal(null);
+
+      const removeButton = screen.getByRole('button', { name: 'remove' });
+      fireEvent.click(removeButton);
+
+      expect(screen.queryByTestId('root')).to.equal(null);
+    });
+  });
+});
diff --git a/packages/react/src/toast/useToast.ts b/packages/react/src/toast/useToast.ts
new file mode 100644
index 0000000000..bf0667f595
--- /dev/null
+++ b/packages/react/src/toast/useToast.ts
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { ToastContext } from './provider/ToastProviderContext';
+
+/**
+ * Returns the array of toasts and methods to create toasts.
+ */
+export function useToast(): useToast.ReturnValue {
+  const context = React.useContext(ToastContext);
+
+  if (!context) {
+    throw new Error('Base UI: useToast must be used within <Toast.Provider>.');
+  }
+
+  const { toasts, add, remove, update, promise } = context;
+
+  return React.useMemo(
+    () => ({
+      toasts,
+      add,
+      remove,
+      update,
+      promise,
+    }),
+    [toasts, add, remove, update, promise],
+  );
+}
+
+export namespace useToast {
+  export interface ReturnValue {
+    toasts: ToastContext<any>['toasts'];
+    add: <Data extends object>(options: AddOptions<Data>) => string;
+    remove: (toastId: string) => void;
+    update: <Data extends object>(toastId: string, options: UpdateOptions<Data>) => void;
+    promise: <Value, Data extends object>(
+      promise: Promise<Value>,
+      options: PromiseOptions<Value, Data>,
+    ) => Promise<Value>;
+  }
+
+  export interface AddOptions<Data extends object>
+    extends Omit<Toast<Data>, 'id' | 'animation' | 'height' | 'ref'> {
+    id?: string;
+  }
+
+  export interface UpdateOptions<Data extends object> extends Partial<AddOptions<Data>> {}
+
+  export interface PromiseOptions<Value, Data extends object> {
+    loading: string | UpdateOptions<Data>;
+    success: string | UpdateOptions<Data> | ((result: Value) => string | UpdateOptions<Data>);
+    error: string | UpdateOptions<Data> | ((error: any) => string | UpdateOptions<Data>);
+  }
+}
+
+export interface Toast<Data extends object> {
+  /**
+   * The unique identifier for the toast.
+   */
+  id: string;
+  /**
+   * The ref for the toast.
+   */
+  ref?: React.RefObject<HTMLElement | null>;
+  /**
+   * The title of the toast.
+   */
+  title?: string;
+  /**
+   * The type of the toast. Used to conditionally style the toast,
+   * including conditionally rendering elements based on the type.
+   */
+  type?: string;
+  /**
+   * The description of the toast.
+   */
+  description?: string;
+  /**
+   * The amount of time (in ms) before the toast is auto dismissed.
+   * A value of `0` will prevent the toast from being dismissed automatically.
+   */
+  timeout?: number;
+  /**
+   * The priority of the toast.
+   * - `low` - The toast will be announced politely.
+   * - `high` - The toast will be announced urgently.
+   * @default 'low'
+   */
+  priority?: 'low' | 'high';
+  /**
+   * The animation state of the toast.
+   */
+  animation?: 'starting' | 'ending' | undefined;
+  /**
+   * The height of the toast.
+   */
+  height?: number;
+  /**
+   * Callback function to be called when the toast is removed.
+   */
+  onRemove?: () => void;
+  /**
+   * Callback function to be called when the toast is removed after any animations are complete.
+   */
+  onRemoveComplete?: () => void;
+  /**
+   * The props for the action button.
+   */
+  actionProps?: React.ComponentPropsWithoutRef<'button'>;
+  /**
+   * Custom data for the toast.
+   */
+  data?: Data;
+}
+
+export interface ToastContextValue<Data extends object> {
+  toasts: Toast<Data>[];
+  setToasts: React.Dispatch<React.SetStateAction<Toast<Data>[]>>;
+  hovering: boolean;
+  setHovering: React.Dispatch<React.SetStateAction<boolean>>;
+  focused: boolean;
+  setFocused: React.Dispatch<React.SetStateAction<boolean>>;
+  add: (options: useToast.AddOptions<Data>) => string;
+  update: (id: string, options: useToast.UpdateOptions<Data>) => void;
+  promise: <Value>(
+    value: Promise<Value>,
+    options: useToast.PromiseOptions<Value, Data>,
+  ) => Promise<Value>;
+  remove: (id: string) => void;
+  pauseTimers: () => void;
+  resumeTimers: () => void;
+  finalizeRemove: (id: string) => void;
+  prevFocusElement: HTMLElement | null;
+  setPrevFocusElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+  viewportRef: React.RefObject<HTMLElement | null>;
+  windowFocusedRef: React.RefObject<boolean>;
+  scheduleTimer: (id: string, delay: number, callback: () => void) => void;
+}
diff --git a/packages/react/src/toast/utils/focusVisible.ts b/packages/react/src/toast/utils/focusVisible.ts
new file mode 100644
index 0000000000..b97f637fdd
--- /dev/null
+++ b/packages/react/src/toast/utils/focusVisible.ts
@@ -0,0 +1,9 @@
+export function isFocusVisible(element: Element | null) {
+  let result = false;
+  try {
+    result = element?.matches(':focus-visible') ?? true;
+  } catch (error) {
+    result = true;
+  }
+  return result;
+}
diff --git a/packages/react/src/toast/utils/resolvePromiseOptions.ts b/packages/react/src/toast/utils/resolvePromiseOptions.ts
new file mode 100644
index 0000000000..ec8810d7b5
--- /dev/null
+++ b/packages/react/src/toast/utils/resolvePromiseOptions.ts
@@ -0,0 +1,22 @@
+import { useToast } from '../useToast';
+
+export function resolvePromiseOptions<T, Data extends object>(
+  options:
+    | string
+    | useToast.UpdateOptions<Data>
+    | ((result: T) => string | useToast.UpdateOptions<Data>),
+  result?: T,
+): useToast.UpdateOptions<Data> {
+  if (typeof options === 'string') {
+    return {
+      title: options,
+    };
+  }
+
+  if (typeof options === 'function') {
+    const resolvedOptions = options(result as T);
+    return typeof resolvedOptions === 'string' ? { title: resolvedOptions } : resolvedOptions;
+  }
+
+  return options;
+}
diff --git a/packages/react/src/toast/utils/test-utils.tsx b/packages/react/src/toast/utils/test-utils.tsx
new file mode 100644
index 0000000000..86eab0b1ae
--- /dev/null
+++ b/packages/react/src/toast/utils/test-utils.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+
+export function Button() {
+  const { add } = Toast.useToast();
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        add({
+          title: 'title',
+          description: 'description',
+        });
+      }}
+    >
+      add
+    </button>
+  );
+}
+
+export function List() {
+  return Toast.useToast().toasts.map((toastItem) => (
+    <Toast.Root key={toastItem.id} toast={toastItem} data-testid="root">
+      <Toast.Title data-testid="title">{toastItem.title}</Toast.Title>
+      <Toast.Description data-testid="description">{toastItem.description}</Toast.Description>
+      <Toast.Close aria-label="close" />
+    </Toast.Root>
+  ));
+}
diff --git a/packages/react/src/toast/viewport/FocusGuard.tsx b/packages/react/src/toast/viewport/FocusGuard.tsx
new file mode 100644
index 0000000000..e9979e9799
--- /dev/null
+++ b/packages/react/src/toast/viewport/FocusGuard.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { isSafari } from '@floating-ui/react/utils';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { visuallyHidden } from '../../utils/visuallyHidden';
+
+/**
+ * @ignore - internal component.
+ */
+const FocusGuard = React.forwardRef(function FocusGuard(
+  props: React.ComponentPropsWithoutRef<'span'>,
+  ref: React.ForwardedRef<HTMLSpanElement>,
+) {
+  const [role, setRole] = React.useState<'button' | undefined>();
+
+  useEnhancedEffect(() => {
+    if (isSafari()) {
+      // Unlike other screen readers such as NVDA and JAWS, the virtual cursor
+      // on VoiceOver does trigger the onFocus event, so we can use the focus
+      // trap element. On Safari, only buttons trigger the onFocus event.
+      setRole('button');
+    }
+  }, []);
+
+  const restProps = {
+    ref,
+    tabIndex: 0,
+    // Role is only for VoiceOver
+    role,
+    'aria-hidden': role ? undefined : true,
+    style: visuallyHidden,
+  };
+
+  return <span {...props} {...restProps} />;
+});
+
+FocusGuard.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+} as any;
+
+export { FocusGuard };
diff --git a/packages/react/src/toast/viewport/ToastViewport.test.tsx b/packages/react/src/toast/viewport/ToastViewport.test.tsx
new file mode 100644
index 0000000000..104ec54481
--- /dev/null
+++ b/packages/react/src/toast/viewport/ToastViewport.test.tsx
@@ -0,0 +1,197 @@
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import { createRenderer, describeConformance } from '#test-utils';
+import { act, fireEvent, screen } from '@mui/internal-test-utils';
+import { expect } from 'chai';
+import { List, Button } from '../utils/test-utils';
+
+describe('<Toast.Viewport />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Toast.Viewport />, () => ({
+    refInstanceof: window.HTMLDivElement,
+    render(node) {
+      return render(<Toast.Provider>{node}</Toast.Provider>);
+    },
+  }));
+
+  it('gets focused when F6 is pressed', async () => {
+    const { user } = await render(
+      <Toast.Provider>
+        <Toast.Viewport data-testid="viewport">
+          <List />
+        </Toast.Viewport>
+        <Button />
+      </Toast.Provider>,
+    );
+
+    const button = screen.getByRole('button', { name: 'add' });
+
+    await user.click(button);
+    await user.keyboard('{F6}');
+
+    expect(screen.getByTestId('viewport')).toHaveFocus();
+  });
+
+  it('focuses first toast upon tab after viewport is focused', async () => {
+    const { user } = await render(
+      <Toast.Provider>
+        <Toast.Viewport>
+          <List />
+        </Toast.Viewport>
+        <Button />
+      </Toast.Provider>,
+    );
+
+    const button = screen.getByRole('button', { name: 'add' });
+
+    await user.click(button);
+    await user.keyboard('{F6}');
+    await user.keyboard('{Tab}');
+
+    expect(screen.getByTestId('root')).toHaveFocus();
+  });
+
+  it('returns focus to previous element when pressing shift+Tab on first toast', async () => {
+    const { user } = await render(
+      <Toast.Provider>
+        <Toast.Viewport>
+          <List />
+        </Toast.Viewport>
+        <Button />
+      </Toast.Provider>,
+    );
+
+    const button = screen.getByRole('button', { name: 'add' });
+
+    await user.click(button);
+    await user.keyboard('{F6}');
+    await user.keyboard('{Tab}');
+    await user.keyboard('{Shift>}{Tab}{/Shift}');
+
+    expect(button).toHaveFocus();
+  });
+
+  it('returns focus to previous element when pressing shift+Tab on last toast', async () => {
+    const { user } = await render(
+      <Toast.Provider>
+        <Toast.Viewport>
+          <List />
+        </Toast.Viewport>
+        <Button />
+      </Toast.Provider>,
+    );
+
+    const button = screen.getByRole('button', { name: 'add' });
+
+    await user.click(button);
+    await user.click(button);
+
+    await user.keyboard('{F6}');
+    await user.keyboard('{Tab}'); // first toast
+    await user.keyboard('{Tab}'); // first toast close button
+    await user.keyboard('{Tab}'); // last toast
+    await user.keyboard('{Tab}'); // last toast close button
+    await user.keyboard('{Tab}');
+
+    expect(button).toHaveFocus();
+  });
+
+  describe('timers', () => {
+    const { render: renderFakeTimers, clock } = createRenderer();
+
+    clock.withFakeTimers();
+
+    it('pauses timers when hovering', async () => {
+      await renderFakeTimers(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <List />
+          </Toast.Viewport>
+          <Button />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+
+      fireEvent.click(button);
+      fireEvent.mouseEnter(screen.getByTestId('root'));
+
+      clock.tick(5001);
+
+      expect(screen.queryByTestId('root')).not.to.equal(null);
+    });
+
+    it('resumes timers when not hovering', async () => {
+      await renderFakeTimers(
+        <Toast.Provider>
+          <Toast.Viewport>
+            <List />
+          </Toast.Viewport>
+          <Button />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+
+      fireEvent.click(button);
+      fireEvent.mouseEnter(screen.getByTestId('root'));
+
+      clock.tick(5000);
+
+      fireEvent.mouseLeave(screen.getByTestId('root'));
+
+      clock.tick(4999);
+
+      expect(screen.queryByTestId('root')).not.to.equal(null);
+
+      clock.tick(1);
+
+      expect(screen.queryByTestId('root')).to.equal(null);
+    });
+
+    it('pauses timers when the viewport is focused', async () => {
+      await renderFakeTimers(
+        <Toast.Provider>
+          <Toast.Viewport data-testid="viewport">
+            <List />
+          </Toast.Viewport>
+          <Button />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+
+      fireEvent.click(button);
+      fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'F6' });
+
+      clock.tick(5000);
+
+      expect(screen.queryByTestId('root')).not.to.equal(null);
+    });
+
+    it('resumes timers when the viewport is blurred', async () => {
+      await renderFakeTimers(
+        <Toast.Provider>
+          <Toast.Viewport data-testid="viewport">
+            <List />
+          </Toast.Viewport>
+          <Button />
+        </Toast.Provider>,
+      );
+
+      const button = screen.getByRole('button', { name: 'add' });
+
+      fireEvent.click(button);
+      fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'F6' });
+
+      clock.tick(5000);
+
+      await act(async () => button.focus());
+
+      clock.tick(5000);
+
+      expect(screen.queryByTestId('root')).to.equal(null);
+    });
+  });
+});
diff --git a/packages/react/src/toast/viewport/ToastViewport.tsx b/packages/react/src/toast/viewport/ToastViewport.tsx
new file mode 100644
index 0000000000..726eef555c
--- /dev/null
+++ b/packages/react/src/toast/viewport/ToastViewport.tsx
@@ -0,0 +1,264 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { activeElement, contains } from '@floating-ui/react/utils';
+import { useToastContext } from '../provider/ToastProviderContext';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { BaseUIComponentProps } from '../../utils/types';
+import { mergeProps } from '../../merge-props';
+import { useForkRef } from '../../utils/useForkRef';
+import { ownerDocument, ownerWindow } from '../../utils/owner';
+import { ToastViewportContext } from './ToastViewportContext';
+import { FloatingPortalLite } from '../../utils/FloatingPortalLite';
+import { FocusGuard } from './FocusGuard';
+import { isFocusVisible } from '../utils/focusVisible';
+import { useLatestRef } from '../../utils/useLatestRef';
+
+const state = {};
+
+/**
+ * A container viewport for toasts.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+const ToastViewport = React.forwardRef(function ToastViewport(
+  props: ToastViewport.Props,
+  forwardedRef: React.Ref<HTMLDivElement>,
+) {
+  const { render, className, children, ...other } = props;
+
+  const {
+    toasts,
+    pauseTimers,
+    resumeTimers,
+    setHovering,
+    setFocused,
+    viewportRef,
+    focused,
+    windowFocusedRef,
+    prevFocusElement,
+    setPrevFocusElement,
+  } = useToastContext();
+
+  const handlingFocusGuardRef = React.useRef(false);
+
+  const focusedRef = useLatestRef(focused);
+
+  const mergedRef = useForkRef(viewportRef, forwardedRef);
+
+  // Listen globally for F6 so we can force-focus the viewport.
+  React.useEffect(() => {
+    if (!viewportRef.current) {
+      return undefined;
+    }
+
+    function handleGlobalKeyDown(event: KeyboardEvent) {
+      if (toasts.length === 0) {
+        return;
+      }
+
+      if (event.key === 'F6' && event.target !== viewportRef.current) {
+        event.preventDefault();
+        setPrevFocusElement(
+          activeElement(ownerDocument(viewportRef.current)) as HTMLElement | null,
+        );
+        viewportRef.current?.focus();
+        pauseTimers();
+        setFocused(true);
+      }
+    }
+
+    const win = ownerWindow(viewportRef.current);
+
+    win.addEventListener('keydown', handleGlobalKeyDown);
+
+    return () => {
+      win.removeEventListener('keydown', handleGlobalKeyDown);
+    };
+  }, [pauseTimers, setFocused, setPrevFocusElement, toasts.length, viewportRef]);
+
+  React.useEffect(() => {
+    if (!viewportRef.current) {
+      return undefined;
+    }
+
+    const win = ownerWindow(viewportRef.current);
+
+    function handleWindowBlur(event: FocusEvent) {
+      if (event.relatedTarget) {
+        return;
+      }
+
+      windowFocusedRef.current = false;
+      pauseTimers();
+    }
+
+    function handleWindowFocus(event: FocusEvent) {
+      if (event.relatedTarget || event.target === win) {
+        return;
+      }
+
+      windowFocusedRef.current = true;
+
+      if (!contains(viewportRef.current, event.target as HTMLElement | null)) {
+        resumeTimers();
+      }
+    }
+
+    win.addEventListener('blur', handleWindowBlur, true);
+    win.addEventListener('focus', handleWindowFocus, true);
+
+    return () => {
+      win.removeEventListener('blur', handleWindowBlur, true);
+      win.removeEventListener('focus', handleWindowFocus, true);
+    };
+  }, [
+    pauseTimers,
+    resumeTimers,
+    viewportRef,
+    windowFocusedRef,
+    setFocused,
+    focusedRef,
+    // `viewportRef.current` isn't available on the first render,
+    // since the portal node hasn't yet been created.
+    // By adding this dependency, we ensure the window listeners
+    // are added when toasts have been created, once the ref is available.
+    toasts.length,
+  ]);
+
+  function handleFocusGuard(event: React.FocusEvent) {
+    if (!viewportRef.current) {
+      return;
+    }
+
+    handlingFocusGuardRef.current = true;
+
+    // If we're coming off the container, move to the first toast
+    if (event.relatedTarget === viewportRef.current) {
+      const toastElements = Array.from<HTMLElement>(
+        viewportRef.current.querySelectorAll(`[data-base-ui-toast]`),
+      );
+      toastElements[0]?.focus();
+    } else {
+      prevFocusElement?.focus({ preventScroll: true });
+    }
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent) {
+    if (event.key === 'Tab' && event.shiftKey && event.target === viewportRef.current) {
+      event.preventDefault();
+      prevFocusElement?.focus({ preventScroll: true });
+      resumeTimers();
+    }
+  }
+
+  function handleMouseEnter() {
+    pauseTimers();
+    setHovering(true);
+  }
+
+  function handleMouseLeave() {
+    const activeEl = activeElement(ownerDocument(viewportRef.current));
+    if (contains(viewportRef.current, activeEl) && isFocusVisible(activeEl)) {
+      return;
+    }
+
+    resumeTimers();
+    setHovering(false);
+  }
+
+  function handleFocus() {
+    if (handlingFocusGuardRef.current) {
+      handlingFocusGuardRef.current = false;
+      return;
+    }
+
+    if (focused) {
+      return;
+    }
+
+    setFocused(true);
+    pauseTimers();
+  }
+
+  function handleBlur(event: React.FocusEvent) {
+    if (!focused || contains(viewportRef.current, event.relatedTarget as HTMLElement | null)) {
+      return;
+    }
+
+    setFocused(false);
+    resumeTimers();
+  }
+
+  const numToasts = toasts.length;
+
+  const { renderElement } = useComponentRenderer({
+    render: render ?? 'div',
+    ref: mergedRef,
+    className,
+    state,
+    extraProps: mergeProps(
+      {
+        role: 'region',
+        tabIndex: -1,
+        'aria-label': `${numToasts} notification${numToasts !== 1 ? 's' : ''} (F6)`,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        children: (
+          <React.Fragment>
+            {numToasts > 0 && prevFocusElement && <FocusGuard onFocus={handleFocusGuard} />}
+            {children}
+            {numToasts > 0 && prevFocusElement && <FocusGuard onFocus={handleFocusGuard} />}
+          </React.Fragment>
+        ),
+      },
+      other,
+    ),
+  });
+
+  const contextValue: ToastViewportContext = React.useMemo(() => ({ viewportRef }), [viewportRef]);
+
+  return (
+    <ToastViewportContext.Provider value={contextValue}>
+      <FloatingPortalLite>
+        {numToasts > 0 && prevFocusElement && <FocusGuard onFocus={handleFocusGuard} />}
+        {renderElement()}
+      </FloatingPortalLite>
+    </ToastViewportContext.Provider>
+  );
+});
+
+namespace ToastViewport {
+  export interface State {}
+
+  export interface Props extends BaseUIComponentProps<'div', State> {}
+}
+
+ToastViewport.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * Allows you to replace the component's HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { ToastViewport };
diff --git a/packages/react/src/toast/viewport/ToastViewportContext.ts b/packages/react/src/toast/viewport/ToastViewportContext.ts
new file mode 100644
index 0000000000..4cefd0303a
--- /dev/null
+++ b/packages/react/src/toast/viewport/ToastViewportContext.ts
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface ToastViewportContext {
+  viewportRef: React.RefObject<HTMLElement | null>;
+}
+
+export const ToastViewportContext = React.createContext<ToastViewportContext | undefined>(
+  undefined,
+);
+
+export function useToastViewportContext() {
+  const context = React.useContext(ToastViewportContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
diff --git a/packages/react/src/utils/generateId.ts b/packages/react/src/utils/generateId.ts
new file mode 100644
index 0000000000..a4c68b5f58
--- /dev/null
+++ b/packages/react/src/utils/generateId.ts
@@ -0,0 +1,5 @@
+let counter = 0;
+export function generateId(prefix: string) {
+  counter += 1;
+  return `${prefix}-${Math.random().toString(36).slice(2, 6)}-${counter}`;
+}