diff --git a/src/pattern-library/components/patterns/prototype/TabbedDialogPage.tsx b/src/pattern-library/components/patterns/prototype/TabbedDialogPage.tsx
new file mode 100644
index 000000000..8ba9e57af
--- /dev/null
+++ b/src/pattern-library/components/patterns/prototype/TabbedDialogPage.tsx
@@ -0,0 +1,215 @@
+//import type { ComponentChildren } from 'preact';
+import classnames from 'classnames';
+import type { JSX } from 'preact';
+import { useState } from 'preact/hooks';
+
+import {
+  Button,
+  CopyIcon,
+  IconButton,
+  Input,
+  InputGroup,
+  TabList,
+  Tab,
+  CancelIcon,
+  Card,
+  CardActions,
+  CardTitle,
+  SocialTwitterIcon,
+  SocialFacebookIcon,
+  EmailIcon,
+} from '../../../../';
+import type { PresentationalProps } from '../../../../types';
+import Library from '../../Library';
+import Dialog from './import-export/Dialog';
+
+type DividerProps = PresentationalProps & {
+  variant: 'full' | 'center' | 'custom';
+} & JSX.HTMLAttributes<HTMLElement>;
+
+function Divider({ variant }: DividerProps) {
+  return (
+    <hr
+      className={classnames('border-t border-px h-px', {
+        'mx-2': variant === 'center',
+      })}
+    />
+  );
+}
+
+export default function TabbedDialogPage() {
+  const [panelOpen, setPanelOpen] = useState(false);
+  const [selectedTab, setSelectedTab] = useState('share');
+  return (
+    <Library.Page title="Export/Import Annotations">
+      <Library.Section title="Tabbed Panel (Dialog) Pattern">
+        <p>TODO</p>
+      </Library.Section>
+      <Library.Section title="Import/Export UI prototyping">
+        <Library.Callout>
+          NB: This section is a work in progress.
+        </Library.Callout>
+        <Library.Pattern title="Adding Export to the Share Panel">
+          <Library.Callout>
+            NB: The disabled <em>Import</em> tab is rendered in the prototyped
+            dialog here to demonstrate what a disabled tab might look like, but
+            would not appear to users in this manner.
+          </Library.Callout>
+          <Library.Demo>
+            <div className="w-full bg-grey-2 p-4">
+              <Button onClick={() => setPanelOpen(!panelOpen)}>
+                {panelOpen ? 'Close' : 'Show'} share panel
+              </Button>
+
+              <div className="w-[410px] mx-auto text-[13px] leading-normal">
+                {panelOpen && (
+                  <Dialog
+                    variant="custom"
+                    title="Share annotations"
+                    onClose={() => setPanelOpen(false)}
+                    restoreFocus
+                  >
+                    <div
+                      data-testid="tabbed-header"
+                      className="flex items-center"
+                    >
+                      <TabList classes="grow gap-x-1 -mb-[1px] z-2">
+                        <Tab
+                          aria-controls="share-panel"
+                          variant="tab"
+                          selected={selectedTab === 'share'}
+                          textContent="Share"
+                          onClick={() => setSelectedTab('share')}
+                        >
+                          Share
+                        </Tab>
+                        <Tab
+                          aria-controls="export-panel"
+                          variant="tab"
+                          selected={selectedTab === 'export'}
+                          textContent="Export"
+                          onClick={() => setSelectedTab('export')}
+                        >
+                          Export
+                        </Tab>
+                        <Tab
+                          aria-controls="import-panel"
+                          disabled
+                          variant="tab"
+                          selected={selectedTab === 'import'}
+                          textContent="Import"
+                          onClick={() => setSelectedTab('import')}
+                        >
+                          Import
+                        </Tab>
+                      </TabList>
+                      <IconButton
+                        classes="text-[16px] text-grey-6 hover:text-grey-7 hover:bg-grey-3/50"
+                        title="Close"
+                        icon={CancelIcon}
+                        onClick={() => setPanelOpen(false)}
+                        variant="custom"
+                        size="sm"
+                      />
+                    </div>
+                    <Card>
+                      <div
+                        id="share-panel"
+                        role="tabpanel"
+                        className={classnames(
+                          'p-3 focus-visible-ring ring-inset',
+                          {
+                            hidden: selectedTab !== 'share',
+                          }
+                        )}
+                        tabIndex={-1}
+                      >
+                        <CardTitle>Share annotations from GroupName</CardTitle>
+                        <div className="space-y-3 pt-2">
+                          <p>
+                            <strong>
+                              Use this link to share these annotations with
+                              anyone:
+                            </strong>
+                          </p>
+                          <InputGroup>
+                            <Input
+                              id="share-annotations-url"
+                              value="https://www.examle.com/fake"
+                            />
+                            <IconButton
+                              icon={CopyIcon}
+                              variant="dark"
+                              title="copy"
+                            />
+                          </InputGroup>
+                          <Divider variant="full" />
+                          <ul className="flex flex-row gap-x-4 items-center justify-center text-grey-6">
+                            <li>
+                              <SocialTwitterIcon className="w-6 h-6" />
+                            </li>
+                            <li>
+                              <SocialFacebookIcon className="w-6 h-6" />
+                            </li>
+                            <li>
+                              <EmailIcon className="w-6 h-6" />
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                      <div
+                        id="export-panel"
+                        role="tabpanel"
+                        tabIndex={-1}
+                        className={classnames(
+                          'p-3 focus-visible-ring ring-inset',
+                          {
+                            hidden: selectedTab !== 'export',
+                          }
+                        )}
+                      >
+                        <CardTitle>Export from GroupName</CardTitle>
+                        <div className="space-y-3 pt-2">
+                          <p>
+                            <strong>2 annotations</strong> will be exported with
+                            the following file name:
+                          </p>
+                          <Input
+                            id="export-filename"
+                            value="2023-07-10-hypothesis-export"
+                          />
+                          <CardActions>
+                            <Button variant="primary">Export</Button>
+                          </CardActions>
+                        </div>
+                      </div>
+                      <div
+                        id="import-panel"
+                        role="tabpanel"
+                        tabIndex={-1}
+                        className={classnames(
+                          'p-3 focus-visible-ring ring-inset',
+                          {
+                            hidden: selectedTab !== 'import',
+                          }
+                        )}
+                      >
+                        <CardTitle>Import into GroupName</CardTitle>
+                        <div className="mt-2 space-y-3">
+                          <p>
+                            TODO: We will mock this up when we work on the
+                            import part of this project.
+                          </p>
+                        </div>
+                      </div>
+                    </Card>
+                  </Dialog>
+                )}
+              </div>
+            </div>
+          </Library.Demo>
+        </Library.Pattern>
+      </Library.Section>
+    </Library.Page>
+  );
+}
diff --git a/src/pattern-library/components/patterns/prototype/import-export/Dialog.tsx b/src/pattern-library/components/patterns/prototype/import-export/Dialog.tsx
new file mode 100644
index 000000000..987b14fa1
--- /dev/null
+++ b/src/pattern-library/components/patterns/prototype/import-export/Dialog.tsx
@@ -0,0 +1,244 @@
+import classnames from 'classnames';
+import type { RefObject } from 'preact';
+import { Fragment } from 'preact';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'preact/hooks';
+
+// NB: Imports changed here
+import {
+  useClickAway,
+  useFocusAway,
+  useKeyPress,
+  useSyncedRef,
+  Panel,
+} from '../../../../../';
+import type {
+  PresentationalProps,
+  TransitionComponent,
+  PanelProps,
+} from '../../../../../';
+import { useUniqueId } from '../../../../../hooks/use-unique-id';
+import { downcastRef } from '../../../../../util/typing';
+
+type ComponentProps = {
+  closeOnClickAway?: boolean;
+  closeOnEscape?: boolean;
+  closeOnFocusAway?: boolean;
+  /**
+   * Dialog _should_ be provided with a close handler. We have a few edge use
+   * cases, however, in which we need to render a "non-closeable" modal dialog.
+   */
+  onClose?: () => void;
+
+  /**
+   * Element that should take focus when the Dialog is first rendered. When not
+   * provided ("auto"), the dialog's outer element will take focus. Setting this
+   * prop to "manual" will opt out of focus routing.
+   */
+  initialFocus?: RefObject<HTMLOrSVGElement | null> | 'auto' | 'manual';
+
+  /**
+   * Restore focus to previously-focused element when unmounted/closed
+   */
+  restoreFocus?: boolean;
+
+  /**
+   * Optional TransitionComponent for open (mount) and close (unmount) transitions
+   */
+  transitionComponent?: TransitionComponent;
+
+  variant?: 'panel' | 'custom';
+};
+
+// This component forwards a number of props on to `Panel` but always sets the
+// `fullWidthHeader` prop to `true`.
+export type DialogProps = PresentationalProps &
+  ComponentProps &
+  Omit<PanelProps, 'fullWidthHeader'>;
+
+/**
+ * Customized version of Dialog to support tabbed dialogs. WIP. Allows for
+ * content other than `Panel`.
+ */
+const Dialog = function Dialog({
+  closeOnClickAway = false,
+  closeOnEscape = false,
+  closeOnFocusAway = false,
+  children,
+  initialFocus = 'auto',
+  restoreFocus = false,
+  transitionComponent: TransitionComponent,
+
+  variant = 'panel',
+
+  classes,
+  elementRef,
+
+  // Forwarded to Panel
+  buttons,
+  icon,
+  onClose,
+  paddingSize = 'md',
+  scrollable = true,
+  title,
+
+  ...htmlAttributes
+}: DialogProps) {
+  const modalRef = useSyncedRef(elementRef);
+  const restoreFocusEl = useRef<HTMLElement | null>(
+    document.activeElement as HTMLElement | null
+  );
+  const [transitionComponentVisible, setTransitionComponentVisible] =
+    useState(false);
+  const isClosableDialog = !!onClose;
+
+  const closeHandler = useCallback(() => {
+    if (TransitionComponent) {
+      // When a TransitionComponent is provided, the actual "onClose" will be
+      // called by that component, once the "out" transition has finished
+      setTransitionComponentVisible(false);
+    } else {
+      onClose?.();
+    }
+  }, [onClose, TransitionComponent]);
+
+  const initializeDialog = useCallback(() => {
+    if (initialFocus === 'manual') {
+      return;
+    }
+    if (initialFocus === 'auto') {
+      // An explicit `initialFocus` has not been set, so use automatic focus
+      // handling. Modern accessibility guidance is to focus the dialog itself
+      // rather than trying to be smart about focusing a particular control
+      // within the dialog.
+      modalRef.current?.focus();
+      return;
+    }
+
+    const focusEl = initialFocus?.current as HTMLElement & {
+      disabled?: boolean;
+    };
+
+    if (focusEl && !focusEl.disabled) {
+      focusEl.focus();
+    } else {
+      // Fall back to focusing the modal itself
+      modalRef.current?.focus();
+    }
+  }, [initialFocus, modalRef]);
+
+  const onTransitionEnd = (direction: 'in' | 'out') => {
+    if (direction === 'in') {
+      initializeDialog();
+    } else {
+      onClose?.();
+    }
+  };
+
+  useClickAway(modalRef, closeHandler, {
+    enabled: closeOnClickAway,
+  });
+
+  useKeyPress(['Escape'], closeHandler, {
+    enabled: closeOnEscape,
+  });
+
+  useFocusAway(modalRef, closeHandler, {
+    enabled: closeOnFocusAway,
+  });
+
+  const dialogDescriptionId = useUniqueId('dialog-description');
+  const Wrapper = useMemo(
+    () => TransitionComponent ?? Fragment,
+    [TransitionComponent]
+  );
+
+  useEffect(() => {
+    setTransitionComponentVisible(true);
+    if (!TransitionComponent) {
+      initializeDialog();
+    }
+
+    // We only want to run this effect once when the dialog is mounted.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useLayoutEffect(
+    /**
+     * Restore focus when component is unmounted, if `restoreFocus` is set.
+     */
+    () => {
+      const restoreFocusTo = restoreFocusEl.current;
+      return () => {
+        if (restoreFocus && restoreFocusTo) {
+          restoreFocusTo.focus();
+        }
+      };
+    },
+    // We only want to run this effect once when the dialog is mounted.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  useLayoutEffect(
+    /**
+     * Try to assign the dialog an accessible description, using the content of
+     * the first paragraph of text within it.
+     *
+     * A limitation of this approach is that it doesn't update if the dialog's
+     * content changes after the initial render.
+     */
+    () => {
+      const description = modalRef?.current?.querySelector('p');
+      if (description) {
+        description.id = dialogDescriptionId;
+        modalRef.current!.setAttribute('aria-describedby', dialogDescriptionId);
+      }
+    },
+    [dialogDescriptionId, modalRef]
+  );
+
+  return (
+    <Wrapper
+      direction={transitionComponentVisible ? 'in' : 'out'}
+      onTransitionEnd={onTransitionEnd}
+    >
+      <div
+        data-component="Dialog"
+        tabIndex={-1}
+        // NB: Role can be overridden with an HTML attribute; this is purposeful
+        role="dialog"
+        {...htmlAttributes}
+        className={classnames(
+          // Column-flex layout to constrain content to max-height
+          'focus-visible-ring flex flex-col',
+          classes
+        )}
+        ref={downcastRef(modalRef)}
+      >
+        {variant === 'panel' && (
+          <Panel
+            buttons={buttons}
+            fullWidthHeader={true}
+            icon={icon}
+            onClose={isClosableDialog ? closeHandler : undefined}
+            paddingSize={paddingSize}
+            title={title}
+            scrollable={scrollable}
+          >
+            {children}
+          </Panel>
+        )}
+        {variant === 'custom' && <>{children}</>}
+      </div>
+    </Wrapper>
+  );
+};
+
+export default Dialog;
diff --git a/src/pattern-library/routes.ts b/src/pattern-library/routes.ts
index 083e8de01..853327744 100644
--- a/src/pattern-library/routes.ts
+++ b/src/pattern-library/routes.ts
@@ -31,6 +31,7 @@ import TabPage from './components/patterns/navigation/TabPage';
 import LMSContentButtonPage from './components/patterns/prototype/LMSContentButtonPage';
 import LMSContentSelectionPage from './components/patterns/prototype/LMSContentSelectionPage';
 import SharedAnnotationsPage from './components/patterns/prototype/SharedAnnotationsPage';
+import TabbedDialogPage from './components/patterns/prototype/TabbedDialogPage';
 import SliderPage from './components/patterns/transition/SliderPage';
 
 export const componentGroups = {
@@ -240,6 +241,12 @@ const routes: PlaygroundRoute[] = [
     component: SliderPage,
     route: '/transitions-slider',
   },
+  {
+    title: 'Import/Export Dialog',
+    group: 'prototype',
+    component: TabbedDialogPage,
+    route: '/tabbed-share-dialog',
+  },
   {
     title: 'LMS: Content Button',
     group: 'prototype',