feat: Add reduce motion support to <Tray>

apps/docs/docs/components/overlay/Tray/_mobileExamples.mdx

@@ -370,8 +370,33 @@ function PreventDismissTray() {
 
 ## Accessibility
 
+### Accessibility labels
+
 Trays require an accessibility label. If you pass in a ReactNode to `title`, make sure to set `accessibilityLabel`.
 
+### Reduce Motion
+
+Use the `reduceMotion` prop to accommodate users with reduced motion settings.
+
+```jsx
+function ReducedMotionTray() {
+  const [visible, setVisible] = useState(false);
+  const handleOpen = () => setVisible(true);
+  const handleClose = () => setVisible(false);
+
+  return (
+    <VStack gap={2}>
+      <Button onPress={handleOpen}>Open Tray</Button>
+      {visible && (
+        <Tray reduceMotion onCloseComplete={handleClose} title="Reduced Motion">
+          <Text color="fgMuted">This tray fades in and out using opacity.</Text>
+        </Tray>
+      )}
+    </VStack>
+  );
+}
+```
+
 ## Styling
 
 ### Handlebar

apps/docs/docs/components/overlay/Tray/_webExamples.mdx

@@ -441,8 +441,51 @@ function PreventDismissTray() {
 
 ## Accessibility
 
+### Accessibility labels
+
 Trays require an accessibility label. If you pass in a ReactNode to `title`, make sure to set `accessibilityLabel` or `accessibilityLabelledBy`.
 
+### Reduce Motion
+
+Use the `reduceMotion` prop to accommodate users with reduced motion settings.
+
+```jsx live
+function ReducedMotionTray() {
+  const [visible, setVisible] = useState(false);
+  const { isPhone } = useBreakpoints();
+  const handleOpen = () => setVisible(true);
+  const handleClose = () => setVisible(false);
+
+  return (
+    <VStack gap={2}>
+      <Button onClick={handleOpen}>Open Tray</Button>
+      {visible && (
+        <Tray
+          reduceMotion
+          pin={isPhone ? 'bottom' : 'right'}
+          showHandleBar={isPhone}
+          onCloseComplete={handleClose}
+          title="Reduced Motion"
+          footer={({ handleClose }) => (
+            <PageFooter
+              borderedTop
+              justifyContent={isPhone ? 'center' : 'flex-end'}
+              action={
+                <Button block={isPhone} onClick={handleClose}>
+                  Close
+                </Button>
+              }
+            />
+          )}
+        >
+          <Text paddingBottom={2}>This tray fades in and out using opacity.</Text>
+        </Tray>
+      )}
+    </VStack>
+  );
+}
+```
+
 ## Styling
 
 The Tray component exposes `styles` and `classNames` props for customizing various parts of the component. Available keys include: `root`, `overlay`, `container`, `header`, `title`, `content`, `footer`, `handleBar`, `handleBarHandle`, and `closeButton`.

apps/mobile-app/src/routes.ts

@@ -246,6 +246,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/overlays/__stories__/DrawerMisc.stories').default,
   },
+  {
+    key: 'DrawerReduceMotion',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/overlays/__stories__/DrawerReduceMotion.stories').default,
+  },
   {
     key: 'DrawerRight',
     getComponent: () =>
@@ -840,6 +845,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/overlays/__stories__/TrayRedesign.stories').default,
   },
+  {
+    key: 'TrayReduceMotion',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/overlays/__stories__/TrayReduceMotion.stories').default,
+  },
   {
     key: 'TrayScrollable',
     getComponent: () =>

packages/common/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.45.0 ((2/12/2026, 07:33 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.44.2 ((2/10/2026, 08:38 AM PST))
 
 This is an artificial version bump with no new change.

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.44.2",
+  "version": "8.45.0",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",

packages/mcp-server/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.45.0 ((2/12/2026, 07:33 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.44.2 ((2/10/2026, 08:38 AM PST))
 
 This is an artificial version bump with no new change.

packages/mcp-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.44.2",
+  "version": "8.45.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",

packages/mobile/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.45.0 (2/12/2026 PST)
+
+#### 🚀 Updates
+
+- Add reduce motion support for Tray. [[#386](https://github.com/coinbase/cds/pull/386)]
+
 ## 8.44.2 (2/10/2026 PST)
 
 #### 🐞 Fixes

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.44.2",
+  "version": "8.45.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",

packages/mobile/src/overlays/__stories__/DrawerReduceMotion.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+
+import { DefaultDrawer } from './Drawers';
+
+const DrawerReduceMotionScreen = () => {
+  return (
+    <ExampleScreen>
+      <Example title="Reduce Motion Drawer">
+        <DefaultDrawer reduceMotion pin="bottom" />
+      </Example>
+    </ExampleScreen>
+  );
+};
+
+export default DrawerReduceMotionScreen;

packages/mobile/src/overlays/__stories__/Drawers.tsx

@@ -11,15 +11,18 @@ import { Text } from '../../typography/Text';
 import type { DrawerBaseProps } from '../drawer/Drawer';
 import { Drawer } from '../drawer/Drawer';
 
-export const DefaultDrawer = ({ pin = 'left' }: Pick<DrawerBaseProps, 'pin'>) => {
+export const DefaultDrawer = ({
+  pin = 'left',
+  reduceMotion,
+}: Pick<DrawerBaseProps, 'pin' | 'reduceMotion'>) => {
   const [isVisible, setIsVisible] = useState(true);
   const setIsVisibleOff = useCallback(() => setIsVisible(false), [setIsVisible]);
   const setIsVisibleOn = useCallback(() => setIsVisible(true), [setIsVisible]);
   return (
     <>
       <Button onPress={setIsVisibleOn}>Open</Button>
       {isVisible && (
-        <Drawer onCloseComplete={setIsVisibleOff} pin={pin}>
+        <Drawer onCloseComplete={setIsVisibleOff} pin={pin} reduceMotion={reduceMotion}>
           {({ handleClose }) => (
             <VStack padding={2}>
               <LoremIpsum />

packages/mobile/src/overlays/__stories__/TrayReduceMotion.stories.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback, useRef, useState } from 'react';
+
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import type { DrawerRefBaseProps } from '../drawer/Drawer';
+import { Tray } from '../tray/Tray';
+
+export const TrayReduceMotionScreen = () => {
+  return (
+    <ExampleScreen>
+      <Example title="Reduce Motion Tray">
+        <TrayWithReduceMotion />
+      </Example>
+    </ExampleScreen>
+  );
+};
+
+const TrayWithReduceMotion = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef<DrawerRefBaseProps>(null);
+
+  const handleTrayVisibilityChange = useCallback((e: 'visible' | 'hidden') => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+
+  return (
+    <>
+      <Button onPress={setIsTrayVisibleOn}>Open</Button>
+      {isTrayVisible && (
+        <Tray
+          ref={trayRef}
+          reduceMotion
+          handleBarVariant="inside"
+          onCloseComplete={setIsTrayVisibleOff}
+          onVisibilityChange={handleTrayVisibilityChange}
+          title="Header"
+        >
+          <VStack paddingX={3}>
+            <Text font="body">
+              Curabitur commodo nulla vel dolor vulputate vestibulum. Nulla et nisl molestie,
+              interdum lorem id, viverra.
+            </Text>
+          </VStack>
+        </Tray>
+      )}
+    </>
+  );
+};
+
+export default TrayReduceMotionScreen;

packages/mobile/src/overlays/drawer/Drawer.tsx

@@ -99,6 +99,12 @@ export type DrawerBaseProps = SharedProps &
      * @deprecated Use TrayStickyFooter as a Tray child instead.
      */
     stickyFooter?: DrawerRenderChildren | React.ReactNode;
+    /**
+     * When true, the drawer opens and closes with an opacity fade instead of
+     * a slide animation. Swipe-to-dismiss gestures remain enabled and use
+     * the slide transform so the drawer follows the user's finger naturally.
+     */
+    reduceMotion?: boolean;
   };
 
 export type DrawerProps = DrawerBaseProps & {
@@ -140,6 +146,7 @@ export const Drawer = memo(
       handleBarAccessibilityLabel = 'Dismiss',
       accessibilityLabel,
       accessibilityLabelledBy,
+      reduceMotion,
       style,
       styles,
       accessibilityRole = 'alert',
@@ -156,9 +163,10 @@ export const Drawer = memo(
       drawerAnimation,
       animateDrawerOut,
       animateDrawerIn,
+      animateSnapBack,
       drawerAnimationStyles,
       animateSwipeToClose,
-    } = useDrawerAnimation(pin, verticalDrawerPercentageOfView);
+    } = useDrawerAnimation(pin, verticalDrawerPercentageOfView, reduceMotion);
     const [opacityAnimation, animateOverlayIn, animateOverlayOut] = useOverlayAnimation(
       drawerAnimationDefaultDuration,
     );
@@ -203,7 +211,7 @@ export const Drawer = memo(
     const panGestureHandlers = useDrawerPanResponder({
       pin,
       drawerAnimation,
-      animateDrawerIn,
+      animateSnapBack,
       disableCapturePanGestureToDismiss,
       onBlur,
       handleSwipeToClose,

packages/mobile/src/overlays/drawer/__tests__/Drawer.test.tsx

@@ -42,6 +42,7 @@ const MockDrawer = ({
   onCloseComplete,
   pin = 'bottom',
   preventDismissGestures,
+  reduceMotion,
 }: Partial<DrawerBaseProps>) => {
   const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleOn = useCallback(() => setIsVisible(true), [setIsVisible]);
@@ -61,6 +62,7 @@ const MockDrawer = ({
           onCloseComplete={handleRequestClose}
           pin={pin}
           preventDismissGestures={preventDismissGestures}
+          reduceMotion={reduceMotion}
           visible={isVisible}
         >
           {({ handleClose }) => (
@@ -151,4 +153,28 @@ describe('Drawer', () => {
     await delay(DURATION);
     expect(onCloseComplete).not.toHaveBeenCalled();
   });
+
+  describe('reduceMotion', () => {
+    it('closes the Drawer when the close button is pressed with reduceMotion enabled', async () => {
+      const onCloseComplete = jest.fn();
+      render(<MockDrawerWithSafeArea reduceMotion onCloseComplete={onCloseComplete} />);
+
+      fireEvent.press(screen.getByText('Open Drawer'));
+      expect(screen.getByText(loremIpsum)).toBeTruthy();
+
+      fireEvent.press(screen.getByText('Close Drawer'));
+      await waitFor(() => expect(onCloseComplete).toHaveBeenCalledTimes(1));
+    });
+
+    it('still closes the Drawer via overlay press with reduceMotion enabled', async () => {
+      const onCloseComplete = jest.fn();
+      render(<MockDrawerWithSafeArea reduceMotion onCloseComplete={onCloseComplete} />);
+
+      fireEvent.press(screen.getByText('Open Drawer'));
+      expect(screen.getByText(loremIpsum)).toBeTruthy();
+
+      fireEvent(screen.getByTestId('drawer-overlay'), 'onTouchStart');
+      await waitFor(() => expect(onCloseComplete).toHaveBeenCalledTimes(1));
+    });
+  });
 });