From 75bc87f8ff3afc191ac7876aaf5ffaf6f7635880 Mon Sep 17 00:00:00 2001
From: Hunter Copp <huntercolecopp@gmail.com>
Date: Tue, 17 Feb 2026 12:39:29 -0500
Subject: [PATCH 1/2] feat: figma code connect and doc updates (#392)

* feat: update carousel code connect

* Update carousel pagination dot color

* Revert "Update carousel pagination dot color"

This reverts commit bc33f422f0842d8b9666bec2a6f06f1923274916.

* Update tray figma

* Update slidebutton docs

* Fix lint

* Drop nested child properties

* Improve web tray code connect

* Update text
---
 .../inputs/SlideButton/_mobileExamples.mdx    | 137 +++++++++++---
 .../inputs/SlideButton/mobileMetadata.json    |   7 +-
 .../src/carousel/__figma__/Carousel.figma.tsx |  15 +-
 .../overlays/tray/__figma__/Tray.figma.tsx    | 167 +++++++++---------
 .../src/carousel/__figma__/Carousel.figma.tsx |  15 +-
 .../overlays/tray/__figma__/Tray.figma.tsx    | 165 +++++++++++++++++
 6 files changed, 394 insertions(+), 112 deletions(-)
 create mode 100644 packages/web/src/overlays/tray/__figma__/Tray.figma.tsx

diff --git a/apps/docs/docs/components/inputs/SlideButton/_mobileExamples.mdx b/apps/docs/docs/components/inputs/SlideButton/_mobileExamples.mdx
index a6efccf54..64e3c8973 100644
--- a/apps/docs/docs/components/inputs/SlideButton/_mobileExamples.mdx
+++ b/apps/docs/docs/components/inputs/SlideButton/_mobileExamples.mdx
@@ -1,9 +1,9 @@
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import ThemedImage from '@theme/ThemedImage';
 
-### SlideButton
+## Basics
 
-Use the `onChange` prop to listen and make changes to the `checked` state.
+Use the `onChange` callback to update the `checked` state. This is the primary callback that controls both the visual and accessible state of the component.
 
 <ThemedImage
   sources={{
@@ -25,7 +25,6 @@ function Example() {
     <SlideButton
       checked={checked}
       onChange={setChecked}
-      onSlideComplete={() => console.log('Completed')}
       uncheckedLabel="Swipe to confirm"
       checkedLabel="Confirming..."
     />
@@ -33,9 +32,9 @@ function Example() {
 }
 ```
 
-### Negative SlideButton
+## Variants
 
-You can use the `variant` prop to change the color of the button.
+Use the `variant` prop to change the color of the button. The default variant is `primary`. Available variants are `negative` and `positive`.
 
 <ThemedImage
   sources={{
@@ -57,7 +56,6 @@ function Example() {
     <SlideButton
       checked={checked}
       onChange={setChecked}
-      onSlideComplete={() => console.log('Completed')}
       uncheckedLabel="Swipe to confirm"
       checkedLabel="Confirming..."
       variant="negative"
@@ -66,7 +64,7 @@ function Example() {
 }
 ```
 
-### Compact SlideButton
+## Compact
 
 Use the `compact` prop to reduce the height, border-radius and padding of the button:
 
@@ -78,7 +76,6 @@ function Example() {
     <SlideButton
       checked={checked}
       onChange={setChecked}
-      onSlideComplete={() => console.log('Completed')}
       uncheckedLabel="Swipe to confirm"
       checkedLabel="Confirming..."
       compact
@@ -87,9 +84,31 @@ function Example() {
 }
 ```
 
-### Auto Complete on Threshold
+## Disabled
+
+Use the `disabled` prop to prevent interaction. This works for both unchecked and checked states.
+
+```jsx
+function Example() {
+  return (
+    <VStack gap={2}>
+      <SlideButton
+        checked={false}
+        disabled
+        uncheckedLabel="Swipe to confirm"
+        checkedLabel="Confirming..."
+      />
+      <SlideButton checked disabled uncheckedLabel="Swipe to confirm" checkedLabel="Confirmed" />
+    </VStack>
+  );
+}
+```
+
+## Auto Complete on Threshold
 
-You can set the button to automatically complete when the slide reaches the threshold:
+By default, the user must release the handle past the threshold to complete. Set `autoCompleteSlideOnThresholdMet` to automatically complete as soon as the threshold is reached, without requiring release.
+
+You can also adjust the threshold via `checkThreshold` (a value from 0 to 1, defaulting to 0.7).
 
 ```jsx
 function Example() {
@@ -99,7 +118,6 @@ function Example() {
     <SlideButton
       checked={checked}
       onChange={setChecked}
-      onSlideComplete={() => console.log('Completed')}
       uncheckedLabel="Swipe to confirm"
       checkedLabel="Confirming..."
       autoCompleteSlideOnThresholdMet
@@ -108,9 +126,41 @@ function Example() {
 }
 ```
 
-### Custom Nodes on SlideButton
+## Callback Lifecycle
+
+SlideButton fires callbacks in a specific order during the slide gesture:
+
+1. `onSlideStart` -- when the gesture begins
+2. `onChange` -- when the slide completes past the threshold (sets `checked` to `true`)
+3. `onSlideComplete` -- immediately after `onChange`
+4. `onSlideEnd` -- always fires last
+
+If the user releases before the threshold, `onSlideCancel` fires instead, followed by `onSlideEnd`.
+
+**Important:** Always use `onChange` to manage the `checked` state. The `checked` prop drives the component's `accessibilityLabel` (switching between `uncheckedLabel` and `checkedLabel`), so failing to update it means screen readers won't announce the state change. Use `onSlideComplete` only for supplementary side effects (e.g. analytics, haptic feedback) that don't affect accessible state.
+
+```jsx
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <SlideButton
+      checked={checked}
+      onChange={setChecked}
+      onSlideStart={() => console.log('Started')}
+      onSlideComplete={() => console.log('Completed')}
+      onSlideCancel={() => console.log('Cancelled')}
+      onSlideEnd={() => console.log('Ended')}
+      uncheckedLabel="Swipe to confirm"
+      checkedLabel="Confirming..."
+    />
+  );
+}
+```
+
+## Custom Nodes
 
-You can also use SlideButton with custom nodes.
+Use `startUncheckedNode` and `endCheckedNode` to replace the default arrow icon and loading indicator on the handle.
 
 <ThemedImage
   sources={{
@@ -121,7 +171,7 @@ You can also use SlideButton with custom nodes.
     borderRadius: 'var(--borderRadius-400)',
     border: '1.5px solid var(--color-bgLine)',
   }}
-  alt="Custom nodes on slide button"
+  alt="Slide button with custom bell icons on the handle"
 />
 
 ```jsx
@@ -132,19 +182,41 @@ function Example() {
     <SlideButton
       checked={checked}
       onChange={setChecked}
-      onSlideComplete={() => console.log('Completed')}
       uncheckedLabel="Swipe to enable notifications"
       checkedLabel="Enabling..."
-      startUncheckedNode={<Icon color="fgInverse" name="bellCheck" size="m" />}
-      endCheckedNode={<Icon color="fgInverse" name="bellInactive" size="m" />}
+      startUncheckedNode={<Icon color="fgInverse" name="bell" size="m" />}
+      endCheckedNode={<Icon color="fgInverse" name="bellCheck" size="m" />}
     />
   );
 }
 ```
 
-### Custom Background and Handle Components
+## Labels as Nodes
+
+The `uncheckedLabel` and `checkedLabel` props accept `ReactNode`, so you can pass custom styled text or other components. When using non-string labels, the component uses `accessibilityLabelledBy` to associate the handle with the container element, so ensure your label nodes contain meaningful text content.
 
-You can customize the background and handle components of the SlideButton.
+```jsx
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <SlideButton
+      checked={checked}
+      onChange={setChecked}
+      uncheckedLabel={<Text font="label2">Swipe to confirm</Text>}
+      checkedLabel={
+        <Text color="fgInverse" font="label2">
+          Confirming...
+        </Text>
+      }
+    />
+  );
+}
+```
+
+## Custom Background and Handle Components
+
+You can fully customize the background and handle by providing your own components via `SlideButtonBackgroundComponent` and `SlideButtonHandleComponent`. Your components receive typed props (`SlideButtonBackgroundProps` and `SlideButtonHandleProps`) including a `progress` spring value and the current `checked` state.
 
 <ThemedImage
   sources={{
@@ -155,7 +227,7 @@ You can customize the background and handle components of the SlideButton.
     borderRadius: 'var(--borderRadius-400)',
     border: '1.5px solid var(--color-bgLine)',
   }}
-  alt="Custom background and handle components"
+  alt="Slide button with custom green/red background and handle"
 />
 
 ```jsx
@@ -208,3 +280,28 @@ function Example() {
   );
 }
 ```
+
+## Accessibility
+
+SlideButton has built-in accessibility support. The component automatically derives its `accessibilityLabel` from the `checked` state -- displaying `uncheckedLabel` when unchecked and `checkedLabel` when checked. It also registers an `activate` accessibility action so screen readers can trigger the slide without performing a gesture.
+
+**Use `onChange` as your primary callback.** The `onChange` callback updates the `checked` prop, which controls the accessible label. Placing critical logic in `onSlideComplete` without updating `checked` via `onChange` will leave the accessible state stale, meaning screen readers won't announce the confirmation.
+
+When providing a custom `SlideButtonHandleComponent`, always spread the incoming props to preserve the built-in `accessibilityActions` and `onAccessibilityAction` handlers, and set `accessibilityLabel` and `accessibilityRole="button"` on the handle element.
+
+When using `ReactNode` labels instead of strings, the component uses `accessibilityLabelledBy` to link to the container element, so ensure your custom label nodes contain meaningful text.
+
+```jsx
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <SlideButton
+      checked={checked}
+      onChange={setChecked}
+      uncheckedLabel="Swipe to send payment"
+      checkedLabel="Sending payment..."
+    />
+  );
+}
+```
diff --git a/apps/docs/docs/components/inputs/SlideButton/mobileMetadata.json b/apps/docs/docs/components/inputs/SlideButton/mobileMetadata.json
index 31631d3ce..2c8b9fc38 100644
--- a/apps/docs/docs/components/inputs/SlideButton/mobileMetadata.json
+++ b/apps/docs/docs/components/inputs/SlideButton/mobileMetadata.json
@@ -21,5 +21,10 @@
       "url": "/components/inputs/Pressable/"
     }
   ],
-  "dependencies": []
+  "dependencies": [
+    {
+      "name": "react-native-gesture-handler",
+      "version": "^2.16.2"
+    }
+  ]
 }
diff --git a/packages/mobile/src/carousel/__figma__/Carousel.figma.tsx b/packages/mobile/src/carousel/__figma__/Carousel.figma.tsx
index e538ae0e9..26597b66f 100644
--- a/packages/mobile/src/carousel/__figma__/Carousel.figma.tsx
+++ b/packages/mobile/src/carousel/__figma__/Carousel.figma.tsx
@@ -5,9 +5,20 @@ figma.connect(
   Carousel,
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=48671-10433',
   {
+    variant: { platform: 'mobile' },
     imports: ["import { Carousel, CarouselItem } from '@coinbase/cds-mobile/carousel'"],
-    example: () => (
-      <Carousel>
+    props: {
+      title: figma.boolean('show header', {
+        true: figma.string('title'),
+        false: undefined,
+      }),
+      hidePagination: figma.boolean('show pagination', {
+        true: undefined,
+        false: true,
+      }),
+    },
+    example: ({ title, hidePagination }) => (
+      <Carousel hidePagination={hidePagination} paginationVariant="dot" title={title}>
         <CarouselItem id="1">{/* Item content */}</CarouselItem>
         <CarouselItem id="2">{/* Item content */}</CarouselItem>
         <CarouselItem id="3">{/* Item content */}</CarouselItem>
diff --git a/packages/mobile/src/overlays/tray/__figma__/Tray.figma.tsx b/packages/mobile/src/overlays/tray/__figma__/Tray.figma.tsx
index dd92e1c8a..3406b6f83 100644
--- a/packages/mobile/src/overlays/tray/__figma__/Tray.figma.tsx
+++ b/packages/mobile/src/overlays/tray/__figma__/Tray.figma.tsx
@@ -1,46 +1,47 @@
-import { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { figma } from '@figma/code-connect';
 
 import { Button } from '../../../buttons/Button';
 import { Box, VStack } from '../../../layout';
-import { TextBody, TextTitle1 } from '../../../typography';
-import { Tray, TrayStickyFooter } from '../Tray';
+import { StickyFooter } from '../../../sticky-footer/StickyFooter';
+import { Text } from '../../../typography/Text';
+import { Tray } from '../Tray';
 
 figma.connect(
   Tray,
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14729-33327&m=dev',
   {
-    imports: ["import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'"],
+    imports: [
+      "import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'",
+      "import { StickyFooter } from '@coinbase/cds-mobile/sticky-footer/StickyFooter'",
+    ],
     props: {
       title: figma.boolean('show section header', {
         true: figma.textContent('SectionHeader'),
         false: undefined,
       }),
-      stickyFooter: figma.children('StickyFooter'),
       content: figma.children('.Select Option*'),
     },
-    example: function TrayExample({ stickyFooter, content, title }) {
+    example: function TrayExample({ content, title }) {
       const [isTrayVisible, setIsTrayVisible] = useState(false);
-      const trayRef = useRef(null);
 
       return (
         <>
-          <Button onPress={() => setIsTrayVisible(true)}>Open</Button>
+          <Button onPress={() => setIsTrayVisible(true)}>Open Tray</Button>
           {isTrayVisible && (
             <Tray
-              ref={trayRef}
-              disableCapturePanGestureToDismiss
-              handleBarAccessibilityLabel="Dismiss"
+              footer={({ handleClose }) => (
+                <StickyFooter background="bgElevation2" paddingX={3}>
+                  <Button block onPress={handleClose}>
+                    Close
+                  </Button>
+                </StickyFooter>
+              )}
+              handleBarVariant="inside"
               onCloseComplete={() => setIsTrayVisible(false)}
-              onVisibilityChange={() => {}}
               title={title}
             >
-              {({ handleClose }) => (
-                <TrayStickyFooter>
-                  {content}
-                  {stickyFooter}
-                </TrayStickyFooter>
-              )}
+              <VStack paddingX={3}>{content}</VStack>
             </Tray>
           )}
         </>
@@ -59,37 +60,31 @@ figma.connect(
         true: figma.children('Spot Square/blockchain'),
         false: undefined,
       }),
-      title: figma.textContent('SectionHeader'),
-      stickyFooter: figma.children('StickyFooter'),
+      sectionTitle: figma.textContent('SectionHeader'),
     },
-    example: function TrayExample({ pictogram, title, stickyFooter }) {
+    example: function TrayExample({ pictogram, sectionTitle }) {
       const [isTrayVisible, setIsTrayVisible] = useState(false);
-      const trayRef = useRef(null);
 
       return (
         <>
-          <Button onPress={() => setIsTrayVisible(true)}>Open</Button>
+          <Button onPress={() => setIsTrayVisible(true)}>Open Tray</Button>
           {isTrayVisible && (
             <Tray
-              ref={trayRef}
-              disableCapturePanGestureToDismiss
-              handleBarAccessibilityLabel="Dismiss"
+              accessibilityLabel={sectionTitle}
+              handleBarVariant="inside"
               onCloseComplete={() => setIsTrayVisible(false)}
-              onVisibilityChange={() => {}}
-              title={title}
-            >
-              {({ handleClose }) => (
-                <TrayStickyFooter>
+              title={
+                <VStack gap={1.5}>
                   {pictogram}
-                  <TextBody>
-                    Lorem ipsum dolor sit amet consectetur. Lacus vitae vulputate maecenas sed ac
-                    cursus enim elementum euismod. Ac vulputate gravida mauris id nulla imperdiet
-                    eget. Dictum vitae enim eget ut. Maecenas hendrerit amet integer sagittis cras.
-                    Fermentum ultricies malesuada interdum
-                  </TextBody>
-                  {stickyFooter}
-                </TrayStickyFooter>
-              )}
+                  <Text font="title3">{sectionTitle}</Text>
+                </VStack>
+              }
+            >
+              <VStack paddingX={3}>
+                <Text color="fgMuted" font="body" paddingBottom={2}>
+                  Content goes here.
+                </Text>
+              </VStack>
             </Tray>
           )}
         </>
@@ -102,44 +97,45 @@ figma.connect(
   Tray,
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14729-33505&m=dev',
   {
-    imports: ["import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'"],
+    imports: [
+      "import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'",
+      "import { StickyFooter } from '@coinbase/cds-mobile/sticky-footer/StickyFooter'",
+    ],
     props: {
       spotRectangle: figma.instance('spot rectangle'),
       title: figma.string('title'),
       body: figma.string('body'),
-      stickyFooter: figma.children('StickyFooter'),
     },
-    example: function TrayExample({ spotRectangle, title, body, stickyFooter }) {
+    example: function TrayExample({ spotRectangle, title, body }) {
       const [isTrayVisible, setIsTrayVisible] = useState(false);
-      const trayRef = useRef(null);
 
       return (
         <>
-          <Button onPress={() => setIsTrayVisible(true)}>Open</Button>
+          <Button onPress={() => setIsTrayVisible(true)}>Open Tray</Button>
           {isTrayVisible && (
             <Tray
-              ref={trayRef}
-              disableCapturePanGestureToDismiss
-              handleBarAccessibilityLabel="Dismiss"
+              accessibilityLabel={title}
+              footer={({ handleClose }) => (
+                <StickyFooter background="bgElevation2" paddingX={3}>
+                  <Button block onPress={handleClose}>
+                    Close
+                  </Button>
+                </StickyFooter>
+              )}
+              handleBarVariant="inside"
               onCloseComplete={() => setIsTrayVisible(false)}
-              onVisibilityChange={() => {}}
             >
-              {({ handleClose }) => (
-                <TrayStickyFooter>
-                  <VStack paddingBottom={1} paddingTop={1} paddingX={3}>
-                    <Box alignItems="center" paddingBottom={3}>
-                      {spotRectangle}
-                    </Box>
-                    <TextTitle1 align="center" paddingBottom={2}>
-                      {title}
-                    </TextTitle1>
-                    <TextBody align="center" color="fgMuted" paddingBottom={2}>
-                      {body}
-                    </TextBody>
-                  </VStack>
-                  {stickyFooter}
-                </TrayStickyFooter>
-              )}
+              <VStack paddingX={3}>
+                <Box alignItems="center" paddingBottom={3}>
+                  {spotRectangle}
+                </Box>
+                <Text align="center" font="title1" paddingBottom={2}>
+                  {title}
+                </Text>
+                <Text align="center" color="fgMuted" font="body" paddingBottom={2}>
+                  {body}
+                </Text>
+              </VStack>
             </Tray>
           )}
         </>
@@ -158,20 +154,17 @@ figma.connect(
     },
     example: function TrayExample({ children }) {
       const [isTrayVisible, setIsTrayVisible] = useState(false);
-      const trayRef = useRef(null);
 
       return (
         <>
-          <Button onPress={() => setIsTrayVisible(true)}>Open</Button>
+          <Button onPress={() => setIsTrayVisible(true)}>Open Tray</Button>
           {isTrayVisible && (
             <Tray
-              ref={trayRef}
-              disableCapturePanGestureToDismiss
-              handleBarAccessibilityLabel="Dismiss"
+              handleBarVariant="inside"
               onCloseComplete={() => setIsTrayVisible(false)}
-              onVisibilityChange={() => {}}
+              title="Title"
             >
-              {({ handleClose }) => <TrayStickyFooter>{children}</TrayStickyFooter>}
+              {children}
             </Tray>
           )}
         </>
@@ -184,37 +177,37 @@ figma.connect(
   Tray,
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14729-77780&m=dev',
   {
-    imports: ["import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'"],
+    imports: [
+      "import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'",
+      "import { StickyFooter } from '@coinbase/cds-mobile/sticky-footer/StickyFooter'",
+    ],
     props: {
       content: figma.instance('content'),
-      stickyFooter: figma.children('StickyFooter'),
       title: figma.boolean('show section header', {
         true: figma.textContent('SectionHeader'),
         false: undefined,
       }),
     },
-    example: function TrayExample({ content, stickyFooter, title }) {
+    example: function TrayExample({ content, title }) {
       const [isTrayVisible, setIsTrayVisible] = useState(false);
-      const trayRef = useRef(null);
 
       return (
         <>
-          <Button onPress={() => setIsTrayVisible(true)}>Open</Button>
+          <Button onPress={() => setIsTrayVisible(true)}>Open Tray</Button>
           {isTrayVisible && (
             <Tray
-              ref={trayRef}
-              disableCapturePanGestureToDismiss
-              handleBarAccessibilityLabel="Dismiss"
+              footer={({ handleClose }) => (
+                <StickyFooter background="bgElevation2" paddingX={3}>
+                  <Button block onPress={handleClose}>
+                    Close
+                  </Button>
+                </StickyFooter>
+              )}
+              handleBarVariant="inside"
               onCloseComplete={() => setIsTrayVisible(false)}
-              onVisibilityChange={() => {}}
               title={title}
             >
-              {({ handleClose }) => (
-                <TrayStickyFooter>
-                  {content}
-                  {stickyFooter}
-                </TrayStickyFooter>
-              )}
+              <VStack paddingX={3}>{content}</VStack>
             </Tray>
           )}
         </>
diff --git a/packages/web/src/carousel/__figma__/Carousel.figma.tsx b/packages/web/src/carousel/__figma__/Carousel.figma.tsx
index b54847416..cb248f543 100644
--- a/packages/web/src/carousel/__figma__/Carousel.figma.tsx
+++ b/packages/web/src/carousel/__figma__/Carousel.figma.tsx
@@ -6,9 +6,20 @@ figma.connect(
   Carousel,
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=48671-10433',
   {
+    variant: { platform: 'desktop' },
     imports: ["import { Carousel, CarouselItem } from '@coinbase/cds-web/carousel'"],
-    example: () => (
-      <Carousel>
+    props: {
+      title: figma.boolean('show header', {
+        true: figma.string('title'),
+        false: undefined,
+      }),
+      hidePagination: figma.boolean('show pagination', {
+        true: undefined,
+        false: true,
+      }),
+    },
+    example: ({ title, hidePagination }) => (
+      <Carousel hidePagination={hidePagination} paginationVariant="dot" title={title}>
         <CarouselItem id="1">{/* Item content */}</CarouselItem>
         <CarouselItem id="2">{/* Item content */}</CarouselItem>
         <CarouselItem id="3">{/* Item content */}</CarouselItem>
diff --git a/packages/web/src/overlays/tray/__figma__/Tray.figma.tsx b/packages/web/src/overlays/tray/__figma__/Tray.figma.tsx
new file mode 100644
index 000000000..59633c6c2
--- /dev/null
+++ b/packages/web/src/overlays/tray/__figma__/Tray.figma.tsx
@@ -0,0 +1,165 @@
+import { useId, useState } from 'react';
+import { figma } from '@figma/code-connect';
+
+import { Button } from '../../../buttons';
+import { useBreakpoints } from '../../../hooks/useBreakpoints';
+import { Pictogram } from '../../../illustrations/Pictogram';
+import { Box } from '../../../layout';
+import { VStack } from '../../../layout/VStack';
+import { PageFooter } from '../../../page/PageFooter';
+import { Text } from '../../../typography/Text';
+import { Tray } from '../Tray';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=74148-11495&m=dev';
+
+figma.connect(Tray, FIGMA_URL, {
+  variant: { type: 'standard' },
+  imports: [
+    "import { Tray } from '@coinbase/cds-web/overlays/tray/Tray'",
+    "import { PageFooter } from '@coinbase/cds-web/page/PageFooter'",
+    "import { useBreakpoints } from '@coinbase/cds-web/hooks/useBreakpoints'",
+  ],
+  props: {
+    title: figma.textContent('SectionHeader'),
+  },
+  example: function StandardExample({ title }) {
+    const [visible, setVisible] = useState(false);
+    const { isPhone } = useBreakpoints();
+    return (
+      <>
+        <Button onClick={() => setVisible(true)}>Open Tray</Button>
+        {visible && (
+          <Tray
+            footer={({ handleClose }) => (
+              <PageFooter
+                borderedTop
+                action={
+                  <Button block={isPhone} onClick={handleClose}>
+                    Close
+                  </Button>
+                }
+                justifyContent={isPhone ? 'center' : 'flex-end'}
+              />
+            )}
+            onCloseComplete={() => setVisible(false)}
+            pin={isPhone ? 'bottom' : 'right'}
+            showHandleBar={isPhone}
+            title={title}
+          >
+            <Text color="fgMuted" paddingBottom={2}>
+              Content goes here.
+            </Text>
+          </Tray>
+        )}
+      </>
+    );
+  },
+});
+
+figma.connect(Tray, FIGMA_URL, {
+  variant: { type: 'illustration' },
+  imports: [
+    "import { Tray } from '@coinbase/cds-web/overlays/tray/Tray'",
+    "import { Pictogram } from '@coinbase/cds-web/illustrations/Pictogram'",
+    "import { useBreakpoints } from '@coinbase/cds-web/hooks/useBreakpoints'",
+  ],
+  props: {
+    sectionTitle: figma.textContent('SectionHeader'),
+  },
+  example: function IllustrationExample({ sectionTitle }) {
+    const [visible, setVisible] = useState(false);
+    const { isPhone } = useBreakpoints();
+    const titleId = useId();
+    return (
+      <>
+        <Button onClick={() => setVisible(true)}>Open Tray</Button>
+        {visible && (
+          <Tray
+            accessibilityLabelledBy={titleId}
+            onCloseComplete={() => setVisible(false)}
+            pin={isPhone ? 'bottom' : 'right'}
+            showHandleBar={isPhone}
+            title={
+              <VStack gap={{ phone: 1.5, tablet: 2, desktop: 2 }}>
+                <Pictogram name="addWallet" />
+                <Text font="title3" id={titleId}>
+                  {sectionTitle}
+                </Text>
+              </VStack>
+            }
+          >
+            <Text color="fgMuted" font="body" paddingBottom={2}>
+              Content goes here.
+            </Text>
+          </Tray>
+        )}
+      </>
+    );
+  },
+});
+
+figma.connect(Tray, FIGMA_URL, {
+  variant: { type: 'full-bleed image' },
+  imports: [
+    "import { Tray } from '@coinbase/cds-web/overlays/tray/Tray'",
+    "import { useBreakpoints } from '@coinbase/cds-web/hooks/useBreakpoints'",
+  ],
+  props: {
+    sectionTitle: figma.textContent('SectionHeader'),
+  },
+  example: function FullBleedImageExample({ sectionTitle }) {
+    const [visible, setVisible] = useState(false);
+    const { isPhone } = useBreakpoints();
+    const titleId = useId();
+    return (
+      <>
+        <Button onClick={() => setVisible(true)}>Open Tray</Button>
+        {visible && (
+          <Tray
+            accessibilityLabelledBy={titleId}
+            header={
+              <Text font="title3" id={titleId} paddingTop={2} paddingX={{ base: 4, phone: 3 }}>
+                {sectionTitle}
+              </Text>
+            }
+            onCloseComplete={() => setVisible(false)}
+            pin={isPhone ? 'bottom' : 'right'}
+            showHandleBar={isPhone}
+            styles={{
+              handleBar: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                zIndex: 1,
+              },
+              closeButton: {
+                position: 'absolute',
+                top: 'var(--space-4)',
+                right: 'var(--space-4)',
+                zIndex: 1,
+              },
+              header: { paddingTop: 0 },
+            }}
+            title={
+              <Box flexGrow={1} marginX={{ base: -4, phone: -3 }}>
+                <img
+                  alt="Full Bleed"
+                  height={180}
+                  src="image.jpg"
+                  style={{ objectFit: 'cover', pointerEvents: 'none' }}
+                  width="100%"
+                />
+              </Box>
+            }
+          >
+            <Text color="fgMuted" font="body" paddingBottom={2}>
+              Content goes here.
+            </Text>
+          </Tray>
+        )}
+      </>
+    );
+  },
+});

From f2a6486c6985d324b7d487d24d7480892c0e3a4e Mon Sep 17 00:00:00 2001
From: Hunter Copp <huntercolecopp@gmail.com>
Date: Tue, 17 Feb 2026 18:51:45 -0500
Subject: [PATCH 2/2] feat: expo template (#402)

* feat: expo template

* Fix formatting

* Include metro

* Add Inter
---
 .../installation/_mobileContent.mdx           |   4 +
 .../installation/_webContent.mdx              |   4 +
 .../templates/_mobileContent.mdx              | 105 ++++++++++++++
 .../docs/getting-started/templates/index.mdx  |  13 +-
 .../templates/mobileMetadata.json             |   3 +
 .../static/img/logos/frameworks/expo_dark.png | Bin 0 -> 7040 bytes
 .../img/logos/frameworks/expo_light.png       | Bin 0 -> 7041 bytes
 templates/expo-app/.gitignore                 |  33 +++++
 templates/expo-app/.nvmrc                     |   1 +
 templates/expo-app/.yarnrc.yml                |   4 +
 templates/expo-app/App.tsx                    | 137 ++++++++++++++++++
 templates/expo-app/README.md                  |  49 +++++++
 templates/expo-app/app.json                   |  15 ++
 templates/expo-app/babel.config.js            |   6 +
 .../expo-app/components/AssetCarousel.tsx     |  54 +++++++
 templates/expo-app/components/AssetChart.tsx  | 116 +++++++++++++++
 templates/expo-app/components/AssetList.tsx   |  67 +++++++++
 templates/expo-app/components/CardList.tsx    |  82 +++++++++++
 templates/expo-app/components/Navbar.tsx      |  33 +++++
 .../expo-app/components/TabBarButton.tsx      |  44 ++++++
 templates/expo-app/metro.config.js            |  23 +++
 templates/expo-app/package.json               |  47 ++++++
 templates/expo-app/tsconfig.json              |   8 +
 23 files changed, 845 insertions(+), 3 deletions(-)
 create mode 100644 apps/docs/docs/getting-started/templates/_mobileContent.mdx
 create mode 100644 apps/docs/docs/getting-started/templates/mobileMetadata.json
 create mode 100644 apps/docs/static/img/logos/frameworks/expo_dark.png
 create mode 100644 apps/docs/static/img/logos/frameworks/expo_light.png
 create mode 100644 templates/expo-app/.gitignore
 create mode 100644 templates/expo-app/.nvmrc
 create mode 100644 templates/expo-app/.yarnrc.yml
 create mode 100644 templates/expo-app/App.tsx
 create mode 100644 templates/expo-app/README.md
 create mode 100644 templates/expo-app/app.json
 create mode 100644 templates/expo-app/babel.config.js
 create mode 100644 templates/expo-app/components/AssetCarousel.tsx
 create mode 100644 templates/expo-app/components/AssetChart.tsx
 create mode 100644 templates/expo-app/components/AssetList.tsx
 create mode 100644 templates/expo-app/components/CardList.tsx
 create mode 100644 templates/expo-app/components/Navbar.tsx
 create mode 100644 templates/expo-app/components/TabBarButton.tsx
 create mode 100644 templates/expo-app/metro.config.js
 create mode 100644 templates/expo-app/package.json
 create mode 100644 templates/expo-app/tsconfig.json

diff --git a/apps/docs/docs/getting-started/installation/_mobileContent.mdx b/apps/docs/docs/getting-started/installation/_mobileContent.mdx
index 74f6580e8..60ab85c71 100644
--- a/apps/docs/docs/getting-started/installation/_mobileContent.mdx
+++ b/apps/docs/docs/getting-started/installation/_mobileContent.mdx
@@ -5,6 +5,10 @@ import { MDXArticle } from '@site/src/components/page/MDXArticle';
 <MDXArticle>
 ## Installation
 
+:::tip Starting a new project?
+Check out our [templates](/getting-started/templates) for pre-configured starter apps with CDS already set up.
+:::
+
 To install the CDS library for React Native applications, run the following command:
 
 ```bash
diff --git a/apps/docs/docs/getting-started/installation/_webContent.mdx b/apps/docs/docs/getting-started/installation/_webContent.mdx
index df0695e27..b6acc2e1b 100644
--- a/apps/docs/docs/getting-started/installation/_webContent.mdx
+++ b/apps/docs/docs/getting-started/installation/_webContent.mdx
@@ -5,6 +5,10 @@ import { MDXArticle } from '@site/src/components/page/MDXArticle';
 <MDXArticle>
 ## Installation
 
+:::tip Starting a new project?
+Check out our [templates](/getting-started/templates) for pre-configured starter apps with CDS already set up.
+:::
+
 To install the CDS library for React web applications, run the following command:
 
 ```bash
diff --git a/apps/docs/docs/getting-started/templates/_mobileContent.mdx b/apps/docs/docs/getting-started/templates/_mobileContent.mdx
new file mode 100644
index 000000000..5798d8de8
--- /dev/null
+++ b/apps/docs/docs/getting-started/templates/_mobileContent.mdx
@@ -0,0 +1,105 @@
+import { MDXSection } from '@site/src/components/page/MDXSection';
+import { MDXArticle } from '@site/src/components/page/MDXArticle';
+import { TemplateCard } from '@site/src/components/page/TemplateCard';
+import { HStack } from '@coinbase/cds-web/layout';
+import ThemedImage from '@theme/ThemedImage';
+
+<MDXSection>
+<MDXArticle>
+
+## Get started
+
+The easiest way to get started with CDS on mobile is with a template. The Expo template includes the required CDS packages, dependencies, and pre-configured settings with a working example application to help you start building.
+
+<HStack gap={2} style={{ marginTop: '1.5rem', flexWrap: 'wrap', alignItems: 'stretch' }}>
+  <TemplateCard
+    name="Expo"
+    description="Built for cross-platform mobile applications with React Native"
+    href="https://github.com/coinbase/cds/tree/master/templates/expo-app"
+    icon={
+      <ThemedImage
+        sources={{
+          light: '/img/logos/frameworks/expo_light.png',
+          dark: '/img/logos/frameworks/expo_dark.png',
+        }}
+        alt="Expo"
+        style={{ paddingTop: 'var(--space-0_75)', paddingBottom: 'var(--space-0_75)' }}
+        height="100%"
+      />
+    }
+  />
+</HStack>
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## Installation
+
+To create a new project from the template, use `gitpick` to bootstrap your application:
+
+### Expo
+
+```bash
+npx -y gitpick coinbase/cds/tree/master/templates/expo-app cds-expo
+cd cds-expo
+```
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## Setup
+
+After creating your project, install dependencies and start developing:
+
+```bash
+# We suggest using nvm to manage Node.js versions
+nvm install
+nvm use
+
+# Enable corepack for package manager setup
+corepack enable
+
+# Install dependencies
+yarn
+
+# Start development server
+yarn start
+```
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## What's included
+
+All templates come pre-configured with:
+
+- Latest CDS packages (`@coinbase/cds-mobile`, `@coinbase/cds-icons`, etc.)
+- TypeScript configuration
+- Example components demonstrating common UI patterns
+- Theme setup with CDS default theme
+- Navigation with React Navigation
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## Next steps
+
+After setting up your template, learn how to customize and extend CDS:
+
+- [Theming](/getting-started/theming) - Customize colors, spacing, and typography
+- [Installation](/getting-started/installation) - Manual installation and setup options
+
+</MDXArticle>
+</MDXSection>
diff --git a/apps/docs/docs/getting-started/templates/index.mdx b/apps/docs/docs/getting-started/templates/index.mdx
index c126ec318..821b28e69 100644
--- a/apps/docs/docs/getting-started/templates/index.mdx
+++ b/apps/docs/docs/getting-started/templates/index.mdx
@@ -1,7 +1,7 @@
 ---
 id: templates
 title: Templates
-platform_switcher_options: { web: true, mobile: false }
+platform_switcher_options: { web: true, mobile: true }
 hide_title: true
 ---
 
@@ -11,10 +11,17 @@ import { ContentHeader } from '@site/src/components/page/ContentHeader';
 import { ContentPageContainer } from '@site/src/components/page/ContentPageContainer';
 
 import WebContent, { toc as webContentToc } from './_webContent.mdx';
+import MobileContent, { toc as mobileContentToc } from './_mobileContent.mdx';
 
 import webMetadata from './webMetadata.json';
+import mobileMetadata from './mobileMetadata.json';
 
 <VStack gap={5}>
-  <ContentHeader title="Templates" webMetadata={webMetadata} />
-  <ContentPageContainer webContent={<WebContent />} webContentToc={webContentToc} />
+  <ContentHeader title="Templates" webMetadata={webMetadata} mobileMetadata={mobileMetadata} />
+  <ContentPageContainer
+    webContent={<WebContent />}
+    webContentToc={webContentToc}
+    mobileContent={<MobileContent />}
+    mobileContentToc={mobileContentToc}
+  />
 </VStack>
diff --git a/apps/docs/docs/getting-started/templates/mobileMetadata.json b/apps/docs/docs/getting-started/templates/mobileMetadata.json
new file mode 100644
index 000000000..da19f1de1
--- /dev/null
+++ b/apps/docs/docs/getting-started/templates/mobileMetadata.json
@@ -0,0 +1,3 @@
+{
+  "description": "Get started quickly with a pre-built Expo template configured with CDS components and best practices."
+}
diff --git a/apps/docs/static/img/logos/frameworks/expo_dark.png b/apps/docs/static/img/logos/frameworks/expo_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..52ae390f3bb6e7ebc2d35b86879e07ad9b3facd9
GIT binary patch
literal 7040
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

literal 0
HcmV?d00001

diff --git a/apps/docs/static/img/logos/frameworks/expo_light.png b/apps/docs/static/img/logos/frameworks/expo_light.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef1c5458bc6f88226a4cf536017a17ed4cec1186
GIT binary patch
literal 7041
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

literal 0
HcmV?d00001

diff --git a/templates/expo-app/.gitignore b/templates/expo-app/.gitignore
new file mode 100644
index 000000000..319aa00b9
--- /dev/null
+++ b/templates/expo-app/.gitignore
@@ -0,0 +1,33 @@
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
diff --git a/templates/expo-app/.nvmrc b/templates/expo-app/.nvmrc
new file mode 100644
index 000000000..2bd5a0a98
--- /dev/null
+++ b/templates/expo-app/.nvmrc
@@ -0,0 +1 @@
+22
diff --git a/templates/expo-app/.yarnrc.yml b/templates/expo-app/.yarnrc.yml
new file mode 100644
index 000000000..c3ff0bb6b
--- /dev/null
+++ b/templates/expo-app/.yarnrc.yml
@@ -0,0 +1,4 @@
+nodeLinker: node-modules
+
+
+
diff --git a/templates/expo-app/App.tsx b/templates/expo-app/App.tsx
new file mode 100644
index 000000000..55e97a1df
--- /dev/null
+++ b/templates/expo-app/App.tsx
@@ -0,0 +1,137 @@
+import React, { memo, useState, useCallback } from 'react';
+import { ScrollView } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useFonts } from 'expo-font';
+import { Inter_400Regular, Inter_600SemiBold } from '@expo-google-fonts/inter';
+
+import type { ColorScheme } from '@coinbase/cds-common';
+import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
+
+import { useTheme } from '@coinbase/cds-mobile';
+import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';
+import { VStack, HStack, Box } from '@coinbase/cds-mobile/layout';
+import { TabbedChips } from '@coinbase/cds-mobile/alpha/tabbed-chips/TabbedChips';
+import { PortalProvider } from '@coinbase/cds-mobile/overlays/PortalProvider';
+import { StatusBar, ThemeProvider } from '@coinbase/cds-mobile/system';
+
+import { Navbar } from './components/Navbar';
+import { AssetList } from './components/AssetList';
+import { CardList } from './components/CardList';
+import { AssetCarousel } from './components/AssetCarousel';
+import { AssetChart } from './components/AssetChart';
+import { TabBarButton } from './components/TabBarButton';
+
+const chipTabs = [
+  { id: 'all', label: 'All' },
+  { id: 'crypto', label: 'Crypto' },
+  { id: 'nfts', label: 'NFTs' },
+  { id: 'defi', label: 'DeFi' },
+  { id: 'earn', label: 'Earn' },
+];
+
+const CdsSafeAreaProvider = memo(({ children }: React.PropsWithChildren) => {
+  const theme = useTheme();
+  return (
+    <SafeAreaProvider style={{ backgroundColor: theme.color.bg }}>{children}</SafeAreaProvider>
+  );
+});
+
+export default function App() {
+  const [activeColorScheme, setActiveColorScheme] = useState<ColorScheme>('light');
+  const [fontsLoaded] = useFonts({
+    CoinbaseIcons: require('@coinbase/cds-icons/fonts/native/CoinbaseIcons.ttf'),
+    Inter_400Regular,
+    Inter_600SemiBold,
+  });
+
+  const toggleColorScheme = useCallback(
+    () => setActiveColorScheme((s) => (s === 'light' ? 'dark' : 'light')),
+    [],
+  );
+
+  if (!fontsLoaded) {
+    return null;
+  }
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <ThemeProvider activeColorScheme={activeColorScheme} theme={defaultTheme}>
+        <CdsSafeAreaProvider>
+          <PortalProvider>
+            <StatusBar />
+            <AppContent toggleColorScheme={toggleColorScheme} />
+          </PortalProvider>
+        </CdsSafeAreaProvider>
+      </ThemeProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+function AppContent({ toggleColorScheme }: { toggleColorScheme: () => void }) {
+  const [activeChip, setActiveChip] = useState<TabValue | null>(chipTabs[0]);
+  const [activeNavTab, setActiveNavTab] = useState('home');
+  const insets = useSafeAreaInsets();
+
+  return (
+    <VStack style={{ flex: 1 }} background="bg">
+      <Navbar toggleColorScheme={toggleColorScheme} />
+
+      <Box paddingX={2} paddingY={1}>
+        <TabbedChips
+          accessibilityLabel="Filter categories"
+          activeTab={activeChip}
+          onChange={setActiveChip}
+          tabs={chipTabs}
+        />
+      </Box>
+
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 24 }}>
+        <Box padding={2}>
+          <AssetChart />
+        </Box>
+
+        <Box paddingY={1}>
+          <AssetCarousel />
+        </Box>
+
+        <Box padding={2}>
+          <AssetList />
+        </Box>
+
+        <Box paddingY={1}>
+          <CardList />
+        </Box>
+      </ScrollView>
+
+      <Box borderedTop background="bg" style={{ paddingBottom: insets.bottom }}>
+        <HStack>
+          <TabBarButton
+            icon="home"
+            label="Home"
+            active={activeNavTab === 'home'}
+            onPress={() => setActiveNavTab('home')}
+          />
+          <TabBarButton
+            icon="sendReceive"
+            label="Trade"
+            active={activeNavTab === 'trade'}
+            onPress={() => setActiveNavTab('trade')}
+          />
+          <TabBarButton
+            icon="compass"
+            label="Explore"
+            active={activeNavTab === 'explore'}
+            onPress={() => setActiveNavTab('explore')}
+          />
+          <TabBarButton
+            icon="account"
+            label="Account"
+            active={activeNavTab === 'account'}
+            onPress={() => setActiveNavTab('account')}
+          />
+        </HStack>
+      </Box>
+    </VStack>
+  );
+}
diff --git a/templates/expo-app/README.md b/templates/expo-app/README.md
new file mode 100644
index 000000000..885febf8e
--- /dev/null
+++ b/templates/expo-app/README.md
@@ -0,0 +1,49 @@
+# Coinbase Design System - Expo Template
+
+A React Native mobile application template integrated with the Coinbase Design System (CDS).
+
+## Installation
+
+Use `gitpick` to create a new project from this template:
+
+```sh
+npx -y gitpick coinbase/cds/tree/master/templates/expo-app cds-expo
+cd cds-expo
+```
+
+## Setup
+
+We suggest [nvm](https://github.com/nvm-sh/nvm/tree/master) to manage Node.js versions. If you have it installed, you can use these commands to set the correct Node.js version. Using corepack ensures you have your package manager setup.
+
+```sh
+nvm install
+nvm use
+corepack enable
+yarn
+```
+
+## Development
+
+- `yarn start` - Start the Expo development server
+- `yarn ios` - Run on iOS simulator
+- `yarn android` - Run on Android emulator
+- `yarn web` - Run in web browser
+
+## Dev Builds
+
+Some CDS components require native modules that are not available in Expo Go. If you use any of the following components, you will need to create a [development build](https://docs.expo.dev/develop/development-builds/introduction/):
+
+- `DatePicker`
+- `openWebBrowser`
+- `AndroidNavigationBar`
+
+To create a development build:
+
+```sh
+npx expo prebuild
+npx expo run:ios   # or npx expo run:android
+```
+
+## Documentation
+
+Visit [cds.coinbase.com](https://cds.coinbase.com) for the latest CDS documentation and component examples.
diff --git a/templates/expo-app/app.json b/templates/expo-app/app.json
new file mode 100644
index 000000000..d5a0b64d7
--- /dev/null
+++ b/templates/expo-app/app.json
@@ -0,0 +1,15 @@
+{
+  "expo": {
+    "name": "cds-expo-app",
+    "slug": "cds-expo-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "userInterfaceStyle": "light",
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "backgroundColor": "#ffffff"
+    }
+  }
+}
diff --git a/templates/expo-app/babel.config.js b/templates/expo-app/babel.config.js
new file mode 100644
index 000000000..9d89e1311
--- /dev/null
+++ b/templates/expo-app/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};
diff --git a/templates/expo-app/components/AssetCarousel.tsx b/templates/expo-app/components/AssetCarousel.tsx
new file mode 100644
index 000000000..7bf31422f
--- /dev/null
+++ b/templates/expo-app/components/AssetCarousel.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { useTheme } from '@coinbase/cds-mobile';
+import { Carousel, CarouselItem } from '@coinbase/cds-mobile/carousel';
+import { MediaCard } from '@coinbase/cds-mobile/cards';
+import { RemoteImage } from '@coinbase/cds-mobile/media';
+import { Text } from '@coinbase/cds-mobile/typography';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+
+const assetList = Object.values(assets);
+
+export function AssetCarousel() {
+  const theme = useTheme();
+  const horizontalPadding = theme.space[2];
+  const horizontalGap = theme.space[2];
+
+  return (
+    <Carousel
+      loop
+      paginationVariant="dot"
+      title="Explore Assets"
+      snapMode="item"
+      styles={{
+        root: { paddingHorizontal: horizontalPadding },
+        carousel: { gap: horizontalGap },
+      }}
+    >
+      {assetList.map((asset) => (
+        <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
+          <MediaCard
+            renderAsPressable
+            accessibilityLabel={`View ${asset.name} details`}
+            thumbnail={
+              <RemoteImage
+                accessibilityLabel={asset.name}
+                shape="circle"
+                size="l"
+                source={asset.imageUrl}
+              />
+            }
+            title={asset.symbol}
+            subtitle={asset.name}
+            description={
+              <Text font="label2" color="fgPositive" numberOfLines={1}>
+                Explore
+              </Text>
+            }
+            onPress={() => {}}
+          />
+        </CarouselItem>
+      ))}
+    </Carousel>
+  );
+}
diff --git a/templates/expo-app/components/AssetChart.tsx b/templates/expo-app/components/AssetChart.tsx
new file mode 100644
index 000000000..3a465f47f
--- /dev/null
+++ b/templates/expo-app/components/AssetChart.tsx
@@ -0,0 +1,116 @@
+import React, { memo, useState, useCallback, useMemo, forwardRef } from 'react';
+
+import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
+import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { useTheme } from '@coinbase/cds-mobile';
+import { VStack } from '@coinbase/cds-mobile/layout';
+import { RemoteImage } from '@coinbase/cds-mobile/media';
+import { Text } from '@coinbase/cds-mobile/typography';
+import { SectionHeader } from '@coinbase/cds-mobile/section-header';
+import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
+import {
+  ChartBridgeProvider,
+  LineChart,
+  PeriodSelector,
+  PeriodSelectorActiveIndicator,
+} from '@coinbase/cds-mobile-visualization';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
+
+const btcColor = assets.btc.color;
+
+const tabs = [
+  { id: 'hour', label: '1H' },
+  { id: 'day', label: '1D' },
+  { id: 'week', label: '1W' },
+  { id: 'month', label: '1M' },
+  { id: 'year', label: '1Y' },
+  { id: 'all', label: 'All' },
+];
+
+const BTCActiveIndicator = memo((props: any) => {
+  return <PeriodSelectorActiveIndicator {...props} background={`${btcColor}1A`} />;
+});
+
+const BTCTab = memo(
+  forwardRef(({ label, ...props }: any, ref: any) => {
+    const { activeTab } = useTabsContext();
+    const isActive = activeTab?.id === props.id;
+    const theme = useTheme();
+
+    const wrappedLabel =
+      typeof label === 'string' ? (
+        <Text font="label1" dangerouslySetColor={isActive ? btcColor : theme.color.fg}>
+          {label}
+        </Text>
+      ) : (
+        label
+      );
+
+    return <SegmentedTab ref={ref} label={wrappedLabel} {...props} />;
+  }),
+);
+
+const priceFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+});
+
+function formatPrice(price: number) {
+  return priceFormatter.format(price);
+}
+
+export const AssetChart = memo(function AssetChart() {
+  const [timePeriod, setTimePeriod] = useState<TabValue>(tabs[0]);
+
+  const sparklineTimePeriodData = useMemo(() => {
+    return sparklineInteractiveData[timePeriod.id as keyof typeof sparklineInteractiveData];
+  }, [timePeriod]);
+
+  const sparklineValues = useMemo(() => {
+    return sparklineTimePeriodData.map((d) => d.value);
+  }, [sparklineTimePeriodData]);
+
+  const currentPrice =
+    sparklineInteractiveData.hour[sparklineInteractiveData.hour.length - 1].value;
+
+  const onPeriodChange = useCallback((period: TabValue | null) => {
+    setTimePeriod(period || tabs[0]);
+  }, []);
+
+  return (
+    <ChartBridgeProvider>
+      <VStack gap={2}>
+        <SectionHeader
+          balance={<Text font="title2">{formatPrice(currentPrice)}</Text>}
+          end={
+            <VStack justifyContent="center">
+              <RemoteImage shape="circle" size="xl" source={assets.btc.imageUrl} />
+            </VStack>
+          }
+          title={<Text font="title1">Bitcoin</Text>}
+        />
+        <LineChart
+          showArea
+          areaType="dotted"
+          height={200}
+          inset={{ top: 52 }}
+          series={[
+            {
+              id: 'btc',
+              data: sparklineValues,
+              color: btcColor,
+            },
+          ]}
+        />
+        <PeriodSelector
+          TabComponent={BTCTab}
+          TabsActiveIndicatorComponent={BTCActiveIndicator}
+          activeTab={timePeriod}
+          onChange={onPeriodChange}
+          tabs={tabs}
+        />
+      </VStack>
+    </ChartBridgeProvider>
+  );
+});
diff --git a/templates/expo-app/components/AssetList.tsx b/templates/expo-app/components/AssetList.tsx
new file mode 100644
index 000000000..f9f5a6616
--- /dev/null
+++ b/templates/expo-app/components/AssetList.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { VStack } from '@coinbase/cds-mobile/layout';
+import { Text } from '@coinbase/cds-mobile/typography';
+import { ListCell } from '@coinbase/cds-mobile/cells';
+import { Avatar } from '@coinbase/cds-mobile/media';
+import { assets as cdsAssets } from '@coinbase/cds-common/internal/data/assets';
+
+const assetData = [
+  {
+    key: 'btc',
+    name: 'Bitcoin',
+    symbol: 'BTC',
+    price: '$67,432.18',
+    change: '+2.41%',
+  },
+  {
+    key: 'eth',
+    name: 'Ethereum',
+    symbol: 'ETH',
+    price: '$3,521.90',
+    change: '+1.83%',
+  },
+  {
+    key: 'ada',
+    name: 'Cardano',
+    symbol: 'ADA',
+    price: '$0.6231',
+    change: '-0.82%',
+  },
+] as const;
+
+type AssetKey = keyof typeof cdsAssets;
+
+export function AssetList() {
+  return (
+    <VStack gap={0}>
+      <Text font="title3" style={{ paddingVertical: 8 }}>
+        Your assets
+      </Text>
+      {assetData.map((asset) => {
+        const cdsAsset = cdsAssets[asset.key as AssetKey];
+        return (
+          <ListCell
+            key={asset.symbol}
+            title={asset.name}
+            subtitle={asset.symbol}
+            detail={asset.price}
+            subdetail={
+              <Text
+                font="label2"
+                color={asset.change.startsWith('+') ? 'fgPositive' : 'fgNegative'}
+              >
+                {asset.change}
+              </Text>
+            }
+            media={
+              <Avatar src={cdsAsset?.imageUrl ?? ''} name={asset.name} size="l" shape="circle" />
+            }
+            accessory="arrow"
+            onPress={() => {}}
+          />
+        );
+      })}
+    </VStack>
+  );
+}
diff --git a/templates/expo-app/components/CardList.tsx b/templates/expo-app/components/CardList.tsx
new file mode 100644
index 000000000..01652763f
--- /dev/null
+++ b/templates/expo-app/components/CardList.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Dimensions } from 'react-native';
+
+import { useTheme } from '@coinbase/cds-mobile';
+import { Carousel, CarouselItem } from '@coinbase/cds-mobile/carousel';
+import { MessagingCard } from '@coinbase/cds-mobile/cards';
+import { Pictogram } from '@coinbase/cds-mobile/illustrations';
+import { Button } from '@coinbase/cds-mobile/buttons';
+
+export function CardList() {
+  const theme = useTheme();
+  const windowWidth = Dimensions.get('window').width;
+  const horizontalPadding = theme.space[2];
+  const horizontalGap = theme.space[2];
+  const carouselWidth = windowWidth - horizontalPadding * 2;
+  const itemWidth = (carouselWidth - horizontalGap) / 1.1;
+
+  return (
+    <Carousel
+      paginationVariant="dot"
+      title="For you"
+      styles={{
+        root: { paddingHorizontal: horizontalPadding },
+        carousel: { gap: horizontalGap },
+      }}
+    >
+      <CarouselItem id="recurring-buys" width={itemWidth} accessibilityLabel="Recurring buys">
+        <MessagingCard
+          type="upsell"
+          title="Recurring buys"
+          description="Set up automatic purchases for your favorite assets on a daily, weekly, or monthly schedule."
+          media={
+            <Pictogram
+              accessibilityLabel="Recurring purchases"
+              dimension="48x48"
+              name="recurringPurchases"
+            />
+          }
+          mediaPlacement="end"
+          action="Get started"
+          onActionButtonPress={() => {}}
+          onDismissButtonPress={() => {}}
+        />
+      </CarouselItem>
+
+      <CarouselItem id="earn-rewards" width={itemWidth} accessibilityLabel="Earn rewards">
+        <MessagingCard
+          type="nudge"
+          title="Earn rewards"
+          description="Earn up to 3.29% APR on your ETH by staking it on Coinbase."
+          media={<Pictogram accessibilityLabel="Wallet" dimension="48x48" name="wallet" />}
+          mediaPlacement="end"
+          action={
+            <Button variant="secondary" compact>
+              Start earning
+            </Button>
+          }
+          onDismissButtonPress={() => {}}
+        />
+      </CarouselItem>
+
+      <CarouselItem id="learn-crypto" width={itemWidth} accessibilityLabel="Learn about crypto">
+        <MessagingCard
+          type="upsell"
+          title="Learn & earn"
+          description="Watch short videos and earn free crypto while learning about blockchain."
+          media={
+            <Pictogram
+              accessibilityLabel="Learning"
+              dimension="48x48"
+              name="learningRewardsProduct"
+            />
+          }
+          mediaPlacement="end"
+          action="Start learning"
+          onActionButtonPress={() => {}}
+          onDismissButtonPress={() => {}}
+        />
+      </CarouselItem>
+    </Carousel>
+  );
+}
diff --git a/templates/expo-app/components/Navbar.tsx b/templates/expo-app/components/Navbar.tsx
new file mode 100644
index 000000000..c66754bf6
--- /dev/null
+++ b/templates/expo-app/components/Navbar.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useTheme } from '@coinbase/cds-mobile';
+import { HStack, Box } from '@coinbase/cds-mobile/layout';
+import { Avatar } from '@coinbase/cds-mobile/media';
+import { TopNavBar, NavBarIconButton, NavigationTitle } from '@coinbase/cds-mobile/navigation';
+
+export function Navbar({ toggleColorScheme }: { toggleColorScheme: () => void }) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const isDark = theme.activeColorScheme === 'dark';
+
+  return (
+    <Box style={{ paddingTop: insets.top }} background="bg">
+      <TopNavBar
+        start={<Avatar name="User" size="l" shape="circle" />}
+        end={
+          <HStack>
+            <NavBarIconButton
+              name={isDark ? 'moon' : 'light'}
+              accessibilityLabel="Toggle color scheme"
+              onPress={toggleColorScheme}
+            />
+            <NavBarIconButton name="bell" accessibilityLabel="Notifications" />
+          </HStack>
+        }
+      >
+        <NavigationTitle>Home</NavigationTitle>
+      </TopNavBar>
+    </Box>
+  );
+}
diff --git a/templates/expo-app/components/TabBarButton.tsx b/templates/expo-app/components/TabBarButton.tsx
new file mode 100644
index 000000000..71aeaec06
--- /dev/null
+++ b/templates/expo-app/components/TabBarButton.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Pressable, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '@coinbase/cds-mobile';
+import { VStack } from '@coinbase/cds-mobile/layout';
+import { Icon } from '@coinbase/cds-mobile/icons';
+import { Text } from '@coinbase/cds-mobile/typography';
+import type { IconName } from '@coinbase/cds-common/types';
+
+export type TabBarButtonProps = {
+  icon: IconName;
+  label: string;
+  active?: boolean;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function TabBarButton({ icon, label, active = false, onPress, style }: TabBarButtonProps) {
+  const theme = useTheme();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityLabel={label}
+      accessibilityRole="tab"
+      style={[
+        {
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingVertical: theme.space[1],
+        },
+        style,
+      ]}
+    >
+      <VStack alignItems="center" gap={0.25}>
+        <Icon name={icon} size="s" color={active ? 'fgPrimary' : 'fgMuted'} active={active} />
+        <Text font="legal" color={active ? 'fgPrimary' : 'fgMuted'} numberOfLines={1}>
+          {label}
+        </Text>
+      </VStack>
+    </Pressable>
+  );
+}
diff --git a/templates/expo-app/metro.config.js b/templates/expo-app/metro.config.js
new file mode 100644
index 000000000..a49e94d80
--- /dev/null
+++ b/templates/expo-app/metro.config.js
@@ -0,0 +1,23 @@
+const path = require('path');
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+config.resolver.unstable_enablePackageExports = true;
+
+// Force @react-spring/native to use its CJS entry point.
+// The ESM (.modern.mjs) entry uses a __require("react-native") polyfill
+// that Metro cannot resolve when package exports are enabled.
+const originalResolveRequest = config.resolver.resolveRequest;
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (moduleName === '@react-spring/native') {
+    return {
+      type: 'sourceFile',
+      filePath: path.resolve(__dirname, 'node_modules/@react-spring/native/dist/cjs/index.js'),
+    };
+  }
+  const resolve = originalResolveRequest ?? context.resolveRequest;
+  return resolve(context, moduleName, platform);
+};
+
+module.exports = config;
diff --git a/templates/expo-app/package.json b/templates/expo-app/package.json
new file mode 100644
index 000000000..3a4d62414
--- /dev/null
+++ b/templates/expo-app/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "cds-expo-app",
+  "main": "expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo-google-fonts/inter": "^0.2.3",
+    "@coinbase/cds-common": "^8",
+    "@coinbase/cds-icons": "^5",
+    "@coinbase/cds-illustrations": "^4",
+    "@coinbase/cds-mobile": "^8",
+    "@coinbase/cds-mobile-visualization": "beta",
+    "@dotlottie/react-player": "1.6.1",
+    "@lottiefiles/dotlottie-react": "0.6.5",
+    "@lottiefiles/react-lottie-player": "3.5.3",
+    "@react-navigation/native": "6.1.17",
+    "@react-navigation/native-stack": "6.9.26",
+    "@react-navigation/stack": "6.4.1",
+    "@shopify/react-native-skia": "1.2.3",
+    "expo": "~51.0.28",
+    "expo-status-bar": "~1.12.1",
+    "lottie-react-native": "6.7.0",
+    "metro": "0.80.12",
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-date-picker": "5.0.13",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-inappbrowser-reborn": "3.7.0",
+    "react-native-linear-gradient": "2.8.3",
+    "react-native-navigation-bar-color": "2.0.2",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-svg": "15.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.0",
+    "typescript": "~5.3.0"
+  },
+  "private": true,
+  "packageManager": "yarn@4.9.2"
+}
diff --git a/templates/expo-app/tsconfig.json b/templates/expo-app/tsconfig.json
new file mode 100644
index 000000000..ed8ca65f9
--- /dev/null
+++ b/templates/expo-app/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "expo/tsconfig.base.json",
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler"
+  }
+}