From d4a2b16270cda816027a18c2fd82f60769897ebd Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 14:20:37 +0100
Subject: [PATCH 01/15] Move examples to app directory

---
 polaris.shopify.com/.vscode/settings.json     |  4 ++++
 .../account-connection-default/page.tsx}      |  4 +++-
 .../action-list-in-a-popover/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../action-list-with-help-text/page.tsx}      |  4 +++-
 .../action-list-with-icons-or-image/page.tsx} |  4 +++-
 .../action-list-with-sections/page.tsx}       |  4 +++-
 .../examples/alpha-card-default/page.tsx}     |  4 +++-
 .../alpha-card-with-rounded-corners/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../alpha-card-with-varying-padding/page.tsx} |  4 +++-
 .../examples/alpha-stack-default/page.tsx}    |  4 +++-
 .../examples/alpha-stack-with-align/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/alpha-stack-with-gap/page.tsx}   |  4 +++-
 .../examples/app-provider-default/page.tsx}   |  4 +++-
 .../examples/app-provider-with-i18n/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/autocomplete-default/page.tsx}   |  4 +++-
 .../autocomplete-with-action/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../autocomplete-with-empty-state/page.tsx}   |  4 +++-
 .../autocomplete-with-lazy-loading/page.tsx}  |  4 +++-
 .../autocomplete-with-loading/page.tsx}       |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../autocomplete-with-multiple-tags/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/avatar-default/page.tsx}         |  4 +++-
 .../examples/avatar-extra-small/page.tsx}     |  4 +++-
 .../examples/avatar-square/page.tsx}          |  4 +++-
 .../examples/badge-attention/page.tsx}        |  4 +++-
 .../examples/badge-complete/page.tsx}         |  4 +++-
 .../examples/badge-critical/page.tsx}         |  4 +++-
 .../examples/badge-default/page.tsx}          |  4 +++-
 .../examples/badge-incomplete/page.tsx}       |  4 +++-
 .../examples/badge-informational/page.tsx}    |  4 +++-
 .../badge-partially-complete/page.tsx}        |  4 +++-
 .../examples/badge-small/page.tsx}            |  4 +++-
 .../examples/badge-success/page.tsx}          |  4 +++-
 .../examples/badge-warning/page.tsx}          |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/banner-critical/page.tsx}        |  4 +++-
 .../examples/banner-default/page.tsx}         |  4 +++-
 .../examples/banner-dismissible/page.tsx}     |  4 +++-
 .../examples/banner-in-a-card/page.tsx}       |  4 +++-
 .../examples/banner-in-a-modal/page.tsx}      |  4 +++-
 .../examples/banner-informational/page.tsx}   |  4 +++-
 .../examples/banner-success/page.tsx}         |  4 +++-
 .../examples/banner-warning/page.tsx}         |  4 +++-
 .../examples/banner-with-focus/page.tsx}      |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/bleed-all-directions/page.tsx}   |  4 +++-
 .../examples/bleed-horizontal/page.tsx}       |  4 +++-
 .../bleed-specific-direction/page.tsx}        |  4 +++-
 .../examples/bleed-vertical/page.tsx}         |  4 +++-
 .../examples/box-default/page.tsx}            |  4 +++-
 .../examples/box-with-border-radius/page.tsx} |  4 +++-
 .../examples/box-with-border/page.tsx}        |  4 +++-
 .../examples/box-with-color/page.tsx}         |  4 +++-
 .../examples/box-with-padding/page.tsx}       |  4 +++-
 .../examples/box-with-shadow/page.tsx}        |  4 +++-
 .../examples/button-default/page.tsx}         |  4 +++-
 .../examples/button-destructive/page.tsx}     |  4 +++-
 .../examples/button-disabled-state/page.tsx}  |  4 +++-
 .../examples/button-full-width/page.tsx}      |  4 +++-
 .../examples/button-group-default/page.tsx}   |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/button-large/page.tsx}           |  4 +++-
 .../examples/button-loading-state/page.tsx}   |  4 +++-
 .../button-outline-monochrome/page.tsx}       |  4 +++-
 .../examples/button-outline/page.tsx}         |  4 +++-
 .../button-plain-destructive/page.tsx}        |  4 +++-
 .../button-plain-disclosure/page.tsx}         |  4 +++-
 .../button-plain-monochrome/page.tsx}         |  4 +++-
 .../examples/button-plain/page.tsx}           |  4 +++-
 .../examples/button-pressed/page.tsx}         |  4 +++-
 .../examples/button-primary/page.tsx}         |  4 +++-
 .../button-right-aligned-disclosure/page.tsx} |  4 +++-
 .../button-select-disclosure/page.tsx}        |  4 +++-
 .../examples/button-slim/page.tsx}            |  4 +++-
 .../examples/button-split/page.tsx}           |  4 +++-
 .../examples/button-text-aligned/page.tsx}    |  4 +++-
 .../examples/callout-card-default/page.tsx}   |  4 +++-
 .../callout-card-dismissable/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/card-default/page.tsx}           |  4 +++-
 .../card-with-a-subdued-section/page.tsx}     |  4 +++-
 .../examples/card-with-all-elements/page.tsx} |  4 +++-
 .../card-with-custom-footer-actions/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../card-with-destructive-action/page.tsx}    |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../card-with-flushed-sections/page.tsx}      |  4 +++-
 .../card-with-footer-actions/page.tsx}        |  4 +++-
 .../card-with-header-actions/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../card-with-multiple-sections/page.tsx}     |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../card-with-sections-and-actions/page.tsx}  |  4 +++-
 .../card-with-separate-header/page.tsx}       |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/card-with-subsection/page.tsx}   |  4 +++-
 .../examples/checkbox-default/page.tsx}       |  4 +++-
 .../examples/choice-list-default/page.tsx}    |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/choice-list-with-error/page.tsx} |  4 +++-
 .../choice-list-with-multi-choice/page.tsx}   |  4 +++-
 .../examples/collapsible-default/page.tsx}    |  4 +++-
 .../examples/color-picker-default/page.tsx}   |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/columns-default/page.tsx}        |  4 +++-
 .../columns-with-fixed-widths/page.tsx}       |  4 +++-
 .../columns-with-set-number/page.tsx}         |  4 +++-
 .../columns-with-varying-gap/page.tsx}        |  4 +++-
 .../examples/combobox-default/page.tsx}       |  4 +++-
 .../examples/combobox-with-loading/page.tsx}  |  4 +++-
 .../combobox-with-manual-selection/page.tsx}  |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../combobox-with-multi-select/page.tsx}      |  4 +++-
 .../contextual-save-bar-default/page.tsx}     |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/data-table-default/page.tsx}     |  4 +++-
 .../examples/data-table-sortable/page.tsx}    |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/data-table-with-footer/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/date-picker-default/page.tsx}    |  4 +++-
 .../date-picker-multi-month-ranged/page.tsx}  |  4 +++-
 .../examples/date-picker-ranged/page.tsx}     |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../description-list-default/page.tsx}        |  4 +++-
 .../divider-with-border-styles/page.tsx}      |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/drop-zone-default/page.tsx}      |  4 +++-
 .../examples/drop-zone-medium-sized/page.tsx} |  4 +++-
 .../examples/drop-zone-nested/page.tsx}       |  4 +++-
 .../examples/drop-zone-small-sized/page.tsx}  |  4 +++-
 .../examples/drop-zone-with-a-label/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../drop-zone-with-drop-on-page/page.tsx}     |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/empty-state-default/page.tsx}    |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/exception-list-default/page.tsx} |  4 +++-
 .../examples/filters-disabled/page.tsx}       |  4 +++-
 .../examples/filters-some-disabled/page.tsx}  |  4 +++-
 .../filters-with-a-data-table/page.tsx}       |  4 +++-
 .../filters-with-a-resource-list/page.tsx}    |  4 +++-
 .../filters-with-children-content/page.tsx}   |  4 +++-
 .../examples/filters-with-help-text/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../filters-with-query-field-hidden/page.tsx} |  4 +++-
 .../filters-without-clear-button/page.tsx}    |  4 +++-
 .../examples/footer-help-default/page.tsx}    |  4 +++-
 .../examples/form-custom-on-submit/page.tsx}  |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/form-layout-default/page.tsx}    |  4 +++-
 .../form-layout-field-group/page.tsx}         |  4 +++-
 .../form-without-native-validation/page.tsx}  |  4 +++-
 .../frame-in-an-application/page.tsx}         |  4 +++-
 .../examples/frame-with-an-offset/page.tsx}   |  4 +++-
 .../fullscreen-bar-no-children/page.tsx}      |  4 +++-
 .../fullscreen-bar-with-children/page.tsx}    |  4 +++-
 .../examples/grid-custom-layout/page.tsx}     |  4 +++-
 .../grid-three-one-third-column/page.tsx}     |  4 +++-
 .../examples/grid-two-column/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/icon-colored/page.tsx}           |  4 +++-
 .../examples/icon-default/page.tsx}           |  4 +++-
 .../examples/icon-with-backdrop/page.tsx}     |  4 +++-
 .../icon-with-custom-svg-and-color/page.tsx}  |  4 +++-
 .../examples/icon-with-custom-svg/page.tsx}   |  4 +++-
 .../examples/index-table-default/page.tsx}    |  4 +++-
 .../examples/index-table-flush/page.tsx}      |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../index-table-small-screen/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../index-table-with-bulk-actions/page.tsx}   |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../index-table-with-empty-state/page.tsx}    |  4 +++-
 .../index-table-with-filtering/page.tsx}      |  4 +++-
 .../index-table-with-loading-state/page.tsx}  |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../index-table-with-row-status/page.tsx}     |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../index-table-without-checkboxes/page.tsx}  |  4 +++-
 .../examples/inline-default/page.tsx}         |  4 +++-
 .../examples/inline-error-default/page.tsx}   |  4 +++-
 .../examples/inline-with-gap/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../inline-with-non-wrapping/page.tsx}        |  4 +++-
 .../inline-with-vertical-alignment/page.tsx}  |  4 +++-
 .../examples/keyboard-key-default/page.tsx}   |  4 +++-
 .../keyboard-key-list-of-shortcuts/page.tsx}  |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../layout-annotated-with-sections/page.tsx}  |  4 +++-
 .../examples/layout-annotated/page.tsx}       |  4 +++-
 .../examples/layout-one-column/page.tsx}      |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 polaris.shopify.com/app/examples/layout.tsx   |  7 +++++++
 .../examples/legacy-card-default/page.tsx}    |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../legacy-card-with-all-elements/page.tsx}   |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../legacy-card-with-footer-actions/page.tsx} |  4 +++-
 .../legacy-card-with-header-actions/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../legacy-card-with-subsection/page.tsx}     |  4 +++-
 .../examples/legacy-stack-default/page.tsx}   |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../legacy-stack-non-wrapping/page.tsx}       |  4 +++-
 .../examples/legacy-stack-spacing/page.tsx}   |  4 +++-
 .../legacy-stack-vertical-centering/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/link-default/page.tsx}           |  4 +++-
 .../examples/link-external/page.tsx}          |  4 +++-
 .../link-monochrome-in-a-banner/page.tsx}     |  4 +++-
 .../examples/link-monochrome/page.tsx}        |  4 +++-
 .../examples/list-bulleted/page.tsx}          |  4 +++-
 .../examples/list-extra-tight/page.tsx}       |  4 +++-
 .../examples/list-numbered/page.tsx}          |  4 +++-
 .../examples/listbox-default/page.tsx}        |  4 +++-
 .../examples/listbox-with-action/page.tsx}    |  4 +++-
 .../listbox-with-custom-element/page.tsx}     |  4 +++-
 .../examples/listbox-with-loading/page.tsx}   |  4 +++-
 .../examples/listbox-with-search/page.tsx}    |  4 +++-
 .../examples/loading-default/page.tsx}        |  4 +++-
 .../examples/media-card-default/page.tsx}     |  4 +++-
 .../media-card-portrait-video-card/page.tsx}  |  4 +++-
 .../examples/media-card-video-card/page.tsx}  |  4 +++-
 .../media-card-with-no-actions/page.tsx}      |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../media-card-with-small-visual/page.tsx}    |  4 +++-
 .../examples/modal-default/page.tsx}          |  4 +++-
 .../examples/modal-large/page.tsx}            |  4 +++-
 .../examples/modal-small/page.tsx}            |  4 +++-
 .../modal-with-activator-ref/page.tsx}        |  4 +++-
 .../modal-with-primary-action/page.tsx}       |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../modal-with-scroll-listener/page.tsx}      |  4 +++-
 .../examples/modal-without-a-title/page.tsx}  |  4 +++-
 .../modal-without-an-activator-prop/page.tsx} |  4 +++-
 .../examples/navigation-default/page.tsx}     |  4 +++-
 .../navigation-using-major-icons/page.tsx}    |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../navigation-with-aria-labelledby/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../navigation-with-section-rollup/page.tsx}  |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/option-list-default/page.tsx}    |  4 +++-
 .../option-list-in-a-popover/page.tsx}        |  4 +++-
 .../examples/option-list-multiple/page.tsx}   |  4 +++-
 .../option-list-with-sections/page.tsx}       |  4 +++-
 .../examples/page-actions-default/page.tsx}   |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/page-default/page.tsx}           |  4 +++-
 .../examples/page-full-width/page.tsx}        |  4 +++-
 .../examples/page-narrow-width/page.tsx}      |  4 +++-
 .../page-with-action-groups/page.tsx}         |  4 +++-
 .../page-with-content-after-title/page.tsx}   |  4 +++-
 .../page-with-custom-primary-action/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/page-with-divider/page.tsx}      |  4 +++-
 .../page-with-external-link/page.tsx}         |  4 +++-
 .../examples/page-with-subtitle/page.tsx}     |  4 +++-
 .../page-with-tooltip-action/page.tsx}        |  4 +++-
 .../page-without-pagination/page.tsx}         |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/pagination-default/page.tsx}     |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/pagination-with-label/page.tsx}  |  4 +++-
 .../popover-with-action-list/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../popover-with-form-components/page.tsx}    |  4 +++-
 .../popover-with-lazy-loaded-list/page.tsx}   |  4 +++-
 .../popover-with-searchable-listbox/page.tsx} |  4 +++-
 .../examples/progress-bar-colored/page.tsx}   |  4 +++-
 .../examples/progress-bar-default/page.tsx}   |  4 +++-
 .../progress-bar-non-animated/page.tsx}       |  4 +++-
 .../examples/progress-bar-small/page.tsx}     |  4 +++-
 .../examples/radio-button-default/page.tsx}   |  4 +++-
 .../examples/range-slider-default/page.tsx}   |  4 +++-
 .../range-slider-with-dual-thumb/page.tsx}    |  4 +++-
 .../range-slider-with-min-and-max/page.tsx}   |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../range-slider-with-steps/page.tsx}         |  4 +++-
 .../examples/resource-item-default/page.tsx}  |  4 +++-
 .../resource-item-with-media/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/resource-list-default/page.tsx}  |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../resource-list-with-bulk-actions/page.tsx} |  4 +++-
 .../resource-list-with-empty-state/page.tsx}  |  4 +++-
 .../resource-list-with-filtering/page.tsx}    |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../resource-list-with-multiselect/page.tsx}  |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../resource-list-with-sorting/page.tsx}      |  4 +++-
 .../resource-list-with-total-count/page.tsx}  |  4 +++-
 .../examples/scrollable-default/page.tsx}     |  4 +++-
 .../scrollable-to-child-component/page.tsx}   |  4 +++-
 .../examples/select-default/page.tsx}         |  4 +++-
 .../examples/select-disabled/page.tsx}        |  4 +++-
 .../select-with-inline-label/page.tsx}        |  4 +++-
 .../examples/select-with-prefix/page.tsx}     |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../select-with-validation-error/page.tsx}    |  4 +++-
 .../examples/setting-toggle-default/page.tsx} |  4 +++-
 .../examples/sheet-default/page.tsx}          |  4 +++-
 .../sheet-with-searchable-listbox/page.tsx}   |  4 +++-
 .../skeleton-body-text-default/page.tsx}      |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../skeleton-display-text-small/page.tsx}     |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/skeleton-tabs-default/page.tsx}  |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../skeleton-thumbnail-extra-small/page.tsx}  |  4 +++-
 .../skeleton-thumbnail-large/page.tsx}        |  4 +++-
 .../skeleton-thumbnail-medium/page.tsx}       |  4 +++-
 .../skeleton-thumbnail-small/page.tsx}        |  4 +++-
 .../examples/spinner-default/page.tsx}        |  4 +++-
 .../examples/spinner-small/page.tsx}          |  4 +++-
 .../spinner-with-focus-management/page.tsx}   |  4 +++-
 .../examples/stack-default/page.tsx}          |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/stack-non-wrapping/page.tsx}     |  4 +++-
 .../examples/stack-spacing/page.tsx}          |  4 +++-
 .../stack-vertical-centering/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/tabs-default/page.tsx}           |  4 +++-
 .../examples/tabs-fitted/page.tsx}            |  4 +++-
 .../tabs-with-badge-content/page.tsx}         |  4 +++-
 .../tabs-with-custom-disclosure/page.tsx}     |  4 +++-
 .../examples/tag-clickable/page.tsx}          |  4 +++-
 .../examples/tag-default/page.tsx}            |  4 +++-
 .../tag-removable-with-link/page.tsx}         |  4 +++-
 .../examples/tag-removable/page.tsx}          |  4 +++-
 .../tag-with-custom-content/page.tsx}         |  4 +++-
 .../examples/tag-with-link/page.tsx}          |  4 +++-
 .../examples/text-align/page.tsx}             |  4 +++-
 .../examples/text-body/page.tsx}              |  4 +++-
 .../examples/text-color/page.tsx}             |  4 +++-
 .../examples/text-container-default/page.tsx} |  4 +++-
 .../examples/text-container-loose/page.tsx}   |  4 +++-
 .../examples/text-container-tight/page.tsx}   |  4 +++-
 .../examples/text-field-default/page.tsx}     |  4 +++-
 .../examples/text-field-disabled/page.tsx}    |  4 +++-
 .../examples/text-field-email/page.tsx}       |  4 +++-
 .../examples/text-field-multiline/page.tsx}   |  4 +++-
 .../examples/text-field-number/page.tsx}      |  4 +++-
 .../text-field-with-character-count/page.tsx} |  4 +++-
 .../text-field-with-clear-button/page.tsx}    |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../text-field-with-help-text/page.tsx}       |  4 +++-
 .../text-field-with-hidden-label/page.tsx}    |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../text-field-with-label-action/page.tsx}    |  4 +++-
 .../text-field-with-monospaced-font/page.tsx} |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/text-heading/page.tsx}           |  4 +++-
 .../examples/text-weight/page.tsx}            |  4 +++-
 .../examples/thumbnail-default/page.tsx}      |  4 +++-
 .../examples/thumbnail-extra-small/page.tsx}  |  4 +++-
 .../examples/thumbnail-large/page.tsx}        |  4 +++-
 .../examples/thumbnail-small/page.tsx}        |  4 +++-
 .../thumbnail-with-component-source/page.tsx} |  4 +++-
 .../examples/toast-default/page.tsx}          |  4 +++-
 .../examples/toast-error/page.tsx}            |  4 +++-
 .../toast-multiple-messages/page.tsx}         |  4 +++-
 .../examples/toast-with-action/page.tsx}      |  4 +++-
 .../toast-with-custom-duration/page.tsx}      |  4 +++-
 .../examples/tooltip-default/page.tsx}        |  4 +++-
 .../page.tsx}                                 |  4 +++-
 .../examples/tooltip-with-suffix/page.tsx}    |  4 +++-
 .../examples/top-bar-default/page.tsx}        |  4 +++-
 .../video-thumbnail-default/page.tsx}         |  4 +++-
 .../video-thumbnail-with-progress/page.tsx}   |  4 +++-
 polaris.shopify.com/app/layout.tsx            |  9 +++++++++
 polaris.shopify.com/next.config.js            |  1 +
 polaris.shopify.com/pages/_app.tsx            |  1 -
 .../components/[group]/[component]/index.tsx  |  4 +++-
 polaris.shopify.com/scripts/fix-examples.mjs  | 18 ++++++++++++++++++
 polaris.shopify.com/scripts/move-examples.mjs | 19 +++++++++++++++++++
 .../UpdateBanner/UpdateBanner.module.scss     | 10 ++++++----
 polaris.shopify.com/tsconfig.json             | 11 +++++++++--
 438 files changed, 1360 insertions(+), 436 deletions(-)
 create mode 100644 polaris.shopify.com/.vscode/settings.json
 rename polaris.shopify.com/{pages/examples/account-connection-default.tsx => app/examples/account-connection-default/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/action-list-in-a-popover.tsx => app/examples/action-list-in-a-popover/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/action-list-with-a-prefix-and-a-suffix.tsx => app/examples/action-list-with-a-prefix-and-a-suffix/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/action-list-with-an-icon-and-a-suffix.tsx => app/examples/action-list-with-an-icon-and-a-suffix/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/action-list-with-destructive-item.tsx => app/examples/action-list-with-destructive-item/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/action-list-with-help-text.tsx => app/examples/action-list-with-help-text/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/action-list-with-icons-or-image.tsx => app/examples/action-list-with-icons-or-image/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/action-list-with-sections.tsx => app/examples/action-list-with-sections/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/alpha-card-default.tsx => app/examples/alpha-card-default/page.tsx} (75%)
 rename polaris.shopify.com/{pages/examples/alpha-card-with-rounded-corners.tsx => app/examples/alpha-card-with-rounded-corners/page.tsx} (76%)
 rename polaris.shopify.com/{pages/examples/alpha-card-with-subdued-background.tsx => app/examples/alpha-card-with-subdued-background/page.tsx} (76%)
 rename polaris.shopify.com/{pages/examples/alpha-card-with-varying-padding.tsx => app/examples/alpha-card-with-varying-padding/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/alpha-stack-default.tsx => app/examples/alpha-stack-default/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/alpha-stack-with-align.tsx => app/examples/alpha-stack-with-align/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/alpha-stack-with-full-width-children.tsx => app/examples/alpha-stack-with-full-width-children/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/alpha-stack-with-gap.tsx => app/examples/alpha-stack-with-gap/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/app-provider-default.tsx => app/examples/app-provider-default/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/app-provider-with-i18n.tsx => app/examples/app-provider-with-i18n/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/app-provider-with-link-component.tsx => app/examples/app-provider-with-link-component/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/autocomplete-default.tsx => app/examples/autocomplete-default/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/autocomplete-with-action.tsx => app/examples/autocomplete-with-action/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/autocomplete-with-destructive-action.tsx => app/examples/autocomplete-with-destructive-action/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/autocomplete-with-empty-state.tsx => app/examples/autocomplete-with-empty-state/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/autocomplete-with-lazy-loading.tsx => app/examples/autocomplete-with-lazy-loading/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/autocomplete-with-loading.tsx => app/examples/autocomplete-with-loading/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/autocomplete-with-multiple-sections.tsx => app/examples/autocomplete-with-multiple-sections/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/autocomplete-with-multiple-tags.tsx => app/examples/autocomplete-with-multiple-tags/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/autocomplete-with-wrapping-action.tsx => app/examples/autocomplete-with-wrapping-action/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/avatar-default.tsx => app/examples/avatar-default/page.tsx} (66%)
 rename polaris.shopify.com/{pages/examples/avatar-extra-small.tsx => app/examples/avatar-extra-small/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/avatar-square.tsx => app/examples/avatar-square/page.tsx} (67%)
 rename polaris.shopify.com/{pages/examples/badge-attention.tsx => app/examples/badge-attention/page.tsx} (66%)
 rename polaris.shopify.com/{pages/examples/badge-complete.tsx => app/examples/badge-complete/page.tsx} (67%)
 rename polaris.shopify.com/{pages/examples/badge-critical.tsx => app/examples/badge-critical/page.tsx} (67%)
 rename polaris.shopify.com/{pages/examples/badge-default.tsx => app/examples/badge-default/page.tsx} (65%)
 rename polaris.shopify.com/{pages/examples/badge-incomplete.tsx => app/examples/badge-incomplete/page.tsx} (71%)
 rename polaris.shopify.com/{pages/examples/badge-informational.tsx => app/examples/badge-informational/page.tsx} (66%)
 rename polaris.shopify.com/{pages/examples/badge-partially-complete.tsx => app/examples/badge-partially-complete/page.tsx} (72%)
 rename polaris.shopify.com/{pages/examples/badge-small.tsx => app/examples/badge-small/page.tsx} (66%)
 rename polaris.shopify.com/{pages/examples/badge-success.tsx => app/examples/badge-success/page.tsx} (66%)
 rename polaris.shopify.com/{pages/examples/badge-warning.tsx => app/examples/badge-warning/page.tsx} (66%)
 rename polaris.shopify.com/{pages/examples/badge-with-status-and-progress-label-override.tsx => app/examples/badge-with-status-and-progress-label-override/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/banner-critical.tsx => app/examples/banner-critical/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/banner-default.tsx => app/examples/banner-default/page.tsx} (75%)
 rename polaris.shopify.com/{pages/examples/banner-dismissible.tsx => app/examples/banner-dismissible/page.tsx} (79%)
 rename polaris.shopify.com/{pages/examples/banner-in-a-card.tsx => app/examples/banner-in-a-card/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/banner-in-a-modal.tsx => app/examples/banner-in-a-modal/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/banner-informational.tsx => app/examples/banner-informational/page.tsx} (82%)
 rename polaris.shopify.com/{pages/examples/banner-success.tsx => app/examples/banner-success/page.tsx} (77%)
 rename polaris.shopify.com/{pages/examples/banner-warning.tsx => app/examples/banner-warning/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/banner-with-focus.tsx => app/examples/banner-with-focus/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/banner-with-footer-call-to-action.tsx => app/examples/banner-with-footer-call-to-action/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/bleed-all-directions.tsx => app/examples/bleed-all-directions/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/bleed-horizontal.tsx => app/examples/bleed-horizontal/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/bleed-specific-direction.tsx => app/examples/bleed-specific-direction/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/bleed-vertical.tsx => app/examples/bleed-vertical/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/box-default.tsx => app/examples/box-default/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/box-with-border-radius.tsx => app/examples/box-with-border-radius/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/box-with-border.tsx => app/examples/box-with-border/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/box-with-color.tsx => app/examples/box-with-color/page.tsx} (77%)
 rename polaris.shopify.com/{pages/examples/box-with-padding.tsx => app/examples/box-with-padding/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/box-with-shadow.tsx => app/examples/box-with-shadow/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/button-default.tsx => app/examples/button-default/page.tsx} (65%)
 rename polaris.shopify.com/{pages/examples/button-destructive.tsx => app/examples/button-destructive/page.tsx} (67%)
 rename polaris.shopify.com/{pages/examples/button-disabled-state.tsx => app/examples/button-disabled-state/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/button-full-width.tsx => app/examples/button-full-width/page.tsx} (67%)
 rename polaris.shopify.com/{pages/examples/button-group-default.tsx => app/examples/button-group-default/page.tsx} (75%)
 rename polaris.shopify.com/{pages/examples/button-group-outline-with-segmented-buttons.tsx => app/examples/button-group-outline-with-segmented-buttons/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/button-group-with-segmented-buttons.tsx => app/examples/button-group-with-segmented-buttons/page.tsx} (77%)
 rename polaris.shopify.com/{pages/examples/button-large.tsx => app/examples/button-large/page.tsx} (67%)
 rename polaris.shopify.com/{pages/examples/button-loading-state.tsx => app/examples/button-loading-state/page.tsx} (67%)
 rename polaris.shopify.com/{pages/examples/button-outline-monochrome.tsx => app/examples/button-outline-monochrome/page.tsx} (74%)
 rename polaris.shopify.com/{pages/examples/button-outline.tsx => app/examples/button-outline/page.tsx} (66%)
 rename polaris.shopify.com/{pages/examples/button-plain-destructive.tsx => app/examples/button-plain-destructive/page.tsx} (69%)
 rename polaris.shopify.com/{pages/examples/button-plain-disclosure.tsx => app/examples/button-plain-disclosure/page.tsx} (81%)
 rename polaris.shopify.com/{pages/examples/button-plain-monochrome.tsx => app/examples/button-plain-monochrome/page.tsx} (74%)
 rename polaris.shopify.com/{pages/examples/button-plain.tsx => app/examples/button-plain/page.tsx} (67%)
 rename polaris.shopify.com/{pages/examples/button-pressed.tsx => app/examples/button-pressed/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/button-primary.tsx => app/examples/button-primary/page.tsx} (66%)
 rename polaris.shopify.com/{pages/examples/button-right-aligned-disclosure.tsx => app/examples/button-right-aligned-disclosure/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/button-select-disclosure.tsx => app/examples/button-select-disclosure/page.tsx} (77%)
 rename polaris.shopify.com/{pages/examples/button-slim.tsx => app/examples/button-slim/page.tsx} (67%)
 rename polaris.shopify.com/{pages/examples/button-split.tsx => app/examples/button-split/page.tsx} (81%)
 rename polaris.shopify.com/{pages/examples/button-text-aligned.tsx => app/examples/button-text-aligned/page.tsx} (82%)
 rename polaris.shopify.com/{pages/examples/callout-card-default.tsx => app/examples/callout-card-default/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/callout-card-dismissable.tsx => app/examples/callout-card-dismissable/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/callout-card-with-secondary-action.tsx => app/examples/callout-card-with-secondary-action/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/card-default.tsx => app/examples/card-default/page.tsx} (74%)
 rename polaris.shopify.com/{pages/examples/card-with-a-subdued-section.tsx => app/examples/card-with-a-subdued-section/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/card-with-all-elements.tsx => app/examples/card-with-all-elements/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/card-with-custom-footer-actions.tsx => app/examples/card-with-custom-footer-actions/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/card-with-custom-react-node-title.tsx => app/examples/card-with-custom-react-node-title/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/card-with-destructive-action.tsx => app/examples/card-with-destructive-action/page.tsx} (82%)
 rename polaris.shopify.com/{pages/examples/card-with-destructive-footer-action.tsx => app/examples/card-with-destructive-footer-action/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/card-with-flushed-sections.tsx => app/examples/card-with-flushed-sections/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/card-with-footer-actions.tsx => app/examples/card-with-footer-actions/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/card-with-header-actions.tsx => app/examples/card-with-header-actions/page.tsx} (79%)
 rename polaris.shopify.com/{pages/examples/card-with-multiple-footer-actions.tsx => app/examples/card-with-multiple-footer-actions/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/card-with-multiple-sections.tsx => app/examples/card-with-multiple-sections/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/card-with-multiple-titled-sections.tsx => app/examples/card-with-multiple-titled-sections/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/card-with-sections-and-actions.tsx => app/examples/card-with-sections-and-actions/page.tsx} (80%)
 rename polaris.shopify.com/{pages/examples/card-with-separate-header.tsx => app/examples/card-with-separate-header/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/card-with-subdued-for-secondary-content.tsx => app/examples/card-with-subdued-for-secondary-content/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/card-with-subsection.tsx => app/examples/card-with-subsection/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/checkbox-default.tsx => app/examples/checkbox-default/page.tsx} (81%)
 rename polaris.shopify.com/{pages/examples/choice-list-default.tsx => app/examples/choice-list-default/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/choice-list-with-children-content.tsx => app/examples/choice-list-with-children-content/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/choice-list-with-dynamic-children-content.tsx => app/examples/choice-list-with-dynamic-children-content/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/choice-list-with-error.tsx => app/examples/choice-list-with-error/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/choice-list-with-multi-choice.tsx => app/examples/choice-list-with-multi-choice/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/collapsible-default.tsx => app/examples/collapsible-default/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/color-picker-default.tsx => app/examples/color-picker-default/page.tsx} (77%)
 rename polaris.shopify.com/{pages/examples/color-picker-with-transparent-value-full-width.tsx => app/examples/color-picker-with-transparent-value-full-width/page.tsx} (82%)
 rename polaris.shopify.com/{pages/examples/color-picker-with-transparent-value.tsx => app/examples/color-picker-with-transparent-value/page.tsx} (80%)
 rename polaris.shopify.com/{pages/examples/columns-default.tsx => app/examples/columns-default/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/columns-with-fixed-widths.tsx => app/examples/columns-with-fixed-widths/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/columns-with-set-number.tsx => app/examples/columns-with-set-number/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/columns-with-varying-gap.tsx => app/examples/columns-with-varying-gap/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/combobox-default.tsx => app/examples/combobox-default/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/combobox-with-loading.tsx => app/examples/combobox-with-loading/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/combobox-with-manual-selection.tsx => app/examples/combobox-with-manual-selection/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/combobox-with-multi-select-and-manual-selection.tsx => app/examples/combobox-with-multi-select-and-manual-selection/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/combobox-with-multi-select-and-vertical-content.tsx => app/examples/combobox-with-multi-select-and-vertical-content/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/combobox-with-multi-select.tsx => app/examples/combobox-with-multi-select/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/contextual-save-bar-default.tsx => app/examples/contextual-save-bar-default/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/contextual-save-bar-with-flush-contents.tsx => app/examples/contextual-save-bar-with-flush-contents/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/contextual-save-bar-with-full-width.tsx => app/examples/contextual-save-bar-with-full-width/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/data-table-default.tsx => app/examples/data-table-default/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/data-table-sortable.tsx => app/examples/data-table-sortable/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/data-table-with-all-of-its-elements.tsx => app/examples/data-table-with-all-of-its-elements/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/data-table-with-custom-totals-heading.tsx => app/examples/data-table-with-custom-totals-heading/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/data-table-with-fixed-first-columns.tsx => app/examples/data-table-with-fixed-first-columns/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/data-table-with-footer.tsx => app/examples/data-table-with-footer/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/data-table-with-increased-density-and-zebra-striping.tsx => app/examples/data-table-with-increased-density-and-zebra-striping/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/data-table-with-row-heading-links.tsx => app/examples/data-table-with-row-heading-links/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/data-table-with-sticky-header-enabled.tsx => app/examples/data-table-with-sticky-header-enabled/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/data-table-with-totals-in-footer.tsx => app/examples/data-table-with-totals-in-footer/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/date-picker-default.tsx => app/examples/date-picker-default/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/date-picker-multi-month-ranged.tsx => app/examples/date-picker-multi-month-ranged/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/date-picker-ranged.tsx => app/examples/date-picker-ranged/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/date-picker-with-disabled-date-ranges.tsx => app/examples/date-picker-with-disabled-date-ranges/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/date-picker-with-specific-disabled-dates.tsx => app/examples/date-picker-with-specific-disabled-dates/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/description-list-default.tsx => app/examples/description-list-default/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/divider-with-border-styles.tsx => app/examples/divider-with-border-styles/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/drop-zone-accepts-only-svg-files.tsx => app/examples/drop-zone-accepts-only-svg-files/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/drop-zone-default.tsx => app/examples/drop-zone-default/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/drop-zone-medium-sized.tsx => app/examples/drop-zone-medium-sized/page.tsx} (75%)
 rename polaris.shopify.com/{pages/examples/drop-zone-nested.tsx => app/examples/drop-zone-nested/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/drop-zone-small-sized.tsx => app/examples/drop-zone-small-sized/page.tsx} (75%)
 rename polaris.shopify.com/{pages/examples/drop-zone-with-a-label.tsx => app/examples/drop-zone-with-a-label/page.tsx} (72%)
 rename polaris.shopify.com/{pages/examples/drop-zone-with-custom-file-dialog-trigger.tsx => app/examples/drop-zone-with-custom-file-dialog-trigger/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/drop-zone-with-custom-file-upload-text.tsx => app/examples/drop-zone-with-custom-file-upload-text/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/drop-zone-with-drop-on-page.tsx => app/examples/drop-zone-with-drop-on-page/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/drop-zone-with-image-file-upload.tsx => app/examples/drop-zone-with-image-file-upload/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/drop-zone-with-single-file-upload.tsx => app/examples/drop-zone-with-single-file-upload/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/empty-state-default.tsx => app/examples/empty-state-default/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/empty-state-with-full-width-layout.tsx => app/examples/empty-state-with-full-width-layout/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/empty-state-with-subdued-footer-context.tsx => app/examples/empty-state-with-subdued-footer-context/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/exception-list-default.tsx => app/examples/exception-list-default/page.tsx} (81%)
 rename polaris.shopify.com/{pages/examples/filters-disabled.tsx => app/examples/filters-disabled/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/filters-some-disabled.tsx => app/examples/filters-some-disabled/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/filters-with-a-data-table.tsx => app/examples/filters-with-a-data-table/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/filters-with-a-resource-list.tsx => app/examples/filters-with-a-resource-list/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/filters-with-children-content.tsx => app/examples/filters-with-children-content/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/filters-with-help-text.tsx => app/examples/filters-with-help-text/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/filters-with-query-field-disabled.tsx => app/examples/filters-with-query-field-disabled/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/filters-with-query-field-hidden.tsx => app/examples/filters-with-query-field-hidden/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/filters-without-clear-button.tsx => app/examples/filters-without-clear-button/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/footer-help-default.tsx => app/examples/footer-help-default/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/form-custom-on-submit.tsx => app/examples/form-custom-on-submit/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/form-layout-condensed-field-group.tsx => app/examples/form-layout-condensed-field-group/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/form-layout-default.tsx => app/examples/form-layout-default/page.tsx} (81%)
 rename polaris.shopify.com/{pages/examples/form-layout-field-group.tsx => app/examples/form-layout-field-group/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/form-without-native-validation.tsx => app/examples/form-without-native-validation/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/frame-in-an-application.tsx => app/examples/frame-in-an-application/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/frame-with-an-offset.tsx => app/examples/frame-with-an-offset/page.tsx} (99%)
 rename polaris.shopify.com/{pages/examples/fullscreen-bar-no-children.tsx => app/examples/fullscreen-bar-no-children/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/fullscreen-bar-with-children.tsx => app/examples/fullscreen-bar-with-children/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/grid-custom-layout.tsx => app/examples/grid-custom-layout/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/grid-two-thirds-and-one-third-column.tsx => app/examples/grid-three-one-third-column/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/grid-two-column.tsx => app/examples/grid-two-column/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/grid-three-one-third-column.tsx => app/examples/grid-two-thirds-and-one-third-column/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/icon-colored.tsx => app/examples/icon-colored/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/icon-default.tsx => app/examples/icon-default/page.tsx} (71%)
 rename polaris.shopify.com/{pages/examples/icon-with-backdrop.tsx => app/examples/icon-with-backdrop/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/icon-with-custom-svg-and-color.tsx => app/examples/icon-with-custom-svg-and-color/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/icon-with-custom-svg.tsx => app/examples/icon-with-custom-svg/page.tsx} (80%)
 rename polaris.shopify.com/{pages/examples/index-table-default.tsx => app/examples/index-table-default/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/index-table-flush.tsx => app/examples/index-table-flush/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/index-table-small-screen-with-all-of-its-elements.tsx => app/examples/index-table-small-screen-with-all-of-its-elements/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/index-table-small-screen.tsx => app/examples/index-table-small-screen/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/index-table-with-all-of-its-elements.tsx => app/examples/index-table-with-all-of-its-elements/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx => app/examples/index-table-with-bulk-actions-and-selection-across-pages/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/index-table-with-bulk-actions.tsx => app/examples/index-table-with-bulk-actions/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/index-table-with-clickable-button-column.tsx => app/examples/index-table-with-clickable-button-column/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/index-table-with-empty-state.tsx => app/examples/index-table-with-empty-state/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/index-table-with-filtering.tsx => app/examples/index-table-with-filtering/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/index-table-with-loading-state.tsx => app/examples/index-table-with-loading-state/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx => app/examples/index-table-with-multiple-promoted-bulk-actions/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/index-table-with-row-navigation-link.tsx => app/examples/index-table-with-row-navigation-link/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/index-table-with-row-status.tsx => app/examples/index-table-with-row-status/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/index-table-with-sticky-last-column.tsx => app/examples/index-table-with-sticky-last-column/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/index-table-without-checkboxes.tsx => app/examples/index-table-without-checkboxes/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/inline-default.tsx => app/examples/inline-default/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/inline-error-default.tsx => app/examples/inline-error-default/page.tsx} (71%)
 rename polaris.shopify.com/{pages/examples/inline-with-gap.tsx => app/examples/inline-with-gap/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/inline-with-horizontal-alignment.tsx => app/examples/inline-with-horizontal-alignment/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/inline-with-non-wrapping.tsx => app/examples/inline-with-non-wrapping/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/inline-with-vertical-alignment.tsx => app/examples/inline-with-vertical-alignment/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/keyboard-key-default.tsx => app/examples/keyboard-key-default/page.tsx} (65%)
 rename polaris.shopify.com/{pages/examples/keyboard-key-list-of-shortcuts.tsx => app/examples/keyboard-key-list-of-shortcuts/page.tsx} (65%)
 rename polaris.shopify.com/{pages/examples/layout-annotated-with-banner-at-the-top.tsx => app/examples/layout-annotated-with-banner-at-the-top/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/layout-annotated-with-sections.tsx => app/examples/layout-annotated-with-sections/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/layout-annotated.tsx => app/examples/layout-annotated/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/layout-one-column.tsx => app/examples/layout-one-column/page.tsx} (82%)
 rename polaris.shopify.com/{pages/examples/layout-three-columns-with-equal-width.tsx => app/examples/layout-three-columns-with-equal-width/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/layout-two-columns-with-equal-width.tsx => app/examples/layout-two-columns-with-equal-width/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/layout-two-columns-with-primary-and-secondary-widths.tsx => app/examples/layout-two-columns-with-primary-and-secondary-widths/page.tsx} (90%)
 create mode 100644 polaris.shopify.com/app/examples/layout.tsx
 rename polaris.shopify.com/{pages/examples/legacy-card-default.tsx => app/examples/legacy-card-default/page.tsx} (76%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-a-subdued-section.tsx => app/examples/legacy-card-with-a-subdued-section/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-all-elements.tsx => app/examples/legacy-card-with-all-elements/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-custom-footer-actions.tsx => app/examples/legacy-card-with-custom-footer-actions/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-custom-react-node-title.tsx => app/examples/legacy-card-with-custom-react-node-title/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-destructive-action.tsx => app/examples/legacy-card-with-destructive-action/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-destructive-footer-action.tsx => app/examples/legacy-card-with-destructive-footer-action/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-flushed-sections.tsx => app/examples/legacy-card-with-flushed-sections/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-footer-actions.tsx => app/examples/legacy-card-with-footer-actions/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-header-actions.tsx => app/examples/legacy-card-with-header-actions/page.tsx} (80%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-multiple-footer-actions.tsx => app/examples/legacy-card-with-multiple-footer-actions/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-multiple-sections.tsx => app/examples/legacy-card-with-multiple-sections/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-multiple-titled-sections.tsx => app/examples/legacy-card-with-multiple-titled-sections/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-sections-and-actions.tsx => app/examples/legacy-card-with-sections-and-actions/page.tsx} (83%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-separate-header.tsx => app/examples/legacy-card-with-separate-header/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-subdued-for-secondary-content.tsx => app/examples/legacy-card-with-subdued-for-secondary-content/page.tsx} (80%)
 rename polaris.shopify.com/{pages/examples/legacy-card-with-subsection.tsx => app/examples/legacy-card-with-subsection/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/legacy-stack-default.tsx => app/examples/legacy-stack-default/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/legacy-stack-fill-available-space-proportionally.tsx => app/examples/legacy-stack-fill-available-space-proportionally/page.tsx} (79%)
 rename polaris.shopify.com/{pages/examples/legacy-stack-non-wrapping.tsx => app/examples/legacy-stack-non-wrapping/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/legacy-stack-spacing.tsx => app/examples/legacy-stack-spacing/page.tsx} (75%)
 rename polaris.shopify.com/{pages/examples/legacy-stack-vertical-centering.tsx => app/examples/legacy-stack-vertical-centering/page.tsx} (81%)
 rename polaris.shopify.com/{pages/examples/legacy-stack-where-a-single-item-fills-the-remaining-space.tsx => app/examples/legacy-stack-where-a-single-item-fills-the-remaining-space/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/legacy-stack-where-items-fill-space-evenly.tsx => app/examples/legacy-stack-where-items-fill-space-evenly/page.tsx} (80%)
 rename polaris.shopify.com/{pages/examples/link-default.tsx => app/examples/link-default/page.tsx} (69%)
 rename polaris.shopify.com/{pages/examples/link-external.tsx => app/examples/link-external/page.tsx} (72%)
 rename polaris.shopify.com/{pages/examples/link-monochrome-in-a-banner.tsx => app/examples/link-monochrome-in-a-banner/page.tsx} (75%)
 rename polaris.shopify.com/{pages/examples/link-monochrome.tsx => app/examples/link-monochrome/page.tsx} (72%)
 rename polaris.shopify.com/{pages/examples/list-bulleted.tsx => app/examples/list-bulleted/page.tsx} (76%)
 rename polaris.shopify.com/{pages/examples/list-extra-tight.tsx => app/examples/list-extra-tight/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/list-numbered.tsx => app/examples/list-numbered/page.tsx} (76%)
 rename polaris.shopify.com/{pages/examples/listbox-default.tsx => app/examples/listbox-default/page.tsx} (82%)
 rename polaris.shopify.com/{pages/examples/listbox-with-action.tsx => app/examples/listbox-with-action/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/listbox-with-custom-element.tsx => app/examples/listbox-with-custom-element/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/listbox-with-loading.tsx => app/examples/listbox-with-loading/page.tsx} (83%)
 rename polaris.shopify.com/{pages/examples/listbox-with-search.tsx => app/examples/listbox-with-search/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/loading-default.tsx => app/examples/loading-default/page.tsx} (73%)
 rename polaris.shopify.com/{pages/examples/media-card-default.tsx => app/examples/media-card-default/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/media-card-portrait-video-card.tsx => app/examples/media-card-portrait-video-card/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/media-card-video-card.tsx => app/examples/media-card-video-card/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/media-card-with-no-actions.tsx => app/examples/media-card-with-no-actions/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/media-card-with-secondary-action.tsx => app/examples/media-card-with-secondary-action/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/media-card-with-small-visual.tsx => app/examples/media-card-with-small-visual/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/modal-default.tsx => app/examples/modal-default/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/modal-large.tsx => app/examples/modal-large/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/modal-small.tsx => app/examples/modal-small/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/modal-with-activator-ref.tsx => app/examples/modal-with-activator-ref/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/modal-with-primary-action.tsx => app/examples/modal-with-primary-action/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/modal-with-primary-and-secondary-actions.tsx => app/examples/modal-with-primary-and-secondary-actions/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/modal-with-scroll-listener.tsx => app/examples/modal-with-scroll-listener/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/modal-without-a-title.tsx => app/examples/modal-without-a-title/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/modal-without-an-activator-prop.tsx => app/examples/modal-without-an-activator-prop/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/navigation-default.tsx => app/examples/navigation-default/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/navigation-using-major-icons.tsx => app/examples/navigation-using-major-icons/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/navigation-with-a-secondary-action-for-a-section-and-a-section-title.tsx => app/examples/navigation-with-a-secondary-action-for-a-section-and-a-section-title/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/navigation-with-a-secondary-action-for-an-item.tsx => app/examples/navigation-with-a-secondary-action-for-an-item/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/navigation-with-an-active-root-item-with-secondary-navigation-items.tsx => app/examples/navigation-with-an-active-root-item-with-secondary-navigation-items/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/navigation-with-aria-labelledby.tsx => app/examples/navigation-with-aria-labelledby/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/navigation-with-multiple-secondary-actions.tsx => app/examples/navigation-with-multiple-secondary-actions/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/navigation-with-multiple-secondary-navigations.tsx => app/examples/navigation-with-multiple-secondary-navigations/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/navigation-with-section-rollup.tsx => app/examples/navigation-with-section-rollup/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/navigation-with-section-separator.tsx => app/examples/navigation-with-section-separator/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/navigation-with-truncation-for-various-states.tsx => app/examples/navigation-with-truncation-for-various-states/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/navigation-with-various-states-and-secondary-elements.tsx => app/examples/navigation-with-various-states-and-secondary-elements/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/option-list-default.tsx => app/examples/option-list-default/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/option-list-in-a-popover.tsx => app/examples/option-list-in-a-popover/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/option-list-multiple.tsx => app/examples/option-list-multiple/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/option-list-with-sections.tsx => app/examples/option-list-with-sections/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/page-actions-default.tsx => app/examples/page-actions-default/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/page-actions-primary-action-only.tsx => app/examples/page-actions-primary-action-only/page.tsx} (71%)
 rename polaris.shopify.com/{pages/examples/page-actions-with-custom-primary-action.tsx => app/examples/page-actions-with-custom-primary-action/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/page-actions-with-custom-secondary-action.tsx => app/examples/page-actions-with-custom-secondary-action/page.tsx} (83%)
 rename polaris.shopify.com/{pages/examples/page-default.tsx => app/examples/page-default/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/page-full-width.tsx => app/examples/page-full-width/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/page-narrow-width.tsx => app/examples/page-narrow-width/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/page-with-action-groups.tsx => app/examples/page-with-action-groups/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/page-with-content-after-title.tsx => app/examples/page-with-content-after-title/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/page-with-custom-primary-action.tsx => app/examples/page-with-custom-primary-action/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/page-with-custom-secondary-action.tsx => app/examples/page-with-custom-secondary-action/page.tsx} (83%)
 rename polaris.shopify.com/{pages/examples/page-with-destructive-secondary-action.tsx => app/examples/page-with-destructive-secondary-action/page.tsx} (75%)
 rename polaris.shopify.com/{pages/examples/page-with-divider.tsx => app/examples/page-with-divider/page.tsx} (80%)
 rename polaris.shopify.com/{pages/examples/page-with-external-link.tsx => app/examples/page-with-external-link/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/page-with-subtitle.tsx => app/examples/page-with-subtitle/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/page-with-tooltip-action.tsx => app/examples/page-with-tooltip-action/page.tsx} (81%)
 rename polaris.shopify.com/{pages/examples/page-without-pagination.tsx => app/examples/page-without-pagination/page.tsx} (81%)
 rename polaris.shopify.com/{pages/examples/page-without-primary-action-in-header.tsx => app/examples/page-without-primary-action-in-header/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/pagination-default.tsx => app/examples/pagination-default/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/pagination-with-keyboard-navigation.tsx => app/examples/pagination-with-keyboard-navigation/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/pagination-with-label.tsx => app/examples/pagination-with-label/page.tsx} (79%)
 rename polaris.shopify.com/{pages/examples/popover-with-action-list.tsx => app/examples/popover-with-action-list/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/popover-with-content-and-actions.tsx => app/examples/popover-with-content-and-actions/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/popover-with-form-components.tsx => app/examples/popover-with-form-components/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/popover-with-lazy-loaded-list.tsx => app/examples/popover-with-lazy-loaded-list/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/popover-with-searchable-listbox.tsx => app/examples/popover-with-searchable-listbox/page.tsx} (98%)
 rename polaris.shopify.com/{pages/examples/progress-bar-colored.tsx => app/examples/progress-bar-colored/page.tsx} (77%)
 rename polaris.shopify.com/{pages/examples/progress-bar-default.tsx => app/examples/progress-bar-default/page.tsx} (72%)
 rename polaris.shopify.com/{pages/examples/progress-bar-non-animated.tsx => app/examples/progress-bar-non-animated/page.tsx} (73%)
 rename polaris.shopify.com/{pages/examples/progress-bar-small.tsx => app/examples/progress-bar-small/page.tsx} (73%)
 rename polaris.shopify.com/{pages/examples/radio-button-default.tsx => app/examples/radio-button-default/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/range-slider-default.tsx => app/examples/range-slider-default/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/range-slider-with-dual-thumb.tsx => app/examples/range-slider-with-dual-thumb/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/range-slider-with-min-and-max.tsx => app/examples/range-slider-with-min-and-max/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/range-slider-with-prefix-and-suffix.tsx => app/examples/range-slider-with-prefix-and-suffix/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/range-slider-with-steps.tsx => app/examples/range-slider-with-steps/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/resource-item-default.tsx => app/examples/resource-item-default/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/resource-item-with-media.tsx => app/examples/resource-item-with-media/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/resource-item-with-shortcut-actions.tsx => app/examples/resource-item-with-shortcut-actions/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/resource-item-with-vertical-alignment.tsx => app/examples/resource-item-with-vertical-alignment/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/resource-list-default.tsx => app/examples/resource-list-default/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-a-custom-empty-search-result-state.tsx => app/examples/resource-list-with-a-custom-empty-search-result-state/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-all-of-its-elements.tsx => app/examples/resource-list-with-all-of-its-elements/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-alternate-tool.tsx => app/examples/resource-list-with-alternate-tool/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-bulk-actions.tsx => app/examples/resource-list-with-bulk-actions/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-empty-state.tsx => app/examples/resource-list-with-empty-state/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-filtering.tsx => app/examples/resource-list-with-filtering/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-item-shortcut-actions.tsx => app/examples/resource-list-with-item-shortcut-actions/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-loading-state.tsx => app/examples/resource-list-with-loading-state/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-multiselect.tsx => app/examples/resource-list-with-multiselect/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-persistent-item-shortcut-actions.tsx => app/examples/resource-list-with-persistent-item-shortcut-actions/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-selection-and-no-bulk-actions.tsx => app/examples/resource-list-with-selection-and-no-bulk-actions/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-sorting.tsx => app/examples/resource-list-with-sorting/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/resource-list-with-total-count.tsx => app/examples/resource-list-with-total-count/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/scrollable-default.tsx => app/examples/scrollable-default/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/scrollable-to-child-component.tsx => app/examples/scrollable-to-child-component/page.tsx} (99%)
 rename polaris.shopify.com/{pages/examples/select-default.tsx => app/examples/select-default/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/select-disabled.tsx => app/examples/select-disabled/page.tsx} (80%)
 rename polaris.shopify.com/{pages/examples/select-with-inline-label.tsx => app/examples/select-with-inline-label/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/select-with-prefix.tsx => app/examples/select-with-prefix/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/select-with-separate-validation-error.tsx => app/examples/select-with-separate-validation-error/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/select-with-validation-error.tsx => app/examples/select-with-validation-error/page.tsx} (83%)
 rename polaris.shopify.com/{pages/examples/setting-toggle-default.tsx => app/examples/setting-toggle-default/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/sheet-default.tsx => app/examples/sheet-default/page.tsx} (97%)
 rename polaris.shopify.com/{pages/examples/sheet-with-searchable-listbox.tsx => app/examples/sheet-with-searchable-listbox/page.tsx} (99%)
 rename polaris.shopify.com/{pages/examples/skeleton-body-text-default.tsx => app/examples/skeleton-body-text-default/page.tsx} (66%)
 rename polaris.shopify.com/{pages/examples/skeleton-body-text-single-line-content.tsx => app/examples/skeleton-body-text-single-line-content/page.tsx} (67%)
 rename polaris.shopify.com/{pages/examples/skeleton-display-text-extra-large.tsx => app/examples/skeleton-display-text-extra-large/page.tsx} (69%)
 rename polaris.shopify.com/{pages/examples/skeleton-display-text-medium-and-large.tsx => app/examples/skeleton-display-text-medium-and-large/page.tsx} (68%)
 rename polaris.shopify.com/{pages/examples/skeleton-display-text-small.tsx => app/examples/skeleton-display-text-small/page.tsx} (68%)
 rename polaris.shopify.com/{pages/examples/skeleton-page-with-dynamic-content.tsx => app/examples/skeleton-page-with-dynamic-content/page.tsx} (94%)
 rename polaris.shopify.com/{pages/examples/skeleton-page-with-static-content.tsx => app/examples/skeleton-page-with-static-content/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/skeleton-tabs-default.tsx => app/examples/skeleton-tabs-default/page.tsx} (71%)
 rename polaris.shopify.com/{pages/examples/skeleton-tabs-with-a-custom-count.tsx => app/examples/skeleton-tabs-with-a-custom-count/page.tsx} (72%)
 rename polaris.shopify.com/{pages/examples/skeleton-thumbnail-extra-small.tsx => app/examples/skeleton-thumbnail-extra-small/page.tsx} (68%)
 rename polaris.shopify.com/{pages/examples/skeleton-thumbnail-large.tsx => app/examples/skeleton-thumbnail-large/page.tsx} (68%)
 rename polaris.shopify.com/{pages/examples/skeleton-thumbnail-medium.tsx => app/examples/skeleton-thumbnail-medium/page.tsx} (68%)
 rename polaris.shopify.com/{pages/examples/skeleton-thumbnail-small.tsx => app/examples/skeleton-thumbnail-small/page.tsx} (68%)
 rename polaris.shopify.com/{pages/examples/spinner-default.tsx => app/examples/spinner-default/page.tsx} (69%)
 rename polaris.shopify.com/{pages/examples/spinner-small.tsx => app/examples/spinner-small/page.tsx} (70%)
 rename polaris.shopify.com/{pages/examples/spinner-with-focus-management.tsx => app/examples/spinner-with-focus-management/page.tsx} (95%)
 rename polaris.shopify.com/{pages/examples/stack-default.tsx => app/examples/stack-default/page.tsx} (76%)
 rename polaris.shopify.com/{pages/examples/stack-fill-available-space-proportionally.tsx => app/examples/stack-fill-available-space-proportionally/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/stack-non-wrapping.tsx => app/examples/stack-non-wrapping/page.tsx} (77%)
 rename polaris.shopify.com/{pages/examples/stack-spacing.tsx => app/examples/stack-spacing/page.tsx} (73%)
 rename polaris.shopify.com/{pages/examples/stack-vertical-centering.tsx => app/examples/stack-vertical-centering/page.tsx} (80%)
 rename polaris.shopify.com/{pages/examples/stack-where-a-single-item-fills-the-remaining-space.tsx => app/examples/stack-where-a-single-item-fills-the-remaining-space/page.tsx} (82%)
 rename polaris.shopify.com/{pages/examples/stack-where-items-fill-space-evenly.tsx => app/examples/stack-where-items-fill-space-evenly/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/tabs-default.tsx => app/examples/tabs-default/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/tabs-fitted.tsx => app/examples/tabs-fitted/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/tabs-with-badge-content.tsx => app/examples/tabs-with-badge-content/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/tabs-with-custom-disclosure.tsx => app/examples/tabs-with-custom-disclosure/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/tag-clickable.tsx => app/examples/tag-clickable/page.tsx} (68%)
 rename polaris.shopify.com/{pages/examples/tag-default.tsx => app/examples/tag-default/page.tsx} (63%)
 rename polaris.shopify.com/{pages/examples/tag-removable-with-link.tsx => app/examples/tag-removable-with-link/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/tag-removable.tsx => app/examples/tag-removable/page.tsx} (93%)
 rename polaris.shopify.com/{pages/examples/tag-with-custom-content.tsx => app/examples/tag-with-custom-content/page.tsx} (79%)
 rename polaris.shopify.com/{pages/examples/tag-with-link.tsx => app/examples/tag-with-link/page.tsx} (64%)
 rename polaris.shopify.com/{pages/examples/text-align.tsx => app/examples/text-align/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/text-body.tsx => app/examples/text-body/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/text-color.tsx => app/examples/text-color/page.tsx} (91%)
 rename polaris.shopify.com/{pages/examples/text-container-default.tsx => app/examples/text-container-default/page.tsx} (82%)
 rename polaris.shopify.com/{pages/examples/text-container-loose.tsx => app/examples/text-container-loose/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/text-container-tight.tsx => app/examples/text-container-tight/page.tsx} (83%)
 rename polaris.shopify.com/{pages/examples/text-field-default.tsx => app/examples/text-field-default/page.tsx} (82%)
 rename polaris.shopify.com/{pages/examples/text-field-disabled.tsx => app/examples/text-field-disabled/page.tsx} (70%)
 rename polaris.shopify.com/{pages/examples/text-field-email.tsx => app/examples/text-field-email/page.tsx} (83%)
 rename polaris.shopify.com/{pages/examples/text-field-multiline.tsx => app/examples/text-field-multiline/page.tsx} (83%)
 rename polaris.shopify.com/{pages/examples/text-field-number.tsx => app/examples/text-field-number/page.tsx} (82%)
 rename polaris.shopify.com/{pages/examples/text-field-with-character-count.tsx => app/examples/text-field-with-character-count/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/text-field-with-clear-button.tsx => app/examples/text-field-with-clear-button/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/text-field-with-connected-fields.tsx => app/examples/text-field-with-connected-fields/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/text-field-with-help-text.tsx => app/examples/text-field-with-help-text/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/text-field-with-hidden-label.tsx => app/examples/text-field-with-hidden-label/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/text-field-with-inline-suggestion.tsx => app/examples/text-field-with-inline-suggestion/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/text-field-with-label-action.tsx => app/examples/text-field-with-label-action/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/text-field-with-monospaced-font.tsx => app/examples/text-field-with-monospaced-font/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/text-field-with-placeholder-text.tsx => app/examples/text-field-with-placeholder-text/page.tsx} (85%)
 rename polaris.shopify.com/{pages/examples/text-field-with-prefix-or-suffix.tsx => app/examples/text-field-with-prefix-or-suffix/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/text-field-with-right-aligned-text.tsx => app/examples/text-field-with-right-aligned-text/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/text-field-with-separate-validation-error.tsx => app/examples/text-field-with-separate-validation-error/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/text-field-with-validation-error.tsx => app/examples/text-field-with-validation-error/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/text-field-with-value-selected-on-focus.tsx => app/examples/text-field-with-value-selected-on-focus/page.tsx} (84%)
 rename polaris.shopify.com/{pages/examples/text-field-with-vertical-content.tsx => app/examples/text-field-with-vertical-content/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/text-heading.tsx => app/examples/text-heading/page.tsx} (90%)
 rename polaris.shopify.com/{pages/examples/text-weight.tsx => app/examples/text-weight/page.tsx} (86%)
 rename polaris.shopify.com/{pages/examples/thumbnail-default.tsx => app/examples/thumbnail-default/page.tsx} (76%)
 rename polaris.shopify.com/{pages/examples/thumbnail-extra-small.tsx => app/examples/thumbnail-extra-small/page.tsx} (78%)
 rename polaris.shopify.com/{pages/examples/thumbnail-large.tsx => app/examples/thumbnail-large/page.tsx} (77%)
 rename polaris.shopify.com/{pages/examples/thumbnail-small.tsx => app/examples/thumbnail-small/page.tsx} (77%)
 rename polaris.shopify.com/{pages/examples/thumbnail-with-component-source.tsx => app/examples/thumbnail-with-component-source/page.tsx} (74%)
 rename polaris.shopify.com/{pages/examples/toast-default.tsx => app/examples/toast-default/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/toast-error.tsx => app/examples/toast-error/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/toast-multiple-messages.tsx => app/examples/toast-multiple-messages/page.tsx} (92%)
 rename polaris.shopify.com/{pages/examples/toast-with-action.tsx => app/examples/toast-with-action/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/toast-with-custom-duration.tsx => app/examples/toast-with-custom-duration/page.tsx} (87%)
 rename polaris.shopify.com/{pages/examples/tooltip-default.tsx => app/examples/tooltip-default/page.tsx} (80%)
 rename polaris.shopify.com/{pages/examples/tooltip-visible-only-with-child-interaction.tsx => app/examples/tooltip-visible-only-with-child-interaction/page.tsx} (89%)
 rename polaris.shopify.com/{pages/examples/tooltip-with-suffix.tsx => app/examples/tooltip-with-suffix/page.tsx} (83%)
 rename polaris.shopify.com/{pages/examples/top-bar-default.tsx => app/examples/top-bar-default/page.tsx} (96%)
 rename polaris.shopify.com/{pages/examples/video-thumbnail-default.tsx => app/examples/video-thumbnail-default/page.tsx} (88%)
 rename polaris.shopify.com/{pages/examples/video-thumbnail-with-progress.tsx => app/examples/video-thumbnail-with-progress/page.tsx} (89%)
 create mode 100644 polaris.shopify.com/app/layout.tsx
 create mode 100644 polaris.shopify.com/scripts/fix-examples.mjs
 create mode 100644 polaris.shopify.com/scripts/move-examples.mjs

diff --git a/polaris.shopify.com/.vscode/settings.json b/polaris.shopify.com/.vscode/settings.json
new file mode 100644
index 00000000000..d0679104bda
--- /dev/null
+++ b/polaris.shopify.com/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
\ No newline at end of file
diff --git a/polaris.shopify.com/pages/examples/account-connection-default.tsx b/polaris.shopify.com/app/examples/account-connection-default/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/account-connection-default.tsx
rename to polaris.shopify.com/app/examples/account-connection-default/page.tsx
index 36a0a2a8083..362449b1e0f 100644
--- a/polaris.shopify.com/pages/examples/account-connection-default.tsx
+++ b/polaris.shopify.com/app/examples/account-connection-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Link, AccountConnection} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AccountConnectionExample() {
   const [connected, setConnected] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/action-list-in-a-popover.tsx b/polaris.shopify.com/app/examples/action-list-in-a-popover/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/action-list-in-a-popover.tsx
rename to polaris.shopify.com/app/examples/action-list-in-a-popover/page.tsx
index e21c44a35c6..76b9742cf9b 100644
--- a/polaris.shopify.com/pages/examples/action-list-in-a-popover.tsx
+++ b/polaris.shopify.com/app/examples/action-list-in-a-popover/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Popover, ActionList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ActionListInPopoverExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx b/polaris.shopify.com/app/examples/action-list-with-a-prefix-and-a-suffix/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx
rename to polaris.shopify.com/app/examples/action-list-with-a-prefix-and-a-suffix/page.tsx
index f2b9cc97ac8..fcc543f7bd5 100644
--- a/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx
+++ b/polaris.shopify.com/app/examples/action-list-with-a-prefix-and-a-suffix/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {ActionList, Thumbnail, Icon, Avatar} from '@shopify/polaris';
 import {ChevronRightMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ActionListWithPrefixSuffixExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/action-list-with-an-icon-and-a-suffix.tsx b/polaris.shopify.com/app/examples/action-list-with-an-icon-and-a-suffix/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/action-list-with-an-icon-and-a-suffix.tsx
rename to polaris.shopify.com/app/examples/action-list-with-an-icon-and-a-suffix/page.tsx
index 432e39b826d..d2faeea13fd 100644
--- a/polaris.shopify.com/pages/examples/action-list-with-an-icon-and-a-suffix.tsx
+++ b/polaris.shopify.com/app/examples/action-list-with-an-icon-and-a-suffix/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Button, Popover, ActionList, Icon} from '@shopify/polaris';
 import {ImportMinor, TickSmallMinor, ExportMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ActionListWithSuffixExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-destructive-item.tsx b/polaris.shopify.com/app/examples/action-list-with-destructive-item/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/action-list-with-destructive-item.tsx
rename to polaris.shopify.com/app/examples/action-list-with-destructive-item/page.tsx
index ae86412a889..56dbb55837e 100644
--- a/polaris.shopify.com/pages/examples/action-list-with-destructive-item.tsx
+++ b/polaris.shopify.com/app/examples/action-list-with-destructive-item/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Button, Popover, ActionList} from '@shopify/polaris';
 import {ImportMinor, ExportMinor, DeleteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ActionListWithDestructiveItemExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-help-text.tsx b/polaris.shopify.com/app/examples/action-list-with-help-text/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/action-list-with-help-text.tsx
rename to polaris.shopify.com/app/examples/action-list-with-help-text/page.tsx
index 69ef7d08cf8..1cd70d4a043 100644
--- a/polaris.shopify.com/pages/examples/action-list-with-help-text.tsx
+++ b/polaris.shopify.com/app/examples/action-list-with-help-text/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Popover, ActionList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ActionListWithHelpTextExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-icons-or-image.tsx b/polaris.shopify.com/app/examples/action-list-with-icons-or-image/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/action-list-with-icons-or-image.tsx
rename to polaris.shopify.com/app/examples/action-list-with-icons-or-image/page.tsx
index cfb48c247b5..66b96a90963 100644
--- a/polaris.shopify.com/pages/examples/action-list-with-icons-or-image.tsx
+++ b/polaris.shopify.com/app/examples/action-list-with-icons-or-image/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Button, Popover, ActionList} from '@shopify/polaris';
 import {ImportMinor, ExportMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ActionListWithMediaExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/action-list-with-sections.tsx b/polaris.shopify.com/app/examples/action-list-with-sections/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/action-list-with-sections.tsx
rename to polaris.shopify.com/app/examples/action-list-with-sections/page.tsx
index e14df7574a8..7def1412651 100644
--- a/polaris.shopify.com/pages/examples/action-list-with-sections.tsx
+++ b/polaris.shopify.com/app/examples/action-list-with-sections/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {Button, Popover, ActionList} from '@shopify/polaris';
 import {
   ImportMinor,
@@ -6,7 +8,7 @@ import {
   DeleteMinor,
 } from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SectionedActionListExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/alpha-card-default.tsx b/polaris.shopify.com/app/examples/alpha-card-default/page.tsx
similarity index 75%
rename from polaris.shopify.com/pages/examples/alpha-card-default.tsx
rename to polaris.shopify.com/app/examples/alpha-card-default/page.tsx
index 50986b57f56..fb3686e9945 100644
--- a/polaris.shopify.com/pages/examples/alpha-card-default.tsx
+++ b/polaris.shopify.com/app/examples/alpha-card-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {AlphaCard, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AlphaCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx b/polaris.shopify.com/app/examples/alpha-card-with-rounded-corners/page.tsx
similarity index 76%
rename from polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx
rename to polaris.shopify.com/app/examples/alpha-card-with-rounded-corners/page.tsx
index dade684c47f..36ca7f5c4b7 100644
--- a/polaris.shopify.com/pages/examples/alpha-card-with-rounded-corners.tsx
+++ b/polaris.shopify.com/app/examples/alpha-card-with-rounded-corners/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {AlphaCard, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AlphaCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-subdued-background.tsx b/polaris.shopify.com/app/examples/alpha-card-with-subdued-background/page.tsx
similarity index 76%
rename from polaris.shopify.com/pages/examples/alpha-card-with-subdued-background.tsx
rename to polaris.shopify.com/app/examples/alpha-card-with-subdued-background/page.tsx
index c2cf0838a10..8ce8925d534 100644
--- a/polaris.shopify.com/pages/examples/alpha-card-with-subdued-background.tsx
+++ b/polaris.shopify.com/app/examples/alpha-card-with-subdued-background/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {AlphaCard, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AlphaCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx b/polaris.shopify.com/app/examples/alpha-card-with-varying-padding/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx
rename to polaris.shopify.com/app/examples/alpha-card-with-varying-padding/page.tsx
index b40d25aebe0..1d6cb7a0a0d 100644
--- a/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx
+++ b/polaris.shopify.com/app/examples/alpha-card-with-varying-padding/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {AlphaCard, Text, AlphaStack} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AlphaCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-default.tsx b/polaris.shopify.com/app/examples/alpha-stack-default/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/alpha-stack-default.tsx
rename to polaris.shopify.com/app/examples/alpha-stack-default/page.tsx
index b95e2b3f011..1324cc92ecb 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-default.tsx
+++ b/polaris.shopify.com/app/examples/alpha-stack-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {AlphaStack, Text} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AlphaStackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx b/polaris.shopify.com/app/examples/alpha-stack-with-align/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
rename to polaris.shopify.com/app/examples/alpha-stack-with-align/page.tsx
index 9e706e5613c..b5b8258daa9 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
+++ b/polaris.shopify.com/app/examples/alpha-stack-with-align/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {AlphaStack, Page, Inline, Text} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AlphaStackWithAlignExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx b/polaris.shopify.com/app/examples/alpha-stack-with-full-width-children/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx
rename to polaris.shopify.com/app/examples/alpha-stack-with-full-width-children/page.tsx
index 5e6a2744cb1..94c0ff8e051 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx
+++ b/polaris.shopify.com/app/examples/alpha-stack-with-full-width-children/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {AlphaStack, Text} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AlphaStackWithFullWidthChildrenExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx b/polaris.shopify.com/app/examples/alpha-stack-with-gap/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx
rename to polaris.shopify.com/app/examples/alpha-stack-with-gap/page.tsx
index 739ba85c012..69c4f57b3cc 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx
+++ b/polaris.shopify.com/app/examples/alpha-stack-with-gap/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {AlphaStack, Text} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AlphaStackWithGapExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/app-provider-default.tsx b/polaris.shopify.com/app/examples/app-provider-default/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/app-provider-default.tsx
rename to polaris.shopify.com/app/examples/app-provider-default/page.tsx
index a7c7fdecf48..4fe7236ae0f 100644
--- a/polaris.shopify.com/pages/examples/app-provider-default.tsx
+++ b/polaris.shopify.com/app/examples/app-provider-default/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   AppProvider,
   Page,
@@ -7,7 +9,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AppProviderExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx b/polaris.shopify.com/app/examples/app-provider-with-i18n/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx
rename to polaris.shopify.com/app/examples/app-provider-with-i18n/page.tsx
index f4a9f9cecd5..d5fcd145768 100644
--- a/polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx
+++ b/polaris.shopify.com/app/examples/app-provider-with-i18n/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   AppProvider,
   Page,
@@ -7,7 +9,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AppProviderI18NExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/app-provider-with-link-component.tsx b/polaris.shopify.com/app/examples/app-provider-with-link-component/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/app-provider-with-link-component.tsx
rename to polaris.shopify.com/app/examples/app-provider-with-link-component/page.tsx
index 7373957f327..b375fd4b618 100644
--- a/polaris.shopify.com/pages/examples/app-provider-with-link-component.tsx
+++ b/polaris.shopify.com/app/examples/app-provider-with-link-component/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {AppProvider, Page} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AppProviderLinkExample() {
   const CustomLinkComponent = ({children, url, ...rest}) => {
diff --git a/polaris.shopify.com/pages/examples/autocomplete-default.tsx b/polaris.shopify.com/app/examples/autocomplete-default/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/autocomplete-default.tsx
rename to polaris.shopify.com/app/examples/autocomplete-default/page.tsx
index 51bc4d5b002..8e0a1b523f7 100644
--- a/polaris.shopify.com/pages/examples/autocomplete-default.tsx
+++ b/polaris.shopify.com/app/examples/autocomplete-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Autocomplete, Icon} from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AutocompleteExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-action.tsx b/polaris.shopify.com/app/examples/autocomplete-with-action/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/autocomplete-with-action.tsx
rename to polaris.shopify.com/app/examples/autocomplete-with-action/page.tsx
index 0403a1f0373..72ca6b08c11 100644
--- a/polaris.shopify.com/pages/examples/autocomplete-with-action.tsx
+++ b/polaris.shopify.com/app/examples/autocomplete-with-action/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Autocomplete, Icon} from '@shopify/polaris';
 import {SearchMinor, CirclePlusMinor} from '@shopify/polaris-icons';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AutocompleteActionBeforeExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-destructive-action.tsx b/polaris.shopify.com/app/examples/autocomplete-with-destructive-action/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/autocomplete-with-destructive-action.tsx
rename to polaris.shopify.com/app/examples/autocomplete-with-destructive-action/page.tsx
index aca60e1f50c..ff5021e781a 100644
--- a/polaris.shopify.com/pages/examples/autocomplete-with-destructive-action.tsx
+++ b/polaris.shopify.com/app/examples/autocomplete-with-destructive-action/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Autocomplete, Icon} from '@shopify/polaris';
 import {SearchMinor, DeleteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AutocompleteActionBeforeExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-empty-state.tsx b/polaris.shopify.com/app/examples/autocomplete-with-empty-state/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/autocomplete-with-empty-state.tsx
rename to polaris.shopify.com/app/examples/autocomplete-with-empty-state/page.tsx
index 2b9f304c3c2..30401a6eaad 100644
--- a/polaris.shopify.com/pages/examples/autocomplete-with-empty-state.tsx
+++ b/polaris.shopify.com/app/examples/autocomplete-with-empty-state/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Autocomplete, Icon, TextContainer} from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 import React, {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AutocompleteExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-lazy-loading.tsx b/polaris.shopify.com/app/examples/autocomplete-with-lazy-loading/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/autocomplete-with-lazy-loading.tsx
rename to polaris.shopify.com/app/examples/autocomplete-with-lazy-loading/page.tsx
index 0e3c193e069..fc96df4b7d7 100644
--- a/polaris.shopify.com/pages/examples/autocomplete-with-lazy-loading.tsx
+++ b/polaris.shopify.com/app/examples/autocomplete-with-lazy-loading/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Autocomplete, Tag, LegacyStack} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AutoCompleteLazyLoadExample() {
   const paginationInterval = 25;
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-loading.tsx b/polaris.shopify.com/app/examples/autocomplete-with-loading/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/autocomplete-with-loading.tsx
rename to polaris.shopify.com/app/examples/autocomplete-with-loading/page.tsx
index fefd902e0a9..83b10b35cbf 100644
--- a/polaris.shopify.com/pages/examples/autocomplete-with-loading.tsx
+++ b/polaris.shopify.com/app/examples/autocomplete-with-loading/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Autocomplete, Icon} from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AutocompleteExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-multiple-sections.tsx b/polaris.shopify.com/app/examples/autocomplete-with-multiple-sections/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/autocomplete-with-multiple-sections.tsx
rename to polaris.shopify.com/app/examples/autocomplete-with-multiple-sections/page.tsx
index d29dcf5af72..af51fec1451 100644
--- a/polaris.shopify.com/pages/examples/autocomplete-with-multiple-sections.tsx
+++ b/polaris.shopify.com/app/examples/autocomplete-with-multiple-sections/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Autocomplete, Icon} from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AutocompleteExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-multiple-tags.tsx b/polaris.shopify.com/app/examples/autocomplete-with-multiple-tags/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/autocomplete-with-multiple-tags.tsx
rename to polaris.shopify.com/app/examples/autocomplete-with-multiple-tags/page.tsx
index b2904fd9554..3bc8eb15b8a 100644
--- a/polaris.shopify.com/pages/examples/autocomplete-with-multiple-tags.tsx
+++ b/polaris.shopify.com/app/examples/autocomplete-with-multiple-tags/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, Tag, Autocomplete} from '@shopify/polaris';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MultiAutocompleteExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/autocomplete-with-wrapping-action.tsx b/polaris.shopify.com/app/examples/autocomplete-with-wrapping-action/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/autocomplete-with-wrapping-action.tsx
rename to polaris.shopify.com/app/examples/autocomplete-with-wrapping-action/page.tsx
index 98bfdc0aa71..a7c3ab48d0d 100644
--- a/polaris.shopify.com/pages/examples/autocomplete-with-wrapping-action.tsx
+++ b/polaris.shopify.com/app/examples/autocomplete-with-wrapping-action/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Autocomplete, Icon} from '@shopify/polaris';
 import {SearchMinor, CirclePlusMinor} from '@shopify/polaris-icons';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AutocompleteActionBeforeExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/avatar-default.tsx b/polaris.shopify.com/app/examples/avatar-default/page.tsx
similarity index 66%
rename from polaris.shopify.com/pages/examples/avatar-default.tsx
rename to polaris.shopify.com/app/examples/avatar-default/page.tsx
index 97eff02e80a..5442776fd00 100644
--- a/polaris.shopify.com/pages/examples/avatar-default.tsx
+++ b/polaris.shopify.com/app/examples/avatar-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Avatar} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AvatarExample() {
   return <Avatar customer name="Farrah" />;
diff --git a/polaris.shopify.com/pages/examples/avatar-extra-small.tsx b/polaris.shopify.com/app/examples/avatar-extra-small/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/avatar-extra-small.tsx
rename to polaris.shopify.com/app/examples/avatar-extra-small/page.tsx
index 83a9faa5eb1..3dacdeac6bf 100644
--- a/polaris.shopify.com/pages/examples/avatar-extra-small.tsx
+++ b/polaris.shopify.com/app/examples/avatar-extra-small/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Popover, ActionList, Avatar} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ExtraSmallAvatarExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/avatar-square.tsx b/polaris.shopify.com/app/examples/avatar-square/page.tsx
similarity index 67%
rename from polaris.shopify.com/pages/examples/avatar-square.tsx
rename to polaris.shopify.com/app/examples/avatar-square/page.tsx
index a08b37a7ad7..44d7c35198f 100644
--- a/polaris.shopify.com/pages/examples/avatar-square.tsx
+++ b/polaris.shopify.com/app/examples/avatar-square/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Avatar} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function AvatarExample() {
   return <Avatar name="Shop One" shape="square" />;
diff --git a/polaris.shopify.com/pages/examples/badge-attention.tsx b/polaris.shopify.com/app/examples/badge-attention/page.tsx
similarity index 66%
rename from polaris.shopify.com/pages/examples/badge-attention.tsx
rename to polaris.shopify.com/app/examples/badge-attention/page.tsx
index a0ae22c50c4..acee1aa27a7 100644
--- a/polaris.shopify.com/pages/examples/badge-attention.tsx
+++ b/polaris.shopify.com/app/examples/badge-attention/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return <Badge status="attention">Open</Badge>;
diff --git a/polaris.shopify.com/pages/examples/badge-complete.tsx b/polaris.shopify.com/app/examples/badge-complete/page.tsx
similarity index 67%
rename from polaris.shopify.com/pages/examples/badge-complete.tsx
rename to polaris.shopify.com/app/examples/badge-complete/page.tsx
index 0862b11d46d..840036f2651 100644
--- a/polaris.shopify.com/pages/examples/badge-complete.tsx
+++ b/polaris.shopify.com/app/examples/badge-complete/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return <Badge progress="complete">Fulfilled</Badge>;
diff --git a/polaris.shopify.com/pages/examples/badge-critical.tsx b/polaris.shopify.com/app/examples/badge-critical/page.tsx
similarity index 67%
rename from polaris.shopify.com/pages/examples/badge-critical.tsx
rename to polaris.shopify.com/app/examples/badge-critical/page.tsx
index 494d469d2f0..3bb916228d2 100644
--- a/polaris.shopify.com/pages/examples/badge-critical.tsx
+++ b/polaris.shopify.com/app/examples/badge-critical/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return <Badge status="critical">Action required</Badge>;
diff --git a/polaris.shopify.com/pages/examples/badge-default.tsx b/polaris.shopify.com/app/examples/badge-default/page.tsx
similarity index 65%
rename from polaris.shopify.com/pages/examples/badge-default.tsx
rename to polaris.shopify.com/app/examples/badge-default/page.tsx
index a76f02a19d8..510f7e8078b 100644
--- a/polaris.shopify.com/pages/examples/badge-default.tsx
+++ b/polaris.shopify.com/app/examples/badge-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return <Badge>Fulfilled</Badge>;
diff --git a/polaris.shopify.com/pages/examples/badge-incomplete.tsx b/polaris.shopify.com/app/examples/badge-incomplete/page.tsx
similarity index 71%
rename from polaris.shopify.com/pages/examples/badge-incomplete.tsx
rename to polaris.shopify.com/app/examples/badge-incomplete/page.tsx
index 46a615701c7..a944fc7d703 100644
--- a/polaris.shopify.com/pages/examples/badge-incomplete.tsx
+++ b/polaris.shopify.com/app/examples/badge-incomplete/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/badge-informational.tsx b/polaris.shopify.com/app/examples/badge-informational/page.tsx
similarity index 66%
rename from polaris.shopify.com/pages/examples/badge-informational.tsx
rename to polaris.shopify.com/app/examples/badge-informational/page.tsx
index f5823fc4294..e78072b1ef5 100644
--- a/polaris.shopify.com/pages/examples/badge-informational.tsx
+++ b/polaris.shopify.com/app/examples/badge-informational/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return <Badge status="info">Draft</Badge>;
diff --git a/polaris.shopify.com/pages/examples/badge-partially-complete.tsx b/polaris.shopify.com/app/examples/badge-partially-complete/page.tsx
similarity index 72%
rename from polaris.shopify.com/pages/examples/badge-partially-complete.tsx
rename to polaris.shopify.com/app/examples/badge-partially-complete/page.tsx
index 7516df35bb9..0dd4c2ba7d6 100644
--- a/polaris.shopify.com/pages/examples/badge-partially-complete.tsx
+++ b/polaris.shopify.com/app/examples/badge-partially-complete/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/badge-small.tsx b/polaris.shopify.com/app/examples/badge-small/page.tsx
similarity index 66%
rename from polaris.shopify.com/pages/examples/badge-small.tsx
rename to polaris.shopify.com/app/examples/badge-small/page.tsx
index 53be196ffe3..911c3e491f4 100644
--- a/polaris.shopify.com/pages/examples/badge-small.tsx
+++ b/polaris.shopify.com/app/examples/badge-small/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return <Badge size="small">Fulfilled</Badge>;
diff --git a/polaris.shopify.com/pages/examples/badge-success.tsx b/polaris.shopify.com/app/examples/badge-success/page.tsx
similarity index 66%
rename from polaris.shopify.com/pages/examples/badge-success.tsx
rename to polaris.shopify.com/app/examples/badge-success/page.tsx
index 3eda9e067d0..60f8f81ee6a 100644
--- a/polaris.shopify.com/pages/examples/badge-success.tsx
+++ b/polaris.shopify.com/app/examples/badge-success/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return <Badge status="success">Active</Badge>;
diff --git a/polaris.shopify.com/pages/examples/badge-warning.tsx b/polaris.shopify.com/app/examples/badge-warning/page.tsx
similarity index 66%
rename from polaris.shopify.com/pages/examples/badge-warning.tsx
rename to polaris.shopify.com/app/examples/badge-warning/page.tsx
index 2520caaa444..552d841c931 100644
--- a/polaris.shopify.com/pages/examples/badge-warning.tsx
+++ b/polaris.shopify.com/app/examples/badge-warning/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return <Badge status="warning">On hold</Badge>;
diff --git a/polaris.shopify.com/pages/examples/badge-with-status-and-progress-label-override.tsx b/polaris.shopify.com/app/examples/badge-with-status-and-progress-label-override/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/badge-with-status-and-progress-label-override.tsx
rename to polaris.shopify.com/app/examples/badge-with-status-and-progress-label-override/page.tsx
index 20ac58a5ca1..e97d536dd58 100644
--- a/polaris.shopify.com/pages/examples/badge-with-status-and-progress-label-override.tsx
+++ b/polaris.shopify.com/app/examples/badge-with-status-and-progress-label-override/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BadgeExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/banner-critical.tsx b/polaris.shopify.com/app/examples/banner-critical/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/banner-critical.tsx
rename to polaris.shopify.com/app/examples/banner-critical/page.tsx
index b9528607fd0..43963c1f084 100644
--- a/polaris.shopify.com/pages/examples/banner-critical.tsx
+++ b/polaris.shopify.com/app/examples/banner-critical/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Banner, Link} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BannerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/banner-default.tsx b/polaris.shopify.com/app/examples/banner-default/page.tsx
similarity index 75%
rename from polaris.shopify.com/pages/examples/banner-default.tsx
rename to polaris.shopify.com/app/examples/banner-default/page.tsx
index 95fd88af1d8..622bda3d1c7 100644
--- a/polaris.shopify.com/pages/examples/banner-default.tsx
+++ b/polaris.shopify.com/app/examples/banner-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Banner} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BannerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/banner-dismissible.tsx b/polaris.shopify.com/app/examples/banner-dismissible/page.tsx
similarity index 79%
rename from polaris.shopify.com/pages/examples/banner-dismissible.tsx
rename to polaris.shopify.com/app/examples/banner-dismissible/page.tsx
index ca889889782..b1cebeb199a 100644
--- a/polaris.shopify.com/pages/examples/banner-dismissible.tsx
+++ b/polaris.shopify.com/app/examples/banner-dismissible/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Banner, Link} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BannerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/banner-in-a-card.tsx b/polaris.shopify.com/app/examples/banner-in-a-card/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/banner-in-a-card.tsx
rename to polaris.shopify.com/app/examples/banner-in-a-card/page.tsx
index 5a9e07a3673..11963250011 100644
--- a/polaris.shopify.com/pages/examples/banner-in-a-card.tsx
+++ b/polaris.shopify.com/app/examples/banner-in-a-card/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, TextContainer, Banner, Link} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BannerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/banner-in-a-modal.tsx b/polaris.shopify.com/app/examples/banner-in-a-modal/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/banner-in-a-modal.tsx
rename to polaris.shopify.com/app/examples/banner-in-a-modal/page.tsx
index 2aab09ce6b7..533c8a943a3 100644
--- a/polaris.shopify.com/pages/examples/banner-in-a-modal.tsx
+++ b/polaris.shopify.com/app/examples/banner-in-a-modal/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Modal, TextContainer, Banner} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BannerInModalExample() {
   const [active, setActive] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/banner-informational.tsx b/polaris.shopify.com/app/examples/banner-informational/page.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/banner-informational.tsx
rename to polaris.shopify.com/app/examples/banner-informational/page.tsx
index 7aec36301bd..5538464bd8b 100644
--- a/polaris.shopify.com/pages/examples/banner-informational.tsx
+++ b/polaris.shopify.com/app/examples/banner-informational/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Banner} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BannerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/banner-success.tsx b/polaris.shopify.com/app/examples/banner-success/page.tsx
similarity index 77%
rename from polaris.shopify.com/pages/examples/banner-success.tsx
rename to polaris.shopify.com/app/examples/banner-success/page.tsx
index f53a274d0b8..f648eee1f5b 100644
--- a/polaris.shopify.com/pages/examples/banner-success.tsx
+++ b/polaris.shopify.com/app/examples/banner-success/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Banner} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BannerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/banner-warning.tsx b/polaris.shopify.com/app/examples/banner-warning/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/banner-warning.tsx
rename to polaris.shopify.com/app/examples/banner-warning/page.tsx
index 4e9accf3df4..1a7d69d29e7 100644
--- a/polaris.shopify.com/pages/examples/banner-warning.tsx
+++ b/polaris.shopify.com/app/examples/banner-warning/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Banner, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BannerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/banner-with-focus.tsx b/polaris.shopify.com/app/examples/banner-with-focus/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/banner-with-focus.tsx
rename to polaris.shopify.com/app/examples/banner-with-focus/page.tsx
index 1af958f97a6..9e218812912 100644
--- a/polaris.shopify.com/pages/examples/banner-with-focus.tsx
+++ b/polaris.shopify.com/app/examples/banner-with-focus/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Banner} from '@shopify/polaris';
 import {useEffect, useRef} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BannerWithFocusExample() {
   const banner = useRef();
diff --git a/polaris.shopify.com/pages/examples/banner-with-footer-call-to-action.tsx b/polaris.shopify.com/app/examples/banner-with-footer-call-to-action/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/banner-with-footer-call-to-action.tsx
rename to polaris.shopify.com/app/examples/banner-with-footer-call-to-action/page.tsx
index e114e46ed59..6b96cca9b8d 100644
--- a/polaris.shopify.com/pages/examples/banner-with-footer-call-to-action.tsx
+++ b/polaris.shopify.com/app/examples/banner-with-footer-call-to-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Banner} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BannerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/bleed-all-directions.tsx b/polaris.shopify.com/app/examples/bleed-all-directions/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/bleed-all-directions.tsx
rename to polaris.shopify.com/app/examples/bleed-all-directions/page.tsx
index 6c96d716127..e6d9986a0c4 100644
--- a/polaris.shopify.com/pages/examples/bleed-all-directions.tsx
+++ b/polaris.shopify.com/app/examples/bleed-all-directions/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Bleed, Box, Text, Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BleedAllDirectionsExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx b/polaris.shopify.com/app/examples/bleed-horizontal/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/bleed-horizontal.tsx
rename to polaris.shopify.com/app/examples/bleed-horizontal/page.tsx
index acb7ab88420..7bf5822f5b4 100644
--- a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
+++ b/polaris.shopify.com/app/examples/bleed-horizontal/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Bleed, Box, Text, Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BleedHorizontalExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/app/examples/bleed-specific-direction/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
rename to polaris.shopify.com/app/examples/bleed-specific-direction/page.tsx
index 297205058fd..bba3b996aae 100644
--- a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
+++ b/polaris.shopify.com/app/examples/bleed-specific-direction/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {AlphaStack, Bleed, Box, Text, Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BleedSpecificDirectionExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/bleed-vertical.tsx b/polaris.shopify.com/app/examples/bleed-vertical/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/bleed-vertical.tsx
rename to polaris.shopify.com/app/examples/bleed-vertical/page.tsx
index 695a06e4a4d..cded710fec8 100644
--- a/polaris.shopify.com/pages/examples/bleed-vertical.tsx
+++ b/polaris.shopify.com/app/examples/bleed-vertical/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Bleed, Box, Text, Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BleedVerticalExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/box-default.tsx b/polaris.shopify.com/app/examples/box-default/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/box-default.tsx
rename to polaris.shopify.com/app/examples/box-default/page.tsx
index 2f2254e5065..faf15b50fde 100644
--- a/polaris.shopify.com/pages/examples/box-default.tsx
+++ b/polaris.shopify.com/app/examples/box-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Box, Text} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BoxDefaultExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/box-with-border-radius.tsx b/polaris.shopify.com/app/examples/box-with-border-radius/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/box-with-border-radius.tsx
rename to polaris.shopify.com/app/examples/box-with-border-radius/page.tsx
index 208560e8193..eca5d453ea2 100644
--- a/polaris.shopify.com/pages/examples/box-with-border-radius.tsx
+++ b/polaris.shopify.com/app/examples/box-with-border-radius/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Box, Text} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BoxWithBorderRadiusExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/box-with-border.tsx b/polaris.shopify.com/app/examples/box-with-border/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/box-with-border.tsx
rename to polaris.shopify.com/app/examples/box-with-border/page.tsx
index 70463ac0f04..1a899b8b0a8 100644
--- a/polaris.shopify.com/pages/examples/box-with-border.tsx
+++ b/polaris.shopify.com/app/examples/box-with-border/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Box, Text} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BoxWithBorderExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/box-with-color.tsx b/polaris.shopify.com/app/examples/box-with-color/page.tsx
similarity index 77%
rename from polaris.shopify.com/pages/examples/box-with-color.tsx
rename to polaris.shopify.com/app/examples/box-with-color/page.tsx
index 8789b92cb0f..61f08786d46 100644
--- a/polaris.shopify.com/pages/examples/box-with-color.tsx
+++ b/polaris.shopify.com/app/examples/box-with-color/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Box, Text} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BoxWithColorExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/app/examples/box-with-padding/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/box-with-padding.tsx
rename to polaris.shopify.com/app/examples/box-with-padding/page.tsx
index 5e8faabe37c..4af28562538 100644
--- a/polaris.shopify.com/pages/examples/box-with-padding.tsx
+++ b/polaris.shopify.com/app/examples/box-with-padding/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {AlphaStack, Box, LegacyStack, Text, Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BoxWithPaddingExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/box-with-shadow.tsx b/polaris.shopify.com/app/examples/box-with-shadow/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/box-with-shadow.tsx
rename to polaris.shopify.com/app/examples/box-with-shadow/page.tsx
index 7405c9fc7e2..288e06dcb4c 100644
--- a/polaris.shopify.com/pages/examples/box-with-shadow.tsx
+++ b/polaris.shopify.com/app/examples/box-with-shadow/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Box, Text} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BoxWithShadowExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/button-default.tsx b/polaris.shopify.com/app/examples/button-default/page.tsx
similarity index 65%
rename from polaris.shopify.com/pages/examples/button-default.tsx
rename to polaris.shopify.com/app/examples/button-default/page.tsx
index 3ba730b232a..c529b08698c 100644
--- a/polaris.shopify.com/pages/examples/button-default.tsx
+++ b/polaris.shopify.com/app/examples/button-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return <Button>Add product</Button>;
diff --git a/polaris.shopify.com/pages/examples/button-destructive.tsx b/polaris.shopify.com/app/examples/button-destructive/page.tsx
similarity index 67%
rename from polaris.shopify.com/pages/examples/button-destructive.tsx
rename to polaris.shopify.com/app/examples/button-destructive/page.tsx
index 8ac32c70bd2..7db123b2cda 100644
--- a/polaris.shopify.com/pages/examples/button-destructive.tsx
+++ b/polaris.shopify.com/app/examples/button-destructive/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return <Button destructive>Delete theme</Button>;
diff --git a/polaris.shopify.com/pages/examples/button-disabled-state.tsx b/polaris.shopify.com/app/examples/button-disabled-state/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/button-disabled-state.tsx
rename to polaris.shopify.com/app/examples/button-disabled-state/page.tsx
index d55927c7f9d..a2cf5a4f186 100644
--- a/polaris.shopify.com/pages/examples/button-disabled-state.tsx
+++ b/polaris.shopify.com/app/examples/button-disabled-state/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ButtonGroup, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/button-full-width.tsx b/polaris.shopify.com/app/examples/button-full-width/page.tsx
similarity index 67%
rename from polaris.shopify.com/pages/examples/button-full-width.tsx
rename to polaris.shopify.com/app/examples/button-full-width/page.tsx
index 13d5b186934..74c7d7f2773 100644
--- a/polaris.shopify.com/pages/examples/button-full-width.tsx
+++ b/polaris.shopify.com/app/examples/button-full-width/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return <Button fullWidth>Add customer</Button>;
diff --git a/polaris.shopify.com/pages/examples/button-group-default.tsx b/polaris.shopify.com/app/examples/button-group-default/page.tsx
similarity index 75%
rename from polaris.shopify.com/pages/examples/button-group-default.tsx
rename to polaris.shopify.com/app/examples/button-group-default/page.tsx
index e8ba4162632..48231b3b3ae 100644
--- a/polaris.shopify.com/pages/examples/button-group-default.tsx
+++ b/polaris.shopify.com/app/examples/button-group-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ButtonGroup, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonGroupExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/button-group-outline-with-segmented-buttons.tsx b/polaris.shopify.com/app/examples/button-group-outline-with-segmented-buttons/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/button-group-outline-with-segmented-buttons.tsx
rename to polaris.shopify.com/app/examples/button-group-outline-with-segmented-buttons/page.tsx
index dc38bafbb03..054c6e3a92c 100644
--- a/polaris.shopify.com/pages/examples/button-group-outline-with-segmented-buttons.tsx
+++ b/polaris.shopify.com/app/examples/button-group-outline-with-segmented-buttons/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ButtonGroup, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonGroupExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/button-group-with-segmented-buttons.tsx b/polaris.shopify.com/app/examples/button-group-with-segmented-buttons/page.tsx
similarity index 77%
rename from polaris.shopify.com/pages/examples/button-group-with-segmented-buttons.tsx
rename to polaris.shopify.com/app/examples/button-group-with-segmented-buttons/page.tsx
index 595242c32d1..fc5553c7db5 100644
--- a/polaris.shopify.com/pages/examples/button-group-with-segmented-buttons.tsx
+++ b/polaris.shopify.com/app/examples/button-group-with-segmented-buttons/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ButtonGroup, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonGroupExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/button-large.tsx b/polaris.shopify.com/app/examples/button-large/page.tsx
similarity index 67%
rename from polaris.shopify.com/pages/examples/button-large.tsx
rename to polaris.shopify.com/app/examples/button-large/page.tsx
index 2e47891c246..01cac04b2df 100644
--- a/polaris.shopify.com/pages/examples/button-large.tsx
+++ b/polaris.shopify.com/app/examples/button-large/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return <Button size="large">Create store</Button>;
diff --git a/polaris.shopify.com/pages/examples/button-loading-state.tsx b/polaris.shopify.com/app/examples/button-loading-state/page.tsx
similarity index 67%
rename from polaris.shopify.com/pages/examples/button-loading-state.tsx
rename to polaris.shopify.com/app/examples/button-loading-state/page.tsx
index 8940ab715ae..fc69d84665d 100644
--- a/polaris.shopify.com/pages/examples/button-loading-state.tsx
+++ b/polaris.shopify.com/app/examples/button-loading-state/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return <Button loading>Save product</Button>;
diff --git a/polaris.shopify.com/pages/examples/button-outline-monochrome.tsx b/polaris.shopify.com/app/examples/button-outline-monochrome/page.tsx
similarity index 74%
rename from polaris.shopify.com/pages/examples/button-outline-monochrome.tsx
rename to polaris.shopify.com/app/examples/button-outline-monochrome/page.tsx
index 2545223c12f..22ba54ac480 100644
--- a/polaris.shopify.com/pages/examples/button-outline-monochrome.tsx
+++ b/polaris.shopify.com/app/examples/button-outline-monochrome/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/button-outline.tsx b/polaris.shopify.com/app/examples/button-outline/page.tsx
similarity index 66%
rename from polaris.shopify.com/pages/examples/button-outline.tsx
rename to polaris.shopify.com/app/examples/button-outline/page.tsx
index 0f31768401a..7b840543274 100644
--- a/polaris.shopify.com/pages/examples/button-outline.tsx
+++ b/polaris.shopify.com/app/examples/button-outline/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return <Button outline>Add product</Button>;
diff --git a/polaris.shopify.com/pages/examples/button-plain-destructive.tsx b/polaris.shopify.com/app/examples/button-plain-destructive/page.tsx
similarity index 69%
rename from polaris.shopify.com/pages/examples/button-plain-destructive.tsx
rename to polaris.shopify.com/app/examples/button-plain-destructive/page.tsx
index 744e3b63362..1383bfa38ab 100644
--- a/polaris.shopify.com/pages/examples/button-plain-destructive.tsx
+++ b/polaris.shopify.com/app/examples/button-plain-destructive/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/button-plain-disclosure.tsx b/polaris.shopify.com/app/examples/button-plain-disclosure/page.tsx
similarity index 81%
rename from polaris.shopify.com/pages/examples/button-plain-disclosure.tsx
rename to polaris.shopify.com/app/examples/button-plain-disclosure/page.tsx
index f160cd219d7..5af5ed7be2f 100644
--- a/polaris.shopify.com/pages/examples/button-plain-disclosure.tsx
+++ b/polaris.shopify.com/app/examples/button-plain-disclosure/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DisclosureButton() {
   const [expanded, setExpanded] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx b/polaris.shopify.com/app/examples/button-plain-monochrome/page.tsx
similarity index 74%
rename from polaris.shopify.com/pages/examples/button-plain-monochrome.tsx
rename to polaris.shopify.com/app/examples/button-plain-monochrome/page.tsx
index 8160eaa542d..c51d15e3386 100644
--- a/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx
+++ b/polaris.shopify.com/app/examples/button-plain-monochrome/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/button-plain.tsx b/polaris.shopify.com/app/examples/button-plain/page.tsx
similarity index 67%
rename from polaris.shopify.com/pages/examples/button-plain.tsx
rename to polaris.shopify.com/app/examples/button-plain/page.tsx
index 85859fad096..652202202a5 100644
--- a/polaris.shopify.com/pages/examples/button-plain.tsx
+++ b/polaris.shopify.com/app/examples/button-plain/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return <Button plain>View shipping settings</Button>;
diff --git a/polaris.shopify.com/pages/examples/button-pressed.tsx b/polaris.shopify.com/app/examples/button-pressed/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/button-pressed.tsx
rename to polaris.shopify.com/app/examples/button-pressed/page.tsx
index 4ed7dd95975..5dc439622f5 100644
--- a/polaris.shopify.com/pages/examples/button-pressed.tsx
+++ b/polaris.shopify.com/app/examples/button-pressed/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ButtonGroup, Button} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PressedButton() {
   const [isFirstButtonActive, setIsFirstButtonActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/button-primary.tsx b/polaris.shopify.com/app/examples/button-primary/page.tsx
similarity index 66%
rename from polaris.shopify.com/pages/examples/button-primary.tsx
rename to polaris.shopify.com/app/examples/button-primary/page.tsx
index c89d055051e..42e68edec1f 100644
--- a/polaris.shopify.com/pages/examples/button-primary.tsx
+++ b/polaris.shopify.com/app/examples/button-primary/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return <Button primary>Save theme</Button>;
diff --git a/polaris.shopify.com/pages/examples/button-right-aligned-disclosure.tsx b/polaris.shopify.com/app/examples/button-right-aligned-disclosure/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/button-right-aligned-disclosure.tsx
rename to polaris.shopify.com/app/examples/button-right-aligned-disclosure/page.tsx
index cdc7c6169b9..59efb92e6e1 100644
--- a/polaris.shopify.com/pages/examples/button-right-aligned-disclosure.tsx
+++ b/polaris.shopify.com/app/examples/button-right-aligned-disclosure/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function RightAlignedDisclosureButton() {
   const [expanded, setExpanded] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/button-select-disclosure.tsx b/polaris.shopify.com/app/examples/button-select-disclosure/page.tsx
similarity index 77%
rename from polaris.shopify.com/pages/examples/button-select-disclosure.tsx
rename to polaris.shopify.com/app/examples/button-select-disclosure/page.tsx
index 73c5e1ecf06..03f80f0c704 100644
--- a/polaris.shopify.com/pages/examples/button-select-disclosure.tsx
+++ b/polaris.shopify.com/app/examples/button-select-disclosure/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/button-slim.tsx b/polaris.shopify.com/app/examples/button-slim/page.tsx
similarity index 67%
rename from polaris.shopify.com/pages/examples/button-slim.tsx
rename to polaris.shopify.com/app/examples/button-slim/page.tsx
index 2d072b1bcc2..e5bbb3e961a 100644
--- a/polaris.shopify.com/pages/examples/button-slim.tsx
+++ b/polaris.shopify.com/app/examples/button-slim/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return <Button size="slim">Save variant</Button>;
diff --git a/polaris.shopify.com/pages/examples/button-split.tsx b/polaris.shopify.com/app/examples/button-split/page.tsx
similarity index 81%
rename from polaris.shopify.com/pages/examples/button-split.tsx
rename to polaris.shopify.com/app/examples/button-split/page.tsx
index 6f2f800677f..7c5120a093b 100644
--- a/polaris.shopify.com/pages/examples/button-split.tsx
+++ b/polaris.shopify.com/app/examples/button-split/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/button-text-aligned.tsx b/polaris.shopify.com/app/examples/button-text-aligned/page.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/button-text-aligned.tsx
rename to polaris.shopify.com/app/examples/button-text-aligned/page.tsx
index b98cc2a3d83..b268d99f97c 100644
--- a/polaris.shopify.com/pages/examples/button-text-aligned.tsx
+++ b/polaris.shopify.com/app/examples/button-text-aligned/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ButtonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/callout-card-default.tsx b/polaris.shopify.com/app/examples/callout-card-default/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/callout-card-default.tsx
rename to polaris.shopify.com/app/examples/callout-card-default/page.tsx
index 37659536183..db89ae7f974 100644
--- a/polaris.shopify.com/pages/examples/callout-card-default.tsx
+++ b/polaris.shopify.com/app/examples/callout-card-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {CalloutCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return (
diff --git a/polaris.shopify.com/pages/examples/callout-card-dismissable.tsx b/polaris.shopify.com/app/examples/callout-card-dismissable/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/callout-card-dismissable.tsx
rename to polaris.shopify.com/app/examples/callout-card-dismissable/page.tsx
index edf7faeb505..9cd4b6f5181 100644
--- a/polaris.shopify.com/pages/examples/callout-card-dismissable.tsx
+++ b/polaris.shopify.com/app/examples/callout-card-dismissable/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {CalloutCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return (
diff --git a/polaris.shopify.com/pages/examples/callout-card-with-secondary-action.tsx b/polaris.shopify.com/app/examples/callout-card-with-secondary-action/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/callout-card-with-secondary-action.tsx
rename to polaris.shopify.com/app/examples/callout-card-with-secondary-action/page.tsx
index 2ad2aa532b4..0d4a590373f 100644
--- a/polaris.shopify.com/pages/examples/callout-card-with-secondary-action.tsx
+++ b/polaris.shopify.com/app/examples/callout-card-with-secondary-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {CalloutCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-default.tsx b/polaris.shopify.com/app/examples/card-default/page.tsx
similarity index 74%
rename from polaris.shopify.com/pages/examples/card-default.tsx
rename to polaris.shopify.com/app/examples/card-default/page.tsx
index d6d4d282497..1463c51aecf 100644
--- a/polaris.shopify.com/pages/examples/card-default.tsx
+++ b/polaris.shopify.com/app/examples/card-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-a-subdued-section.tsx b/polaris.shopify.com/app/examples/card-with-a-subdued-section/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/card-with-a-subdued-section.tsx
rename to polaris.shopify.com/app/examples/card-with-a-subdued-section/page.tsx
index 8688b8dd5a9..de1f769169d 100644
--- a/polaris.shopify.com/pages/examples/card-with-a-subdued-section.tsx
+++ b/polaris.shopify.com/app/examples/card-with-a-subdued-section/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-all-elements.tsx b/polaris.shopify.com/app/examples/card-with-all-elements/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/card-with-all-elements.tsx
rename to polaris.shopify.com/app/examples/card-with-all-elements/page.tsx
index 73d0e53db74..0ed02b8f47b 100644
--- a/polaris.shopify.com/pages/examples/card-with-all-elements.tsx
+++ b/polaris.shopify.com/app/examples/card-with-all-elements/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Card,
   Popover,
@@ -9,7 +11,7 @@ import {
   List,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-custom-footer-actions.tsx b/polaris.shopify.com/app/examples/card-with-custom-footer-actions/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/card-with-custom-footer-actions.tsx
rename to polaris.shopify.com/app/examples/card-with-custom-footer-actions/page.tsx
index 3639d8d0aaa..bccc9439d66 100644
--- a/polaris.shopify.com/pages/examples/card-with-custom-footer-actions.tsx
+++ b/polaris.shopify.com/app/examples/card-with-custom-footer-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, LegacyStack, ButtonGroup, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-custom-react-node-title.tsx b/polaris.shopify.com/app/examples/card-with-custom-react-node-title/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/card-with-custom-react-node-title.tsx
rename to polaris.shopify.com/app/examples/card-with-custom-react-node-title/page.tsx
index 1eb354ddfa1..e3a3c1a81a6 100644
--- a/polaris.shopify.com/pages/examples/card-with-custom-react-node-title.tsx
+++ b/polaris.shopify.com/app/examples/card-with-custom-react-node-title/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Card, LegacyStack, Icon, List, Text} from '@shopify/polaris';
 import {ProductsMajor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-destructive-action.tsx b/polaris.shopify.com/app/examples/card-with-destructive-action/page.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/card-with-destructive-action.tsx
rename to polaris.shopify.com/app/examples/card-with-destructive-action/page.tsx
index 8adbe3e272e..06cca26d28e 100644
--- a/polaris.shopify.com/pages/examples/card-with-destructive-action.tsx
+++ b/polaris.shopify.com/app/examples/card-with-destructive-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-destructive-footer-action.tsx b/polaris.shopify.com/app/examples/card-with-destructive-footer-action/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/card-with-destructive-footer-action.tsx
rename to polaris.shopify.com/app/examples/card-with-destructive-footer-action/page.tsx
index 7b5ed2be756..5b416b28b42 100644
--- a/polaris.shopify.com/pages/examples/card-with-destructive-footer-action.tsx
+++ b/polaris.shopify.com/app/examples/card-with-destructive-footer-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-flushed-sections.tsx b/polaris.shopify.com/app/examples/card-with-flushed-sections/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/card-with-flushed-sections.tsx
rename to polaris.shopify.com/app/examples/card-with-flushed-sections/page.tsx
index d92188de877..598b492f855 100644
--- a/polaris.shopify.com/pages/examples/card-with-flushed-sections.tsx
+++ b/polaris.shopify.com/app/examples/card-with-flushed-sections/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card, Image, TextContainer} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-footer-actions.tsx b/polaris.shopify.com/app/examples/card-with-footer-actions/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/card-with-footer-actions.tsx
rename to polaris.shopify.com/app/examples/card-with-footer-actions/page.tsx
index 762d8abe773..9f65b791fe3 100644
--- a/polaris.shopify.com/pages/examples/card-with-footer-actions.tsx
+++ b/polaris.shopify.com/app/examples/card-with-footer-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-header-actions.tsx b/polaris.shopify.com/app/examples/card-with-header-actions/page.tsx
similarity index 79%
rename from polaris.shopify.com/pages/examples/card-with-header-actions.tsx
rename to polaris.shopify.com/app/examples/card-with-header-actions/page.tsx
index bedf0ccec79..187e9fc92f9 100644
--- a/polaris.shopify.com/pages/examples/card-with-header-actions.tsx
+++ b/polaris.shopify.com/app/examples/card-with-header-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-multiple-footer-actions.tsx b/polaris.shopify.com/app/examples/card-with-multiple-footer-actions/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/card-with-multiple-footer-actions.tsx
rename to polaris.shopify.com/app/examples/card-with-multiple-footer-actions/page.tsx
index 5c5b383f34b..2046d864c43 100644
--- a/polaris.shopify.com/pages/examples/card-with-multiple-footer-actions.tsx
+++ b/polaris.shopify.com/app/examples/card-with-multiple-footer-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-multiple-sections.tsx b/polaris.shopify.com/app/examples/card-with-multiple-sections/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/card-with-multiple-sections.tsx
rename to polaris.shopify.com/app/examples/card-with-multiple-sections/page.tsx
index c45601246a6..45dfb4e9808 100644
--- a/polaris.shopify.com/pages/examples/card-with-multiple-sections.tsx
+++ b/polaris.shopify.com/app/examples/card-with-multiple-sections/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-multiple-titled-sections.tsx b/polaris.shopify.com/app/examples/card-with-multiple-titled-sections/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/card-with-multiple-titled-sections.tsx
rename to polaris.shopify.com/app/examples/card-with-multiple-titled-sections/page.tsx
index 88e470bd1cd..24c857811fd 100644
--- a/polaris.shopify.com/pages/examples/card-with-multiple-titled-sections.tsx
+++ b/polaris.shopify.com/app/examples/card-with-multiple-titled-sections/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-sections-and-actions.tsx b/polaris.shopify.com/app/examples/card-with-sections-and-actions/page.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/card-with-sections-and-actions.tsx
rename to polaris.shopify.com/app/examples/card-with-sections-and-actions/page.tsx
index 1db87cb7304..a7a8c478de8 100644
--- a/polaris.shopify.com/pages/examples/card-with-sections-and-actions.tsx
+++ b/polaris.shopify.com/app/examples/card-with-sections-and-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-separate-header.tsx b/polaris.shopify.com/app/examples/card-with-separate-header/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/card-with-separate-header.tsx
rename to polaris.shopify.com/app/examples/card-with-separate-header/page.tsx
index c764f6a6488..de2e287b803 100644
--- a/polaris.shopify.com/pages/examples/card-with-separate-header.tsx
+++ b/polaris.shopify.com/app/examples/card-with-separate-header/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card, Popover, Button, ActionList, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-subdued-for-secondary-content.tsx b/polaris.shopify.com/app/examples/card-with-subdued-for-secondary-content/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/card-with-subdued-for-secondary-content.tsx
rename to polaris.shopify.com/app/examples/card-with-subdued-for-secondary-content/page.tsx
index cbe2dcb9815..53668469e33 100644
--- a/polaris.shopify.com/pages/examples/card-with-subdued-for-secondary-content.tsx
+++ b/polaris.shopify.com/app/examples/card-with-subdued-for-secondary-content/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/card-with-subsection.tsx b/polaris.shopify.com/app/examples/card-with-subsection/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/card-with-subsection.tsx
rename to polaris.shopify.com/app/examples/card-with-subsection/page.tsx
index ed71c4e4295..0852a8245d5 100644
--- a/polaris.shopify.com/pages/examples/card-with-subsection.tsx
+++ b/polaris.shopify.com/app/examples/card-with-subsection/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Card} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/checkbox-default.tsx b/polaris.shopify.com/app/examples/checkbox-default/page.tsx
similarity index 81%
rename from polaris.shopify.com/pages/examples/checkbox-default.tsx
rename to polaris.shopify.com/app/examples/checkbox-default/page.tsx
index 21273c69926..bb1f7bb5c9c 100644
--- a/polaris.shopify.com/pages/examples/checkbox-default.tsx
+++ b/polaris.shopify.com/app/examples/checkbox-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Checkbox} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CheckboxExample() {
   const [checked, setChecked] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/choice-list-default.tsx b/polaris.shopify.com/app/examples/choice-list-default/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/choice-list-default.tsx
rename to polaris.shopify.com/app/examples/choice-list-default/page.tsx
index a7497309d72..0a2e69600d3 100644
--- a/polaris.shopify.com/pages/examples/choice-list-default.tsx
+++ b/polaris.shopify.com/app/examples/choice-list-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ChoiceList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SingleChoiceListExample() {
   const [selected, setSelected] = useState(['hidden']);
diff --git a/polaris.shopify.com/pages/examples/choice-list-with-children-content.tsx b/polaris.shopify.com/app/examples/choice-list-with-children-content/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/choice-list-with-children-content.tsx
rename to polaris.shopify.com/app/examples/choice-list-with-children-content/page.tsx
index 7a4601e5fbf..abb37ca3a51 100644
--- a/polaris.shopify.com/pages/examples/choice-list-with-children-content.tsx
+++ b/polaris.shopify.com/app/examples/choice-list-with-children-content/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField, ChoiceList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SingleOrMultiChoiceListWithChildrenContextExample() {
   const [selected, setSelected] = useState(['none']);
diff --git a/polaris.shopify.com/pages/examples/choice-list-with-dynamic-children-content.tsx b/polaris.shopify.com/app/examples/choice-list-with-dynamic-children-content/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/choice-list-with-dynamic-children-content.tsx
rename to polaris.shopify.com/app/examples/choice-list-with-dynamic-children-content/page.tsx
index 2c0b8cbcecc..0225459df87 100644
--- a/polaris.shopify.com/pages/examples/choice-list-with-dynamic-children-content.tsx
+++ b/polaris.shopify.com/app/examples/choice-list-with-dynamic-children-content/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField, ChoiceList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SingleOrMultuChoiceListWithChildrenContextWhenSelectedExample() {
   const [selected, setSelected] = useState(['none']);
diff --git a/polaris.shopify.com/pages/examples/choice-list-with-error.tsx b/polaris.shopify.com/app/examples/choice-list-with-error/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/choice-list-with-error.tsx
rename to polaris.shopify.com/app/examples/choice-list-with-error/page.tsx
index 1ac420ee047..59c8d4ff616 100644
--- a/polaris.shopify.com/pages/examples/choice-list-with-error.tsx
+++ b/polaris.shopify.com/app/examples/choice-list-with-error/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ChoiceList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ChoiceListWithErrorExample() {
   const [selected, setSelected] = useState('hidden');
diff --git a/polaris.shopify.com/pages/examples/choice-list-with-multi-choice.tsx b/polaris.shopify.com/app/examples/choice-list-with-multi-choice/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/choice-list-with-multi-choice.tsx
rename to polaris.shopify.com/app/examples/choice-list-with-multi-choice/page.tsx
index 3f308615482..0892b640c74 100644
--- a/polaris.shopify.com/pages/examples/choice-list-with-multi-choice.tsx
+++ b/polaris.shopify.com/app/examples/choice-list-with-multi-choice/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ChoiceList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MultiChoiceListExample() {
   const [selected, setSelected] = useState(['hidden']);
diff --git a/polaris.shopify.com/pages/examples/collapsible-default.tsx b/polaris.shopify.com/app/examples/collapsible-default/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/collapsible-default.tsx
rename to polaris.shopify.com/app/examples/collapsible-default/page.tsx
index 331c1ec4794..ac55b4ac1ac 100644
--- a/polaris.shopify.com/pages/examples/collapsible-default.tsx
+++ b/polaris.shopify.com/app/examples/collapsible-default/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LegacyCard,
   LegacyStack,
@@ -7,7 +9,7 @@ import {
   Link,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function CollapsibleExample() {
   const [open, setOpen] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/color-picker-default.tsx b/polaris.shopify.com/app/examples/color-picker-default/page.tsx
similarity index 77%
rename from polaris.shopify.com/pages/examples/color-picker-default.tsx
rename to polaris.shopify.com/app/examples/color-picker-default/page.tsx
index 3275cc017e9..cb6149434f5 100644
--- a/polaris.shopify.com/pages/examples/color-picker-default.tsx
+++ b/polaris.shopify.com/app/examples/color-picker-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ColorPicker} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ColorPickerExample() {
   const [color, setColor] = useState({
diff --git a/polaris.shopify.com/pages/examples/color-picker-with-transparent-value-full-width.tsx b/polaris.shopify.com/app/examples/color-picker-with-transparent-value-full-width/page.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/color-picker-with-transparent-value-full-width.tsx
rename to polaris.shopify.com/app/examples/color-picker-with-transparent-value-full-width/page.tsx
index c7aea3f29ae..a1999c5d7cf 100644
--- a/polaris.shopify.com/pages/examples/color-picker-with-transparent-value-full-width.tsx
+++ b/polaris.shopify.com/app/examples/color-picker-with-transparent-value-full-width/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ColorPicker} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ColorPickerWithTransparentValueExample() {
   const [color, setColor] = useState({
diff --git a/polaris.shopify.com/pages/examples/color-picker-with-transparent-value.tsx b/polaris.shopify.com/app/examples/color-picker-with-transparent-value/page.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/color-picker-with-transparent-value.tsx
rename to polaris.shopify.com/app/examples/color-picker-with-transparent-value/page.tsx
index 08577f0b530..1c46a3bc09d 100644
--- a/polaris.shopify.com/pages/examples/color-picker-with-transparent-value.tsx
+++ b/polaris.shopify.com/app/examples/color-picker-with-transparent-value/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ColorPicker} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ColorPickerWithTransparentValueExample() {
   const [color, setColor] = useState({
diff --git a/polaris.shopify.com/pages/examples/columns-default.tsx b/polaris.shopify.com/app/examples/columns-default/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/columns-default.tsx
rename to polaris.shopify.com/app/examples/columns-default/page.tsx
index 35ed8f63226..cd2a554ff72 100644
--- a/polaris.shopify.com/pages/examples/columns-default.tsx
+++ b/polaris.shopify.com/app/examples/columns-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Columns, Text, Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ColumnsExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx b/polaris.shopify.com/app/examples/columns-with-fixed-widths/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
rename to polaris.shopify.com/app/examples/columns-with-fixed-widths/page.tsx
index b07660680cd..a5c5d0aed2d 100644
--- a/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
+++ b/polaris.shopify.com/app/examples/columns-with-fixed-widths/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Columns, Text, Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ColumnsWithFreeAndFixedWidthsExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/columns-with-set-number.tsx b/polaris.shopify.com/app/examples/columns-with-set-number/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/columns-with-set-number.tsx
rename to polaris.shopify.com/app/examples/columns-with-set-number/page.tsx
index 533a1282858..9341e2b6b96 100644
--- a/polaris.shopify.com/pages/examples/columns-with-set-number.tsx
+++ b/polaris.shopify.com/app/examples/columns-with-set-number/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Columns, Text, Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ColumnsWithSetNumberExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/columns-with-varying-gap.tsx b/polaris.shopify.com/app/examples/columns-with-varying-gap/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/columns-with-varying-gap.tsx
rename to polaris.shopify.com/app/examples/columns-with-varying-gap/page.tsx
index 09ce580cf50..e88ce666eef 100644
--- a/polaris.shopify.com/pages/examples/columns-with-varying-gap.tsx
+++ b/polaris.shopify.com/app/examples/columns-with-varying-gap/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Columns, Text, Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ColumnsWithVaryingGapExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/combobox-default.tsx b/polaris.shopify.com/app/examples/combobox-default/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/combobox-default.tsx
rename to polaris.shopify.com/app/examples/combobox-default/page.tsx
index 4825d442247..4524792769c 100644
--- a/polaris.shopify.com/pages/examples/combobox-default.tsx
+++ b/polaris.shopify.com/app/examples/combobox-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Listbox, Combobox, Icon} from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ComboboxExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/combobox-with-loading.tsx b/polaris.shopify.com/app/examples/combobox-with-loading/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/combobox-with-loading.tsx
rename to polaris.shopify.com/app/examples/combobox-with-loading/page.tsx
index 6b00925aae1..ef0a8addef4 100644
--- a/polaris.shopify.com/pages/examples/combobox-with-loading.tsx
+++ b/polaris.shopify.com/app/examples/combobox-with-loading/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Listbox, Combobox, Icon} from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LoadingAutocompleteExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/combobox-with-manual-selection.tsx b/polaris.shopify.com/app/examples/combobox-with-manual-selection/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/combobox-with-manual-selection.tsx
rename to polaris.shopify.com/app/examples/combobox-with-manual-selection/page.tsx
index b3eb60a0747..64a9367402b 100644
--- a/polaris.shopify.com/pages/examples/combobox-with-manual-selection.tsx
+++ b/polaris.shopify.com/app/examples/combobox-with-manual-selection/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Tag,
   Listbox,
@@ -9,7 +11,7 @@ import {
 } from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MultiComboboxExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-manual-selection.tsx b/polaris.shopify.com/app/examples/combobox-with-multi-select-and-manual-selection/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/combobox-with-multi-select-and-manual-selection.tsx
rename to polaris.shopify.com/app/examples/combobox-with-multi-select-and-manual-selection/page.tsx
index 46c66efd6ef..29f4ba761cb 100644
--- a/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-manual-selection.tsx
+++ b/polaris.shopify.com/app/examples/combobox-with-multi-select-and-manual-selection/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Tag,
   Listbox,
@@ -8,7 +10,7 @@ import {
 } from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MultiManualComboboxExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-vertical-content.tsx b/polaris.shopify.com/app/examples/combobox-with-multi-select-and-vertical-content/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/combobox-with-multi-select-and-vertical-content.tsx
rename to polaris.shopify.com/app/examples/combobox-with-multi-select-and-vertical-content/page.tsx
index 87ea3f969f1..9dfd65ef14c 100644
--- a/polaris.shopify.com/pages/examples/combobox-with-multi-select-and-vertical-content.tsx
+++ b/polaris.shopify.com/app/examples/combobox-with-multi-select-and-vertical-content/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LegacyStack,
   Tag,
@@ -7,7 +9,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MultiselectTagComboboxExample() {
   const [selectedTags, setSelectedTags] = useState(['Rustic']);
diff --git a/polaris.shopify.com/pages/examples/combobox-with-multi-select.tsx b/polaris.shopify.com/app/examples/combobox-with-multi-select/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/combobox-with-multi-select.tsx
rename to polaris.shopify.com/app/examples/combobox-with-multi-select/page.tsx
index 96c45f2ffee..5e69b905f70 100644
--- a/polaris.shopify.com/pages/examples/combobox-with-multi-select.tsx
+++ b/polaris.shopify.com/app/examples/combobox-with-multi-select/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LegacyStack,
   Tag,
@@ -11,7 +13,7 @@ import {SearchMinor} from '@shopify/polaris-icons';
 
 import {useState, useCallback, useMemo} from 'react';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MultiAutoComboboxExample() {
   const deselectedOptions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/contextual-save-bar-default.tsx b/polaris.shopify.com/app/examples/contextual-save-bar-default/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/contextual-save-bar-default.tsx
rename to polaris.shopify.com/app/examples/contextual-save-bar-default/page.tsx
index 9ed55c25986..24191e28754 100644
--- a/polaris.shopify.com/pages/examples/contextual-save-bar-default.tsx
+++ b/polaris.shopify.com/app/examples/contextual-save-bar-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Frame, ContextualSaveBar} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return (
diff --git a/polaris.shopify.com/pages/examples/contextual-save-bar-with-flush-contents.tsx b/polaris.shopify.com/app/examples/contextual-save-bar-with-flush-contents/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/contextual-save-bar-with-flush-contents.tsx
rename to polaris.shopify.com/app/examples/contextual-save-bar-with-flush-contents/page.tsx
index 617d134b278..5004a81b161 100644
--- a/polaris.shopify.com/pages/examples/contextual-save-bar-with-flush-contents.tsx
+++ b/polaris.shopify.com/app/examples/contextual-save-bar-with-flush-contents/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Frame, ContextualSaveBar} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return (
diff --git a/polaris.shopify.com/pages/examples/contextual-save-bar-with-full-width.tsx b/polaris.shopify.com/app/examples/contextual-save-bar-with-full-width/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/contextual-save-bar-with-full-width.tsx
rename to polaris.shopify.com/app/examples/contextual-save-bar-with-full-width/page.tsx
index 48a5112f661..86ff88d55ff 100644
--- a/polaris.shopify.com/pages/examples/contextual-save-bar-with-full-width.tsx
+++ b/polaris.shopify.com/app/examples/contextual-save-bar-with-full-width/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Frame, ContextualSaveBar} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return (
diff --git a/polaris.shopify.com/pages/examples/data-table-default.tsx b/polaris.shopify.com/app/examples/data-table-default/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/data-table-default.tsx
rename to polaris.shopify.com/app/examples/data-table-default/page.tsx
index da4484f6f61..7b0b4b76976 100644
--- a/polaris.shopify.com/pages/examples/data-table-default.tsx
+++ b/polaris.shopify.com/app/examples/data-table-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, LegacyCard, DataTable} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DataTableExample() {
   const rows = [
diff --git a/polaris.shopify.com/pages/examples/data-table-sortable.tsx b/polaris.shopify.com/app/examples/data-table-sortable/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/data-table-sortable.tsx
rename to polaris.shopify.com/app/examples/data-table-sortable/page.tsx
index 8a659e25d67..0a2a4bcfdbb 100644
--- a/polaris.shopify.com/pages/examples/data-table-sortable.tsx
+++ b/polaris.shopify.com/app/examples/data-table-sortable/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, LegacyCard, DataTable} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SortableDataTableExample() {
   const [sortedRows, setSortedRows] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/data-table-with-all-of-its-elements.tsx b/polaris.shopify.com/app/examples/data-table-with-all-of-its-elements/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/data-table-with-all-of-its-elements.tsx
rename to polaris.shopify.com/app/examples/data-table-with-all-of-its-elements/page.tsx
index f282d3ae53c..c98a04ce4c6 100644
--- a/polaris.shopify.com/pages/examples/data-table-with-all-of-its-elements.tsx
+++ b/polaris.shopify.com/app/examples/data-table-with-all-of-its-elements/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Link, Page, LegacyCard, DataTable} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FullDataTableExample() {
   const [sortedRows, setSortedRows] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/data-table-with-custom-totals-heading.tsx b/polaris.shopify.com/app/examples/data-table-with-custom-totals-heading/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/data-table-with-custom-totals-heading.tsx
rename to polaris.shopify.com/app/examples/data-table-with-custom-totals-heading/page.tsx
index 542832f8a3a..9cb461418d8 100644
--- a/polaris.shopify.com/pages/examples/data-table-with-custom-totals-heading.tsx
+++ b/polaris.shopify.com/app/examples/data-table-with-custom-totals-heading/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, LegacyCard, DataTable} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DataTableExample() {
   const rows = [
diff --git a/polaris.shopify.com/pages/examples/data-table-with-fixed-first-columns.tsx b/polaris.shopify.com/app/examples/data-table-with-fixed-first-columns/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/data-table-with-fixed-first-columns.tsx
rename to polaris.shopify.com/app/examples/data-table-with-fixed-first-columns/page.tsx
index 95441cb83bf..038868220cf 100644
--- a/polaris.shopify.com/pages/examples/data-table-with-fixed-first-columns.tsx
+++ b/polaris.shopify.com/app/examples/data-table-with-fixed-first-columns/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Link, Page, LegacyCard, DataTable, useBreakpoints} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DataTableWithFixedFirstColumnsExample() {
   const rows = [
diff --git a/polaris.shopify.com/pages/examples/data-table-with-footer.tsx b/polaris.shopify.com/app/examples/data-table-with-footer/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/data-table-with-footer.tsx
rename to polaris.shopify.com/app/examples/data-table-with-footer/page.tsx
index 2d23338b5f2..25e31b8bb66 100644
--- a/polaris.shopify.com/pages/examples/data-table-with-footer.tsx
+++ b/polaris.shopify.com/app/examples/data-table-with-footer/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, LegacyCard, DataTable} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DataTableFooterExample() {
   const rows = [
diff --git a/polaris.shopify.com/pages/examples/data-table-with-increased-density-and-zebra-striping.tsx b/polaris.shopify.com/app/examples/data-table-with-increased-density-and-zebra-striping/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/data-table-with-increased-density-and-zebra-striping.tsx
rename to polaris.shopify.com/app/examples/data-table-with-increased-density-and-zebra-striping/page.tsx
index 9448453f1fe..145fa027f65 100644
--- a/polaris.shopify.com/pages/examples/data-table-with-increased-density-and-zebra-striping.tsx
+++ b/polaris.shopify.com/app/examples/data-table-with-increased-density-and-zebra-striping/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Link, Page, LegacyCard, DataTable} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FullDataTableExample() {
   const [sortedRows, setSortedRows] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/data-table-with-row-heading-links.tsx b/polaris.shopify.com/app/examples/data-table-with-row-heading-links/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/data-table-with-row-heading-links.tsx
rename to polaris.shopify.com/app/examples/data-table-with-row-heading-links/page.tsx
index e03e2932903..fc058cd82a3 100644
--- a/polaris.shopify.com/pages/examples/data-table-with-row-heading-links.tsx
+++ b/polaris.shopify.com/app/examples/data-table-with-row-heading-links/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Link, Page, LegacyCard, DataTable} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DataTableLinkExample() {
   const rows = [
diff --git a/polaris.shopify.com/pages/examples/data-table-with-sticky-header-enabled.tsx b/polaris.shopify.com/app/examples/data-table-with-sticky-header-enabled/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/data-table-with-sticky-header-enabled.tsx
rename to polaris.shopify.com/app/examples/data-table-with-sticky-header-enabled/page.tsx
index ce45af6c44e..8acaa7f5a8a 100644
--- a/polaris.shopify.com/pages/examples/data-table-with-sticky-header-enabled.tsx
+++ b/polaris.shopify.com/app/examples/data-table-with-sticky-header-enabled/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Link, Page, LegacyCard, DataTable} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FullDataTableExample() {
   const [sortedRows, setSortedRows] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/data-table-with-totals-in-footer.tsx b/polaris.shopify.com/app/examples/data-table-with-totals-in-footer/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/data-table-with-totals-in-footer.tsx
rename to polaris.shopify.com/app/examples/data-table-with-totals-in-footer/page.tsx
index 9a2fc2f7ffb..8a7eb10ad24 100644
--- a/polaris.shopify.com/pages/examples/data-table-with-totals-in-footer.tsx
+++ b/polaris.shopify.com/app/examples/data-table-with-totals-in-footer/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, LegacyCard, DataTable} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DataTableExample() {
   const rows = [
diff --git a/polaris.shopify.com/pages/examples/date-picker-default.tsx b/polaris.shopify.com/app/examples/date-picker-default/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/date-picker-default.tsx
rename to polaris.shopify.com/app/examples/date-picker-default/page.tsx
index 083ecee005d..d0e854d5f0f 100644
--- a/polaris.shopify.com/pages/examples/date-picker-default.tsx
+++ b/polaris.shopify.com/app/examples/date-picker-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {DatePicker} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DatePickerExample() {
   const [{month, year}, setDate] = useState({month: 1, year: 2018});
diff --git a/polaris.shopify.com/pages/examples/date-picker-multi-month-ranged.tsx b/polaris.shopify.com/app/examples/date-picker-multi-month-ranged/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/date-picker-multi-month-ranged.tsx
rename to polaris.shopify.com/app/examples/date-picker-multi-month-ranged/page.tsx
index 03f62458044..8e19873f413 100644
--- a/polaris.shopify.com/pages/examples/date-picker-multi-month-ranged.tsx
+++ b/polaris.shopify.com/app/examples/date-picker-multi-month-ranged/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {DatePicker} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DatePickerExample() {
   const [{month, year}, setDate] = useState({month: 1, year: 2018});
diff --git a/polaris.shopify.com/pages/examples/date-picker-ranged.tsx b/polaris.shopify.com/app/examples/date-picker-ranged/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/date-picker-ranged.tsx
rename to polaris.shopify.com/app/examples/date-picker-ranged/page.tsx
index 03c82d95e32..ca6b9b21038 100644
--- a/polaris.shopify.com/pages/examples/date-picker-ranged.tsx
+++ b/polaris.shopify.com/app/examples/date-picker-ranged/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {DatePicker} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DatePickerExample() {
   const [{month, year}, setDate] = useState({month: 1, year: 2018});
diff --git a/polaris.shopify.com/pages/examples/date-picker-with-disabled-date-ranges.tsx b/polaris.shopify.com/app/examples/date-picker-with-disabled-date-ranges/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/date-picker-with-disabled-date-ranges.tsx
rename to polaris.shopify.com/app/examples/date-picker-with-disabled-date-ranges/page.tsx
index c3ec5bfae9b..e8c48f1659e 100644
--- a/polaris.shopify.com/pages/examples/date-picker-with-disabled-date-ranges.tsx
+++ b/polaris.shopify.com/app/examples/date-picker-with-disabled-date-ranges/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {DatePicker} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DatePickerExample() {
   const [{month, year}, setDate] = useState({month: 1, year: 2018});
diff --git a/polaris.shopify.com/pages/examples/date-picker-with-specific-disabled-dates.tsx b/polaris.shopify.com/app/examples/date-picker-with-specific-disabled-dates/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/date-picker-with-specific-disabled-dates.tsx
rename to polaris.shopify.com/app/examples/date-picker-with-specific-disabled-dates/page.tsx
index 32afb97f8d4..67b27dfe798 100644
--- a/polaris.shopify.com/pages/examples/date-picker-with-specific-disabled-dates.tsx
+++ b/polaris.shopify.com/app/examples/date-picker-with-specific-disabled-dates/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {DatePicker} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DatePickerExample() {
   const [{month, year}, setDate] = useState({month: 1, year: 2018});
diff --git a/polaris.shopify.com/pages/examples/description-list-default.tsx b/polaris.shopify.com/app/examples/description-list-default/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/description-list-default.tsx
rename to polaris.shopify.com/app/examples/description-list-default/page.tsx
index 9280b65a031..e48729113ea 100644
--- a/polaris.shopify.com/pages/examples/description-list-default.tsx
+++ b/polaris.shopify.com/app/examples/description-list-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {DescriptionList} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return (
diff --git a/polaris.shopify.com/pages/examples/divider-with-border-styles.tsx b/polaris.shopify.com/app/examples/divider-with-border-styles/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/divider-with-border-styles.tsx
rename to polaris.shopify.com/app/examples/divider-with-border-styles/page.tsx
index cd8f052524a..ae90b7c9dd6 100644
--- a/polaris.shopify.com/pages/examples/divider-with-border-styles.tsx
+++ b/polaris.shopify.com/app/examples/divider-with-border-styles/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Divider, Text, AlphaStack} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DividerWithBorderStylesExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/drop-zone-accepts-only-svg-files.tsx b/polaris.shopify.com/app/examples/drop-zone-accepts-only-svg-files/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/drop-zone-accepts-only-svg-files.tsx
rename to polaris.shopify.com/app/examples/drop-zone-accepts-only-svg-files/page.tsx
index b72a9f59f08..9af069e321d 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-accepts-only-svg-files.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-accepts-only-svg-files/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LegacyStack,
   Thumbnail,
@@ -7,7 +9,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DropZoneAcceptingSVGFilesExample() {
   const [files, setFiles] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/drop-zone-default.tsx b/polaris.shopify.com/app/examples/drop-zone-default/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/drop-zone-default.tsx
rename to polaris.shopify.com/app/examples/drop-zone-default/page.tsx
index 9e9bf8067bb..a8c69c2580c 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-default.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {DropZone, LegacyStack, Thumbnail, Text} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DropZoneExample() {
   const [files, setFiles] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/drop-zone-medium-sized.tsx b/polaris.shopify.com/app/examples/drop-zone-medium-sized/page.tsx
similarity index 75%
rename from polaris.shopify.com/pages/examples/drop-zone-medium-sized.tsx
rename to polaris.shopify.com/app/examples/drop-zone-medium-sized/page.tsx
index f42992c7a9c..ba02f5deadc 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-medium-sized.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-medium-sized/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {DropZone} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DropZoneExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/drop-zone-nested.tsx b/polaris.shopify.com/app/examples/drop-zone-nested/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/drop-zone-nested.tsx
rename to polaris.shopify.com/app/examples/drop-zone-nested/page.tsx
index b7bde6eb554..9e60f2475f2 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-nested.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-nested/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   DropZone,
   LegacyStack,
@@ -7,7 +9,7 @@ import {
 } from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NestedDropZoneExample() {
   const [files, setFiles] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/drop-zone-small-sized.tsx b/polaris.shopify.com/app/examples/drop-zone-small-sized/page.tsx
similarity index 75%
rename from polaris.shopify.com/pages/examples/drop-zone-small-sized.tsx
rename to polaris.shopify.com/app/examples/drop-zone-small-sized/page.tsx
index bd3620e5204..25e2ab11550 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-small-sized.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-small-sized/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {DropZone} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DropZoneExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-a-label.tsx b/polaris.shopify.com/app/examples/drop-zone-with-a-label/page.tsx
similarity index 72%
rename from polaris.shopify.com/pages/examples/drop-zone-with-a-label.tsx
rename to polaris.shopify.com/app/examples/drop-zone-with-a-label/page.tsx
index 189dbb8f4ab..88f90bb5c14 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-with-a-label.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-with-a-label/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {DropZone} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DropZoneExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-custom-file-dialog-trigger.tsx b/polaris.shopify.com/app/examples/drop-zone-with-custom-file-dialog-trigger/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/drop-zone-with-custom-file-dialog-trigger.tsx
rename to polaris.shopify.com/app/examples/drop-zone-with-custom-file-dialog-trigger/page.tsx
index 8694be77bd8..35ed6dd3c6e 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-with-custom-file-dialog-trigger.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-with-custom-file-dialog-trigger/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LegacyStack,
   Thumbnail,
@@ -7,7 +9,7 @@ import {
 } from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DropZoneWithCustomFileDialogExample() {
   const [files, setFiles] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-custom-file-upload-text.tsx b/polaris.shopify.com/app/examples/drop-zone-with-custom-file-upload-text/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/drop-zone-with-custom-file-upload-text.tsx
rename to polaris.shopify.com/app/examples/drop-zone-with-custom-file-upload-text/page.tsx
index b5f0e4b251c..73809521afb 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-with-custom-file-upload-text.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-with-custom-file-upload-text/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {DropZone, LegacyStack, Thumbnail, Text} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DropZoneExample() {
   const [files, setFiles] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-drop-on-page.tsx b/polaris.shopify.com/app/examples/drop-zone-with-drop-on-page/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/drop-zone-with-drop-on-page.tsx
rename to polaris.shopify.com/app/examples/drop-zone-with-drop-on-page/page.tsx
index 747d15b2d16..01912072bb0 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-with-drop-on-page.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-with-drop-on-page/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {LegacyStack, Thumbnail, DropZone, Page, Text} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DropZoneWithDropOnPageExample() {
   const [files, setFiles] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-image-file-upload.tsx b/polaris.shopify.com/app/examples/drop-zone-with-image-file-upload/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/drop-zone-with-image-file-upload.tsx
rename to polaris.shopify.com/app/examples/drop-zone-with-image-file-upload/page.tsx
index a19e2a3cab0..82c337d419b 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-with-image-file-upload.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-with-image-file-upload/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   DropZone,
   LegacyStack,
@@ -7,7 +9,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DropZoneWithImageFileUpload() {
   const [files, setFiles] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/drop-zone-with-single-file-upload.tsx b/polaris.shopify.com/app/examples/drop-zone-with-single-file-upload/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/drop-zone-with-single-file-upload.tsx
rename to polaris.shopify.com/app/examples/drop-zone-with-single-file-upload/page.tsx
index 1d1ff0217c7..4c3ba820b6c 100644
--- a/polaris.shopify.com/pages/examples/drop-zone-with-single-file-upload.tsx
+++ b/polaris.shopify.com/app/examples/drop-zone-with-single-file-upload/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {DropZone, LegacyStack, Thumbnail, Text} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DropZoneExample() {
   const [file, setFile] = useState();
diff --git a/polaris.shopify.com/pages/examples/empty-state-default.tsx b/polaris.shopify.com/app/examples/empty-state-default/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/empty-state-default.tsx
rename to polaris.shopify.com/app/examples/empty-state-default/page.tsx
index ed3f43d14a1..d71d7bf51e2 100644
--- a/polaris.shopify.com/pages/examples/empty-state-default.tsx
+++ b/polaris.shopify.com/app/examples/empty-state-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, EmptyState} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function EmptyStateExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/empty-state-with-full-width-layout.tsx b/polaris.shopify.com/app/examples/empty-state-with-full-width-layout/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/empty-state-with-full-width-layout.tsx
rename to polaris.shopify.com/app/examples/empty-state-with-full-width-layout/page.tsx
index 49ef1461c6d..a82ef285b82 100644
--- a/polaris.shopify.com/pages/examples/empty-state-with-full-width-layout.tsx
+++ b/polaris.shopify.com/app/examples/empty-state-with-full-width-layout/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, EmptyState} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function EmptyStateExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/empty-state-with-subdued-footer-context.tsx b/polaris.shopify.com/app/examples/empty-state-with-subdued-footer-context/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/empty-state-with-subdued-footer-context.tsx
rename to polaris.shopify.com/app/examples/empty-state-with-subdued-footer-context/page.tsx
index f7b7e7fcab3..20b0d0cf295 100644
--- a/polaris.shopify.com/pages/examples/empty-state-with-subdued-footer-context.tsx
+++ b/polaris.shopify.com/app/examples/empty-state-with-subdued-footer-context/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, EmptyState, Link} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function EmptyStateExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/exception-list-default.tsx b/polaris.shopify.com/app/examples/exception-list-default/page.tsx
similarity index 81%
rename from polaris.shopify.com/pages/examples/exception-list-default.tsx
rename to polaris.shopify.com/app/examples/exception-list-default/page.tsx
index f4f131f250a..43d97d5df41 100644
--- a/polaris.shopify.com/pages/examples/exception-list-default.tsx
+++ b/polaris.shopify.com/app/examples/exception-list-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {ExceptionList} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ExceptionListExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/filters-disabled.tsx b/polaris.shopify.com/app/examples/filters-disabled/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/filters-disabled.tsx
rename to polaris.shopify.com/app/examples/filters-disabled/page.tsx
index 744072b8d74..67a1f45a1c7 100644
--- a/polaris.shopify.com/pages/examples/filters-disabled.tsx
+++ b/polaris.shopify.com/app/examples/filters-disabled/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   TextField,
   LegacyCard,
@@ -8,7 +10,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DisableAllFiltersExample() {
   const [taggedWith, setTaggedWith] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/filters-some-disabled.tsx b/polaris.shopify.com/app/examples/filters-some-disabled/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/filters-some-disabled.tsx
rename to polaris.shopify.com/app/examples/filters-some-disabled/page.tsx
index 508f219d9f8..27934e71418 100644
--- a/polaris.shopify.com/pages/examples/filters-some-disabled.tsx
+++ b/polaris.shopify.com/app/examples/filters-some-disabled/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   TextField,
   LegacyCard,
@@ -8,7 +10,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DisableSomeFiltersExample() {
   const [taggedWith, setTaggedWith] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/filters-with-a-data-table.tsx b/polaris.shopify.com/app/examples/filters-with-a-data-table/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/filters-with-a-data-table.tsx
rename to polaris.shopify.com/app/examples/filters-with-a-data-table/page.tsx
index cd6635fdbe6..8fd329ca468 100644
--- a/polaris.shopify.com/pages/examples/filters-with-a-data-table.tsx
+++ b/polaris.shopify.com/app/examples/filters-with-a-data-table/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   ChoiceList,
   TextField,
@@ -6,7 +8,7 @@ import {
   DataTable,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DataTableFiltersExample() {
   const [availability, setAvailability] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx b/polaris.shopify.com/app/examples/filters-with-a-resource-list/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx
rename to polaris.shopify.com/app/examples/filters-with-a-resource-list/page.tsx
index f21961affd5..61b2045d555 100644
--- a/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx
+++ b/polaris.shopify.com/app/examples/filters-with-a-resource-list/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   ChoiceList,
   TextField,
@@ -9,7 +11,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListFiltersExample() {
   const [accountStatus, setAccountStatus] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/filters-with-children-content.tsx b/polaris.shopify.com/app/examples/filters-with-children-content/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/filters-with-children-content.tsx
rename to polaris.shopify.com/app/examples/filters-with-children-content/page.tsx
index f102edb3aad..645bb284383 100644
--- a/polaris.shopify.com/pages/examples/filters-with-children-content.tsx
+++ b/polaris.shopify.com/app/examples/filters-with-children-content/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   TextField,
   LegacyCard,
@@ -8,7 +10,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FiltersExample() {
   const [taggedWith, setTaggedWith] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/filters-with-help-text.tsx b/polaris.shopify.com/app/examples/filters-with-help-text/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/filters-with-help-text.tsx
rename to polaris.shopify.com/app/examples/filters-with-help-text/page.tsx
index 24abf063dc6..1c02e99bc16 100644
--- a/polaris.shopify.com/pages/examples/filters-with-help-text.tsx
+++ b/polaris.shopify.com/app/examples/filters-with-help-text/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   ChoiceList,
   TextField,
@@ -9,7 +11,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListFiltersExample() {
   const [accountStatus, setAccountStatus] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx b/polaris.shopify.com/app/examples/filters-with-query-field-disabled/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx
rename to polaris.shopify.com/app/examples/filters-with-query-field-disabled/page.tsx
index 7f6e42fe156..49a02238fcd 100644
--- a/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx
+++ b/polaris.shopify.com/app/examples/filters-with-query-field-disabled/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   ChoiceList,
   TextField,
@@ -9,7 +11,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListFiltersExample() {
   const [accountStatus, setAccountStatus] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx b/polaris.shopify.com/app/examples/filters-with-query-field-hidden/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx
rename to polaris.shopify.com/app/examples/filters-with-query-field-hidden/page.tsx
index ff131805981..308ddc968c7 100644
--- a/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx
+++ b/polaris.shopify.com/app/examples/filters-with-query-field-hidden/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   ChoiceList,
   TextField,
@@ -9,7 +11,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListFiltersExample() {
   const [accountStatus, setAccountStatus] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/filters-without-clear-button.tsx b/polaris.shopify.com/app/examples/filters-without-clear-button/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/filters-without-clear-button.tsx
rename to polaris.shopify.com/app/examples/filters-without-clear-button/page.tsx
index bd4f996746f..3f4ffe3793a 100644
--- a/polaris.shopify.com/pages/examples/filters-without-clear-button.tsx
+++ b/polaris.shopify.com/app/examples/filters-without-clear-button/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   TextField,
   LegacyCard,
@@ -8,7 +10,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Playground() {
   const [taggedWith, setTaggedWith] = useState(null);
diff --git a/polaris.shopify.com/pages/examples/footer-help-default.tsx b/polaris.shopify.com/app/examples/footer-help-default/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/footer-help-default.tsx
rename to polaris.shopify.com/app/examples/footer-help-default/page.tsx
index 4eb2bc710d5..0479b9ec81d 100644
--- a/polaris.shopify.com/pages/examples/footer-help-default.tsx
+++ b/polaris.shopify.com/app/examples/footer-help-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {FooterHelp, Link} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FooterHelpExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/form-custom-on-submit.tsx b/polaris.shopify.com/app/examples/form-custom-on-submit/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/form-custom-on-submit.tsx
rename to polaris.shopify.com/app/examples/form-custom-on-submit/page.tsx
index 3a60eb440b6..edb3e5821ea 100644
--- a/polaris.shopify.com/pages/examples/form-custom-on-submit.tsx
+++ b/polaris.shopify.com/app/examples/form-custom-on-submit/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Form, FormLayout, Checkbox, TextField, Button} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FormOnSubmitExample() {
   const [newsletter, setNewsletter] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/form-layout-condensed-field-group.tsx b/polaris.shopify.com/app/examples/form-layout-condensed-field-group/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/form-layout-condensed-field-group.tsx
rename to polaris.shopify.com/app/examples/form-layout-condensed-field-group/page.tsx
index 4610ff0e895..eaf9b034e86 100644
--- a/polaris.shopify.com/pages/examples/form-layout-condensed-field-group.tsx
+++ b/polaris.shopify.com/app/examples/form-layout-condensed-field-group/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {FormLayout, TextField} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return (
diff --git a/polaris.shopify.com/pages/examples/form-layout-default.tsx b/polaris.shopify.com/app/examples/form-layout-default/page.tsx
similarity index 81%
rename from polaris.shopify.com/pages/examples/form-layout-default.tsx
rename to polaris.shopify.com/app/examples/form-layout-default/page.tsx
index 32858bde808..6f544dde4e5 100644
--- a/polaris.shopify.com/pages/examples/form-layout-default.tsx
+++ b/polaris.shopify.com/app/examples/form-layout-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {FormLayout, TextField} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return (
diff --git a/polaris.shopify.com/pages/examples/form-layout-field-group.tsx b/polaris.shopify.com/app/examples/form-layout-field-group/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/form-layout-field-group.tsx
rename to polaris.shopify.com/app/examples/form-layout-field-group/page.tsx
index 641e9d5abe7..338be67b881 100644
--- a/polaris.shopify.com/pages/examples/form-layout-field-group.tsx
+++ b/polaris.shopify.com/app/examples/form-layout-field-group/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {FormLayout, TextField} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return (
diff --git a/polaris.shopify.com/pages/examples/form-without-native-validation.tsx b/polaris.shopify.com/app/examples/form-without-native-validation/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/form-without-native-validation.tsx
rename to polaris.shopify.com/app/examples/form-without-native-validation/page.tsx
index fc94632ded1..ccf16136f85 100644
--- a/polaris.shopify.com/pages/examples/form-without-native-validation.tsx
+++ b/polaris.shopify.com/app/examples/form-without-native-validation/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Form, FormLayout, TextField, Button} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FormWithoutNativeValidationExample() {
   const [url, setUrl] = useState('');
diff --git a/polaris.shopify.com/pages/examples/frame-in-an-application.tsx b/polaris.shopify.com/app/examples/frame-in-an-application/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/frame-in-an-application.tsx
rename to polaris.shopify.com/app/examples/frame-in-an-application/page.tsx
index 440b9f2f13a..3e034724225 100644
--- a/polaris.shopify.com/pages/examples/frame-in-an-application.tsx
+++ b/polaris.shopify.com/app/examples/frame-in-an-application/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   ActionList,
   AppProvider,
@@ -25,7 +27,7 @@ import {
   ConversationMinor,
 } from '@shopify/polaris-icons';
 import {useState, useCallback, useRef} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FrameExample() {
   const defaultState = useRef({
diff --git a/polaris.shopify.com/pages/examples/frame-with-an-offset.tsx b/polaris.shopify.com/app/examples/frame-with-an-offset/page.tsx
similarity index 99%
rename from polaris.shopify.com/pages/examples/frame-with-an-offset.tsx
rename to polaris.shopify.com/app/examples/frame-with-an-offset/page.tsx
index ecc3f4d4a0f..d3f84a31853 100644
--- a/polaris.shopify.com/pages/examples/frame-with-an-offset.tsx
+++ b/polaris.shopify.com/app/examples/frame-with-an-offset/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   ActionList,
   AppProvider,
@@ -25,7 +27,7 @@ import {
   ConversationMinor,
 } from '@shopify/polaris-icons';
 import {useState, useCallback, useRef} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FrameExample() {
   const defaultState = useRef({
diff --git a/polaris.shopify.com/pages/examples/fullscreen-bar-no-children.tsx b/polaris.shopify.com/app/examples/fullscreen-bar-no-children/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/fullscreen-bar-no-children.tsx
rename to polaris.shopify.com/app/examples/fullscreen-bar-no-children/page.tsx
index f2133ec8fec..cfa1f43c310 100644
--- a/polaris.shopify.com/pages/examples/fullscreen-bar-no-children.tsx
+++ b/polaris.shopify.com/app/examples/fullscreen-bar-no-children/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {FullscreenBar, Button, Text} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FullscreenBarExample() {
   const [isFullscreen, setFullscreen] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/fullscreen-bar-with-children.tsx b/polaris.shopify.com/app/examples/fullscreen-bar-with-children/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/fullscreen-bar-with-children.tsx
rename to polaris.shopify.com/app/examples/fullscreen-bar-with-children/page.tsx
index c1388e16843..c53354a2aac 100644
--- a/polaris.shopify.com/pages/examples/fullscreen-bar-with-children.tsx
+++ b/polaris.shopify.com/app/examples/fullscreen-bar-with-children/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Badge,
   ButtonGroup,
@@ -6,7 +8,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FullscreenBarExample() {
   const [isFullscreen, setFullscreen] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/grid-custom-layout.tsx b/polaris.shopify.com/app/examples/grid-custom-layout/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/grid-custom-layout.tsx
rename to polaris.shopify.com/app/examples/grid-custom-layout/page.tsx
index 836d4c0bbe4..425ef4f24a1 100644
--- a/polaris.shopify.com/pages/examples/grid-custom-layout.tsx
+++ b/polaris.shopify.com/app/examples/grid-custom-layout/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Grid, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function GridExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/grid-two-thirds-and-one-third-column.tsx b/polaris.shopify.com/app/examples/grid-three-one-third-column/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/grid-two-thirds-and-one-third-column.tsx
rename to polaris.shopify.com/app/examples/grid-three-one-third-column/page.tsx
index afe442b21f4..eae81fe6cdf 100644
--- a/polaris.shopify.com/pages/examples/grid-two-thirds-and-one-third-column.tsx
+++ b/polaris.shopify.com/app/examples/grid-three-one-third-column/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Grid, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function GridExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/grid-two-column.tsx b/polaris.shopify.com/app/examples/grid-two-column/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/grid-two-column.tsx
rename to polaris.shopify.com/app/examples/grid-two-column/page.tsx
index cba751d7c36..223b47d9c55 100644
--- a/polaris.shopify.com/pages/examples/grid-two-column.tsx
+++ b/polaris.shopify.com/app/examples/grid-two-column/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Grid, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function GridExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/grid-three-one-third-column.tsx b/polaris.shopify.com/app/examples/grid-two-thirds-and-one-third-column/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/grid-three-one-third-column.tsx
rename to polaris.shopify.com/app/examples/grid-two-thirds-and-one-third-column/page.tsx
index afe442b21f4..eae81fe6cdf 100644
--- a/polaris.shopify.com/pages/examples/grid-three-one-third-column.tsx
+++ b/polaris.shopify.com/app/examples/grid-two-thirds-and-one-third-column/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Grid, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function GridExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/icon-colored.tsx b/polaris.shopify.com/app/examples/icon-colored/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/icon-colored.tsx
rename to polaris.shopify.com/app/examples/icon-colored/page.tsx
index 3308e1f3e32..a8f11de0bcf 100644
--- a/polaris.shopify.com/pages/examples/icon-colored.tsx
+++ b/polaris.shopify.com/app/examples/icon-colored/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Icon} from '@shopify/polaris';
 import {CirclePlusMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IconExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/icon-default.tsx b/polaris.shopify.com/app/examples/icon-default/page.tsx
similarity index 71%
rename from polaris.shopify.com/pages/examples/icon-default.tsx
rename to polaris.shopify.com/app/examples/icon-default/page.tsx
index c6a13e48663..48d19b568c4 100644
--- a/polaris.shopify.com/pages/examples/icon-default.tsx
+++ b/polaris.shopify.com/app/examples/icon-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Icon} from '@shopify/polaris';
 import {CirclePlusMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IconExample() {
   return <Icon source={CirclePlusMinor} />;
diff --git a/polaris.shopify.com/pages/examples/icon-with-backdrop.tsx b/polaris.shopify.com/app/examples/icon-with-backdrop/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/icon-with-backdrop.tsx
rename to polaris.shopify.com/app/examples/icon-with-backdrop/page.tsx
index f73d4c9e310..c9f7bffc2f3 100644
--- a/polaris.shopify.com/pages/examples/icon-with-backdrop.tsx
+++ b/polaris.shopify.com/app/examples/icon-with-backdrop/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Icon} from '@shopify/polaris';
 import {CirclePlusMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IconExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/icon-with-custom-svg-and-color.tsx b/polaris.shopify.com/app/examples/icon-with-custom-svg-and-color/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/icon-with-custom-svg-and-color.tsx
rename to polaris.shopify.com/app/examples/icon-with-custom-svg-and-color/page.tsx
index ebaac89e8ee..2240a9d029b 100644
--- a/polaris.shopify.com/pages/examples/icon-with-custom-svg-and-color.tsx
+++ b/polaris.shopify.com/app/examples/icon-with-custom-svg-and-color/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Icon} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IconWithReactChild() {
   const iconContent = () => {
diff --git a/polaris.shopify.com/pages/examples/icon-with-custom-svg.tsx b/polaris.shopify.com/app/examples/icon-with-custom-svg/page.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/icon-with-custom-svg.tsx
rename to polaris.shopify.com/app/examples/icon-with-custom-svg/page.tsx
index 6f44a6f4fae..475131b9e9b 100644
--- a/polaris.shopify.com/pages/examples/icon-with-custom-svg.tsx
+++ b/polaris.shopify.com/app/examples/icon-with-custom-svg/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Icon} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IconExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/index-table-default.tsx b/polaris.shopify.com/app/examples/index-table-default/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/index-table-default.tsx
rename to polaris.shopify.com/app/examples/index-table-default/page.tsx
index a1dc77b2228..70e25d6baca 100644
--- a/polaris.shopify.com/pages/examples/index-table-default.tsx
+++ b/polaris.shopify.com/app/examples/index-table-default/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -5,7 +7,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SimpleIndexTableExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-flush.tsx b/polaris.shopify.com/app/examples/index-table-flush/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/index-table-flush.tsx
rename to polaris.shopify.com/app/examples/index-table-flush/page.tsx
index 57a366bcae2..68c80be9a4f 100644
--- a/polaris.shopify.com/pages/examples/index-table-flush.tsx
+++ b/polaris.shopify.com/app/examples/index-table-flush/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -5,7 +7,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SimpleFlushIndexTableExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-small-screen-with-all-of-its-elements.tsx b/polaris.shopify.com/app/examples/index-table-small-screen-with-all-of-its-elements/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/index-table-small-screen-with-all-of-its-elements.tsx
rename to polaris.shopify.com/app/examples/index-table-small-screen-with-all-of-its-elements/page.tsx
index 5a223ad4778..14003aea6ad 100644
--- a/polaris.shopify.com/pages/examples/index-table-small-screen-with-all-of-its-elements.tsx
+++ b/polaris.shopify.com/app/examples/index-table-small-screen-with-all-of-its-elements/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   TextField,
   IndexTable,
@@ -8,7 +10,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SmallScreenIndexTableWithAllElementsExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx b/polaris.shopify.com/app/examples/index-table-small-screen/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/index-table-small-screen.tsx
rename to polaris.shopify.com/app/examples/index-table-small-screen/page.tsx
index 6ea9ce2e821..0458e43b8f0 100644
--- a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
+++ b/polaris.shopify.com/app/examples/index-table-small-screen/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -5,7 +7,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SimpleSmallScreenIndexTableExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-with-all-of-its-elements.tsx b/polaris.shopify.com/app/examples/index-table-with-all-of-its-elements/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/index-table-with-all-of-its-elements.tsx
rename to polaris.shopify.com/app/examples/index-table-with-all-of-its-elements/page.tsx
index a20b1014ac0..c496a2fc7ea 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-all-of-its-elements.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-all-of-its-elements/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   TextField,
   IndexTable,
@@ -8,7 +10,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IndexTableWithAllElementsExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx b/polaris.shopify.com/app/examples/index-table-with-bulk-actions-and-selection-across-pages/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx
rename to polaris.shopify.com/app/examples/index-table-with-bulk-actions-and-selection-across-pages/page.tsx
index 1d9db6df0c3..dca054913ba 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-bulk-actions-and-selection-across-pages/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -5,7 +7,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IndexTableWithBulkActionsAndSelectionAcrossPagesExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx b/polaris.shopify.com/app/examples/index-table-with-bulk-actions/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx
rename to polaris.shopify.com/app/examples/index-table-with-bulk-actions/page.tsx
index 172e5412eef..824ae4828ab 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-bulk-actions/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -5,7 +7,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IndexTableWithBulkActionsExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-with-clickable-button-column.tsx b/polaris.shopify.com/app/examples/index-table-with-clickable-button-column/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/index-table-with-clickable-button-column.tsx
rename to polaris.shopify.com/app/examples/index-table-with-clickable-button-column/page.tsx
index 02dc2230a31..c472cfccf4d 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-clickable-button-column.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-clickable-button-column/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -6,7 +8,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ClickThroughButtonIndexTableExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx b/polaris.shopify.com/app/examples/index-table-with-empty-state/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx
rename to polaris.shopify.com/app/examples/index-table-with-empty-state/page.tsx
index fd96d7ff1d1..44a43fc1b81 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-empty-state/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   EmptySearchResult,
   IndexTable,
@@ -6,7 +8,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IndexTableWithCustomEmptyStateExample() {
   const customers = [];
diff --git a/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx b/polaris.shopify.com/app/examples/index-table-with-filtering/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/index-table-with-filtering.tsx
rename to polaris.shopify.com/app/examples/index-table-with-filtering/page.tsx
index 687f63de39f..d2282e1ca4c 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-filtering/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   TextField,
   IndexTable,
@@ -8,7 +10,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IndexTableWithFilteringExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx b/polaris.shopify.com/app/examples/index-table-with-loading-state/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx
rename to polaris.shopify.com/app/examples/index-table-with-loading-state/page.tsx
index 7fdc085bc91..a44b7c09d20 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-loading-state/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -5,7 +7,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IndexTableWithLoadingExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx b/polaris.shopify.com/app/examples/index-table-with-multiple-promoted-bulk-actions/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx
rename to polaris.shopify.com/app/examples/index-table-with-multiple-promoted-bulk-actions/page.tsx
index a13e704703c..8b497619bbd 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-multiple-promoted-bulk-actions/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -5,7 +7,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IndexTableWithMultiplePromotedBulkActionsExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx b/polaris.shopify.com/app/examples/index-table-with-row-navigation-link/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx
rename to polaris.shopify.com/app/examples/index-table-with-row-navigation-link/page.tsx
index 21ec3694b74..e7c10104bfe 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-row-navigation-link/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -6,7 +8,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ClickThroughLinkIndexTableExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-with-row-status.tsx b/polaris.shopify.com/app/examples/index-table-with-row-status/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/index-table-with-row-status.tsx
rename to polaris.shopify.com/app/examples/index-table-with-row-status/page.tsx
index 5ec6f696684..a8a8ae8e5af 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-row-status.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-row-status/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -5,7 +7,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IndexTableWithRowStatusExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx b/polaris.shopify.com/app/examples/index-table-with-sticky-last-column/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx
rename to polaris.shopify.com/app/examples/index-table-with-sticky-last-column/page.tsx
index b37e8cbbc85..0ffecdefd70 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx
+++ b/polaris.shopify.com/app/examples/index-table-with-sticky-last-column/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   IndexTable,
   LegacyCard,
@@ -5,7 +7,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function StickyLastCellIndexTableExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx b/polaris.shopify.com/app/examples/index-table-without-checkboxes/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx
rename to polaris.shopify.com/app/examples/index-table-without-checkboxes/page.tsx
index 33014321569..b1323059a9c 100644
--- a/polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx
+++ b/polaris.shopify.com/app/examples/index-table-without-checkboxes/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {IndexTable, LegacyCard, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function IndexTableWithoutCheckboxesExample() {
   const customers = [
diff --git a/polaris.shopify.com/pages/examples/inline-default.tsx b/polaris.shopify.com/app/examples/inline-default/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/inline-default.tsx
rename to polaris.shopify.com/app/examples/inline-default/page.tsx
index c97cc0b1416..552acfb5822 100644
--- a/polaris.shopify.com/pages/examples/inline-default.tsx
+++ b/polaris.shopify.com/app/examples/inline-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function InlineExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/inline-error-default.tsx b/polaris.shopify.com/app/examples/inline-error-default/page.tsx
similarity index 71%
rename from polaris.shopify.com/pages/examples/inline-error-default.tsx
rename to polaris.shopify.com/app/examples/inline-error-default/page.tsx
index 3d75a055af4..63bf4861cc1 100644
--- a/polaris.shopify.com/pages/examples/inline-error-default.tsx
+++ b/polaris.shopify.com/app/examples/inline-error-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {InlineError} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function InlineErrorExample() {
   return <InlineError message="Store name is required" fieldID="myFieldID" />;
diff --git a/polaris.shopify.com/pages/examples/inline-with-gap.tsx b/polaris.shopify.com/app/examples/inline-with-gap/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/inline-with-gap.tsx
rename to polaris.shopify.com/app/examples/inline-with-gap/page.tsx
index 5fe75d52b8c..f99d7f74d2d 100644
--- a/polaris.shopify.com/pages/examples/inline-with-gap.tsx
+++ b/polaris.shopify.com/app/examples/inline-with-gap/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Inline, AlphaStack} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function InlineWithGapExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx b/polaris.shopify.com/app/examples/inline-with-horizontal-alignment/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx
rename to polaris.shopify.com/app/examples/inline-with-horizontal-alignment/page.tsx
index 9eb15f15ec5..a6bd30477e9 100644
--- a/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx
+++ b/polaris.shopify.com/app/examples/inline-with-horizontal-alignment/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {AlphaStack, Inline, Text, Page} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function InlineWithHorizontalAlignmentExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx b/polaris.shopify.com/app/examples/inline-with-non-wrapping/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx
rename to polaris.shopify.com/app/examples/inline-with-non-wrapping/page.tsx
index badcb9b62d1..1f83c37823a 100644
--- a/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx
+++ b/polaris.shopify.com/app/examples/inline-with-non-wrapping/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Inline} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function InlineWithNonWrappingExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx b/polaris.shopify.com/app/examples/inline-with-vertical-alignment/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx
rename to polaris.shopify.com/app/examples/inline-with-vertical-alignment/page.tsx
index 45c166217ae..1f33d9c5d6a 100644
--- a/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx
+++ b/polaris.shopify.com/app/examples/inline-with-vertical-alignment/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import React from 'react';
 import {Inline, Text, AlphaStack} from '@shopify/polaris';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function InlineWithVerticalAlignmentExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/keyboard-key-default.tsx b/polaris.shopify.com/app/examples/keyboard-key-default/page.tsx
similarity index 65%
rename from polaris.shopify.com/pages/examples/keyboard-key-default.tsx
rename to polaris.shopify.com/app/examples/keyboard-key-default/page.tsx
index 64c813cb346..7fdc2d73aa2 100644
--- a/polaris.shopify.com/pages/examples/keyboard-key-default.tsx
+++ b/polaris.shopify.com/app/examples/keyboard-key-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {KeyboardKey} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return <KeyboardKey>Ctrl</KeyboardKey>;
diff --git a/polaris.shopify.com/pages/examples/keyboard-key-list-of-shortcuts.tsx b/polaris.shopify.com/app/examples/keyboard-key-list-of-shortcuts/page.tsx
similarity index 65%
rename from polaris.shopify.com/pages/examples/keyboard-key-list-of-shortcuts.tsx
rename to polaris.shopify.com/app/examples/keyboard-key-list-of-shortcuts/page.tsx
index 64c813cb346..7fdc2d73aa2 100644
--- a/polaris.shopify.com/pages/examples/keyboard-key-list-of-shortcuts.tsx
+++ b/polaris.shopify.com/app/examples/keyboard-key-list-of-shortcuts/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {KeyboardKey} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function Example() {
   return <KeyboardKey>Ctrl</KeyboardKey>;
diff --git a/polaris.shopify.com/pages/examples/layout-annotated-with-banner-at-the-top.tsx b/polaris.shopify.com/app/examples/layout-annotated-with-banner-at-the-top/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/layout-annotated-with-banner-at-the-top.tsx
rename to polaris.shopify.com/app/examples/layout-annotated-with-banner-at-the-top/page.tsx
index f4937de8991..1387183e944 100644
--- a/polaris.shopify.com/pages/examples/layout-annotated-with-banner-at-the-top.tsx
+++ b/polaris.shopify.com/app/examples/layout-annotated-with-banner-at-the-top/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Page,
   Layout,
@@ -7,7 +9,7 @@ import {
   TextField,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LayoutExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/layout-annotated-with-sections.tsx b/polaris.shopify.com/app/examples/layout-annotated-with-sections/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/layout-annotated-with-sections.tsx
rename to polaris.shopify.com/app/examples/layout-annotated-with-sections/page.tsx
index 8026a37bb13..1036d90eb08 100644
--- a/polaris.shopify.com/pages/examples/layout-annotated-with-sections.tsx
+++ b/polaris.shopify.com/app/examples/layout-annotated-with-sections/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Page,
   Layout,
@@ -8,7 +10,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LayoutExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/layout-annotated.tsx b/polaris.shopify.com/app/examples/layout-annotated/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/layout-annotated.tsx
rename to polaris.shopify.com/app/examples/layout-annotated/page.tsx
index 25a6568cbe8..cb6c7d2c42a 100644
--- a/polaris.shopify.com/pages/examples/layout-annotated.tsx
+++ b/polaris.shopify.com/app/examples/layout-annotated/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Layout, LegacyCard, FormLayout, TextField} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LayoutExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/layout-one-column.tsx b/polaris.shopify.com/app/examples/layout-one-column/page.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/layout-one-column.tsx
rename to polaris.shopify.com/app/examples/layout-one-column/page.tsx
index 682aea4d9bd..eda2aa4e04f 100644
--- a/polaris.shopify.com/pages/examples/layout-one-column.tsx
+++ b/polaris.shopify.com/app/examples/layout-one-column/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Layout, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LayoutExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/layout-three-columns-with-equal-width.tsx b/polaris.shopify.com/app/examples/layout-three-columns-with-equal-width/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/layout-three-columns-with-equal-width.tsx
rename to polaris.shopify.com/app/examples/layout-three-columns-with-equal-width/page.tsx
index b0fdf4d55a6..d0dfade6acf 100644
--- a/polaris.shopify.com/pages/examples/layout-three-columns-with-equal-width.tsx
+++ b/polaris.shopify.com/app/examples/layout-three-columns-with-equal-width/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Page,
   Layout,
@@ -7,7 +9,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LayoutExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/layout-two-columns-with-equal-width.tsx b/polaris.shopify.com/app/examples/layout-two-columns-with-equal-width/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/layout-two-columns-with-equal-width.tsx
rename to polaris.shopify.com/app/examples/layout-two-columns-with-equal-width/page.tsx
index 9940e968074..98ddb40cdb6 100644
--- a/polaris.shopify.com/pages/examples/layout-two-columns-with-equal-width.tsx
+++ b/polaris.shopify.com/app/examples/layout-two-columns-with-equal-width/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Page,
   Layout,
@@ -7,7 +9,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LayoutExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/layout-two-columns-with-primary-and-secondary-widths.tsx b/polaris.shopify.com/app/examples/layout-two-columns-with-primary-and-secondary-widths/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/layout-two-columns-with-primary-and-secondary-widths.tsx
rename to polaris.shopify.com/app/examples/layout-two-columns-with-primary-and-secondary-widths/page.tsx
index 0c8565e6e0b..80d49e5b27b 100644
--- a/polaris.shopify.com/pages/examples/layout-two-columns-with-primary-and-secondary-widths.tsx
+++ b/polaris.shopify.com/app/examples/layout-two-columns-with-primary-and-secondary-widths/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Layout, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LayoutExample() {
   return (
diff --git a/polaris.shopify.com/app/examples/layout.tsx b/polaris.shopify.com/app/examples/layout.tsx
new file mode 100644
index 00000000000..47147bc2da0
--- /dev/null
+++ b/polaris.shopify.com/app/examples/layout.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import '@shopify/polaris/build/esm/styles.css';
+
+export default function ExampleLayout({children}: {children: React.ReactNode}) {
+  return <>{children}</>;
+}
diff --git a/polaris.shopify.com/pages/examples/legacy-card-default.tsx b/polaris.shopify.com/app/examples/legacy-card-default/page.tsx
similarity index 76%
rename from polaris.shopify.com/pages/examples/legacy-card-default.tsx
rename to polaris.shopify.com/app/examples/legacy-card-default/page.tsx
index 8d632129846..3869b5d24d8 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-default.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-a-subdued-section.tsx b/polaris.shopify.com/app/examples/legacy-card-with-a-subdued-section/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/legacy-card-with-a-subdued-section.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-a-subdued-section/page.tsx
index 9759cd52670..c914cf74f68 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-a-subdued-section.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-a-subdued-section/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-all-elements.tsx b/polaris.shopify.com/app/examples/legacy-card-with-all-elements/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/legacy-card-with-all-elements.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-all-elements/page.tsx
index cf4edb55bb6..2a1ca451b62 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-all-elements.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-all-elements/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LegacyCard,
   Popover,
@@ -9,7 +11,7 @@ import {
   List,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-custom-footer-actions.tsx b/polaris.shopify.com/app/examples/legacy-card-with-custom-footer-actions/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/legacy-card-with-custom-footer-actions.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-custom-footer-actions/page.tsx
index 99e6de71b0e..c4d8298c850 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-custom-footer-actions.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-custom-footer-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, LegacyStack, ButtonGroup, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx b/polaris.shopify.com/app/examples/legacy-card-with-custom-react-node-title/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-custom-react-node-title/page.tsx
index 4897af76350..84ec6fae599 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-custom-react-node-title/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {LegacyCard, LegacyStack, Icon, List, Text} from '@shopify/polaris';
 import {ProductsMajor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-destructive-action.tsx b/polaris.shopify.com/app/examples/legacy-card-with-destructive-action/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/legacy-card-with-destructive-action.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-destructive-action/page.tsx
index d9239f6f297..503c00493af 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-destructive-action.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-destructive-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-destructive-footer-action.tsx b/polaris.shopify.com/app/examples/legacy-card-with-destructive-footer-action/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/legacy-card-with-destructive-footer-action.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-destructive-footer-action/page.tsx
index e1764a43f36..82dd375c2d2 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-destructive-footer-action.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-destructive-footer-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-flushed-sections.tsx b/polaris.shopify.com/app/examples/legacy-card-with-flushed-sections/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/legacy-card-with-flushed-sections.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-flushed-sections/page.tsx
index 41b9ac3fbfe..b0b718ec42c 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-flushed-sections.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-flushed-sections/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, Image, TextContainer} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-footer-actions.tsx b/polaris.shopify.com/app/examples/legacy-card-with-footer-actions/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/legacy-card-with-footer-actions.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-footer-actions/page.tsx
index 4a935327799..ae08cdc0448 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-footer-actions.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-footer-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-header-actions.tsx b/polaris.shopify.com/app/examples/legacy-card-with-header-actions/page.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/legacy-card-with-header-actions.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-header-actions/page.tsx
index d19843f0589..22939e8dd6d 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-header-actions.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-header-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-multiple-footer-actions.tsx b/polaris.shopify.com/app/examples/legacy-card-with-multiple-footer-actions/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/legacy-card-with-multiple-footer-actions.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-multiple-footer-actions/page.tsx
index f379d78d55d..8a53e52d035 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-multiple-footer-actions.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-multiple-footer-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-multiple-sections.tsx b/polaris.shopify.com/app/examples/legacy-card-with-multiple-sections/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/legacy-card-with-multiple-sections.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-multiple-sections/page.tsx
index 48c9494a841..9eb955a229c 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-multiple-sections.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-multiple-sections/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-multiple-titled-sections.tsx b/polaris.shopify.com/app/examples/legacy-card-with-multiple-titled-sections/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/legacy-card-with-multiple-titled-sections.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-multiple-titled-sections/page.tsx
index 3bc34055d9d..b6f4993ba79 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-multiple-titled-sections.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-multiple-titled-sections/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-sections-and-actions.tsx b/polaris.shopify.com/app/examples/legacy-card-with-sections-and-actions/page.tsx
similarity index 83%
rename from polaris.shopify.com/pages/examples/legacy-card-with-sections-and-actions.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-sections-and-actions/page.tsx
index f33837498db..4aea5ab3632 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-sections-and-actions.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-sections-and-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-separate-header.tsx b/polaris.shopify.com/app/examples/legacy-card-with-separate-header/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/legacy-card-with-separate-header.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-separate-header/page.tsx
index 1459b333416..e99634cd64a 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-separate-header.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-separate-header/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, Popover, Button, ActionList, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-subdued-for-secondary-content.tsx b/polaris.shopify.com/app/examples/legacy-card-with-subdued-for-secondary-content/page.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/legacy-card-with-subdued-for-secondary-content.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-subdued-for-secondary-content/page.tsx
index 00f080e4f7b..7d8bb90bb0d 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-subdued-for-secondary-content.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-subdued-for-secondary-content/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-subsection.tsx b/polaris.shopify.com/app/examples/legacy-card-with-subsection/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/legacy-card-with-subsection.tsx
rename to polaris.shopify.com/app/examples/legacy-card-with-subsection/page.tsx
index 39f201161bc..d6fb4499f5f 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-subsection.tsx
+++ b/polaris.shopify.com/app/examples/legacy-card-with-subsection/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-stack-default.tsx b/polaris.shopify.com/app/examples/legacy-stack-default/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/legacy-stack-default.tsx
rename to polaris.shopify.com/app/examples/legacy-stack-default/page.tsx
index 7427a026a36..0157e801c49 100644
--- a/polaris.shopify.com/pages/examples/legacy-stack-default.tsx
+++ b/polaris.shopify.com/app/examples/legacy-stack-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyStackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-stack-fill-available-space-proportionally.tsx b/polaris.shopify.com/app/examples/legacy-stack-fill-available-space-proportionally/page.tsx
similarity index 79%
rename from polaris.shopify.com/pages/examples/legacy-stack-fill-available-space-proportionally.tsx
rename to polaris.shopify.com/app/examples/legacy-stack-fill-available-space-proportionally/page.tsx
index f7fdb2cd7d3..046a68c04f2 100644
--- a/polaris.shopify.com/pages/examples/legacy-stack-fill-available-space-proportionally.tsx
+++ b/polaris.shopify.com/app/examples/legacy-stack-fill-available-space-proportionally/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, Badge, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyStackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-stack-non-wrapping.tsx b/polaris.shopify.com/app/examples/legacy-stack-non-wrapping/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/legacy-stack-non-wrapping.tsx
rename to polaris.shopify.com/app/examples/legacy-stack-non-wrapping/page.tsx
index ae83dff8ee6..d68d4298c34 100644
--- a/polaris.shopify.com/pages/examples/legacy-stack-non-wrapping.tsx
+++ b/polaris.shopify.com/app/examples/legacy-stack-non-wrapping/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyStackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-stack-spacing.tsx b/polaris.shopify.com/app/examples/legacy-stack-spacing/page.tsx
similarity index 75%
rename from polaris.shopify.com/pages/examples/legacy-stack-spacing.tsx
rename to polaris.shopify.com/app/examples/legacy-stack-spacing/page.tsx
index 5cf4a973edb..b4b3653af1c 100644
--- a/polaris.shopify.com/pages/examples/legacy-stack-spacing.tsx
+++ b/polaris.shopify.com/app/examples/legacy-stack-spacing/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyStackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-stack-vertical-centering.tsx b/polaris.shopify.com/app/examples/legacy-stack-vertical-centering/page.tsx
similarity index 81%
rename from polaris.shopify.com/pages/examples/legacy-stack-vertical-centering.tsx
rename to polaris.shopify.com/app/examples/legacy-stack-vertical-centering/page.tsx
index 89ed6ab3c49..ef71a4c0943 100644
--- a/polaris.shopify.com/pages/examples/legacy-stack-vertical-centering.tsx
+++ b/polaris.shopify.com/app/examples/legacy-stack-vertical-centering/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, Badge, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyStackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-stack-where-a-single-item-fills-the-remaining-space.tsx b/polaris.shopify.com/app/examples/legacy-stack-where-a-single-item-fills-the-remaining-space/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/legacy-stack-where-a-single-item-fills-the-remaining-space.tsx
rename to polaris.shopify.com/app/examples/legacy-stack-where-a-single-item-fills-the-remaining-space/page.tsx
index 53821939dea..dd24a4d13b5 100644
--- a/polaris.shopify.com/pages/examples/legacy-stack-where-a-single-item-fills-the-remaining-space.tsx
+++ b/polaris.shopify.com/app/examples/legacy-stack-where-a-single-item-fills-the-remaining-space/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, Badge, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyStackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/legacy-stack-where-items-fill-space-evenly.tsx b/polaris.shopify.com/app/examples/legacy-stack-where-items-fill-space-evenly/page.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/legacy-stack-where-items-fill-space-evenly.tsx
rename to polaris.shopify.com/app/examples/legacy-stack-where-items-fill-space-evenly/page.tsx
index aa629bfbdbc..e7977b8b4e3 100644
--- a/polaris.shopify.com/pages/examples/legacy-stack-where-items-fill-space-evenly.tsx
+++ b/polaris.shopify.com/app/examples/legacy-stack-where-items-fill-space-evenly/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, Badge, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LegacyStackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/link-default.tsx b/polaris.shopify.com/app/examples/link-default/page.tsx
similarity index 69%
rename from polaris.shopify.com/pages/examples/link-default.tsx
rename to polaris.shopify.com/app/examples/link-default/page.tsx
index 988428b33bd..d8cf64bb30e 100644
--- a/polaris.shopify.com/pages/examples/link-default.tsx
+++ b/polaris.shopify.com/app/examples/link-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Link} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LinkExample() {
   return <Link url="https://help.shopify.com/manual">fulfilling orders</Link>;
diff --git a/polaris.shopify.com/pages/examples/link-external.tsx b/polaris.shopify.com/app/examples/link-external/page.tsx
similarity index 72%
rename from polaris.shopify.com/pages/examples/link-external.tsx
rename to polaris.shopify.com/app/examples/link-external/page.tsx
index 696ecab6939..5883382da1d 100644
--- a/polaris.shopify.com/pages/examples/link-external.tsx
+++ b/polaris.shopify.com/app/examples/link-external/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Link} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LinkExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/link-monochrome-in-a-banner.tsx b/polaris.shopify.com/app/examples/link-monochrome-in-a-banner/page.tsx
similarity index 75%
rename from polaris.shopify.com/pages/examples/link-monochrome-in-a-banner.tsx
rename to polaris.shopify.com/app/examples/link-monochrome-in-a-banner/page.tsx
index ac3d6667bc0..309ca403dd5 100644
--- a/polaris.shopify.com/pages/examples/link-monochrome-in-a-banner.tsx
+++ b/polaris.shopify.com/app/examples/link-monochrome-in-a-banner/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Banner, Link} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LinkExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/link-monochrome.tsx b/polaris.shopify.com/app/examples/link-monochrome/page.tsx
similarity index 72%
rename from polaris.shopify.com/pages/examples/link-monochrome.tsx
rename to polaris.shopify.com/app/examples/link-monochrome/page.tsx
index cd6c1d9dc66..63789ece92c 100644
--- a/polaris.shopify.com/pages/examples/link-monochrome.tsx
+++ b/polaris.shopify.com/app/examples/link-monochrome/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Link} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LinkExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/list-bulleted.tsx b/polaris.shopify.com/app/examples/list-bulleted/page.tsx
similarity index 76%
rename from polaris.shopify.com/pages/examples/list-bulleted.tsx
rename to polaris.shopify.com/app/examples/list-bulleted/page.tsx
index 8f345ff7d7a..548030ac9e3 100644
--- a/polaris.shopify.com/pages/examples/list-bulleted.tsx
+++ b/polaris.shopify.com/app/examples/list-bulleted/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ListExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/list-extra-tight.tsx b/polaris.shopify.com/app/examples/list-extra-tight/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/list-extra-tight.tsx
rename to polaris.shopify.com/app/examples/list-extra-tight/page.tsx
index 0cc1e6e21b2..dc3f22cd531 100644
--- a/polaris.shopify.com/pages/examples/list-extra-tight.tsx
+++ b/polaris.shopify.com/app/examples/list-extra-tight/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ListExtraTightExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/list-numbered.tsx b/polaris.shopify.com/app/examples/list-numbered/page.tsx
similarity index 76%
rename from polaris.shopify.com/pages/examples/list-numbered.tsx
rename to polaris.shopify.com/app/examples/list-numbered/page.tsx
index acd866fce33..5ab8aa3da34 100644
--- a/polaris.shopify.com/pages/examples/list-numbered.tsx
+++ b/polaris.shopify.com/app/examples/list-numbered/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {List} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ListExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/listbox-default.tsx b/polaris.shopify.com/app/examples/listbox-default/page.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/listbox-default.tsx
rename to polaris.shopify.com/app/examples/listbox-default/page.tsx
index 5376d3748bb..3ffd52ae169 100644
--- a/polaris.shopify.com/pages/examples/listbox-default.tsx
+++ b/polaris.shopify.com/app/examples/listbox-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Listbox} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function BaseListboxExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/listbox-with-action.tsx b/polaris.shopify.com/app/examples/listbox-with-action/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/listbox-with-action.tsx
rename to polaris.shopify.com/app/examples/listbox-with-action/page.tsx
index 16914f502a2..6f93ca035bf 100644
--- a/polaris.shopify.com/pages/examples/listbox-with-action.tsx
+++ b/polaris.shopify.com/app/examples/listbox-with-action/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Listbox, LegacyStack, Icon} from '@shopify/polaris';
 import {CirclePlusMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ListboxWithActionExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/listbox-with-custom-element.tsx b/polaris.shopify.com/app/examples/listbox-with-custom-element/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/listbox-with-custom-element.tsx
rename to polaris.shopify.com/app/examples/listbox-with-custom-element/page.tsx
index 42867d21e0e..f5343752d36 100644
--- a/polaris.shopify.com/pages/examples/listbox-with-custom-element.tsx
+++ b/polaris.shopify.com/app/examples/listbox-with-custom-element/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Listbox} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ListboxWithCustomElementExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/listbox-with-loading.tsx b/polaris.shopify.com/app/examples/listbox-with-loading/page.tsx
similarity index 83%
rename from polaris.shopify.com/pages/examples/listbox-with-loading.tsx
rename to polaris.shopify.com/app/examples/listbox-with-loading/page.tsx
index 30eaf43bfb0..7e9aae5640a 100644
--- a/polaris.shopify.com/pages/examples/listbox-with-loading.tsx
+++ b/polaris.shopify.com/app/examples/listbox-with-loading/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Listbox} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ListboxWithLoadingExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/listbox-with-search.tsx b/polaris.shopify.com/app/examples/listbox-with-search/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/listbox-with-search.tsx
rename to polaris.shopify.com/app/examples/listbox-with-search/page.tsx
index fc8ae8873c4..00298ce4409 100644
--- a/polaris.shopify.com/pages/examples/listbox-with-search.tsx
+++ b/polaris.shopify.com/app/examples/listbox-with-search/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, {useState} from 'react';
 import {
   LegacyStack,
@@ -15,7 +17,7 @@ import {
 } from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 const actionValue = '__ACTION__';
 
diff --git a/polaris.shopify.com/pages/examples/loading-default.tsx b/polaris.shopify.com/app/examples/loading-default/page.tsx
similarity index 73%
rename from polaris.shopify.com/pages/examples/loading-default.tsx
rename to polaris.shopify.com/app/examples/loading-default/page.tsx
index 59fe11ac22a..53f04b95bc0 100644
--- a/polaris.shopify.com/pages/examples/loading-default.tsx
+++ b/polaris.shopify.com/app/examples/loading-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Frame, Loading} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LoadingExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/media-card-default.tsx b/polaris.shopify.com/app/examples/media-card-default/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/media-card-default.tsx
rename to polaris.shopify.com/app/examples/media-card-default/page.tsx
index ad8e8c9b063..a592cf1fc49 100644
--- a/polaris.shopify.com/pages/examples/media-card-default.tsx
+++ b/polaris.shopify.com/app/examples/media-card-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {MediaCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MediaCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/media-card-portrait-video-card.tsx b/polaris.shopify.com/app/examples/media-card-portrait-video-card/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/media-card-portrait-video-card.tsx
rename to polaris.shopify.com/app/examples/media-card-portrait-video-card/page.tsx
index 28a575ff946..228a253276d 100644
--- a/polaris.shopify.com/pages/examples/media-card-portrait-video-card.tsx
+++ b/polaris.shopify.com/app/examples/media-card-portrait-video-card/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {MediaCard, VideoThumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MediaCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/media-card-video-card.tsx b/polaris.shopify.com/app/examples/media-card-video-card/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/media-card-video-card.tsx
rename to polaris.shopify.com/app/examples/media-card-video-card/page.tsx
index a607d2edf2f..8f034908029 100644
--- a/polaris.shopify.com/pages/examples/media-card-video-card.tsx
+++ b/polaris.shopify.com/app/examples/media-card-video-card/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {MediaCard, VideoThumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MediaCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/media-card-with-no-actions.tsx b/polaris.shopify.com/app/examples/media-card-with-no-actions/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/media-card-with-no-actions.tsx
rename to polaris.shopify.com/app/examples/media-card-with-no-actions/page.tsx
index 4e01182ec1b..9b29aa0c6de 100644
--- a/polaris.shopify.com/pages/examples/media-card-with-no-actions.tsx
+++ b/polaris.shopify.com/app/examples/media-card-with-no-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {MediaCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MediaCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/media-card-with-secondary-action.tsx b/polaris.shopify.com/app/examples/media-card-with-secondary-action/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/media-card-with-secondary-action.tsx
rename to polaris.shopify.com/app/examples/media-card-with-secondary-action/page.tsx
index 86696d16b6a..4e19e8c10a8 100644
--- a/polaris.shopify.com/pages/examples/media-card-with-secondary-action.tsx
+++ b/polaris.shopify.com/app/examples/media-card-with-secondary-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {MediaCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MediaCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/media-card-with-small-visual.tsx b/polaris.shopify.com/app/examples/media-card-with-small-visual/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/media-card-with-small-visual.tsx
rename to polaris.shopify.com/app/examples/media-card-with-small-visual/page.tsx
index bf317818358..e4422c885d3 100644
--- a/polaris.shopify.com/pages/examples/media-card-with-small-visual.tsx
+++ b/polaris.shopify.com/app/examples/media-card-with-small-visual/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {MediaCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MediaCardExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/modal-default.tsx b/polaris.shopify.com/app/examples/modal-default/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/modal-default.tsx
rename to polaris.shopify.com/app/examples/modal-default/page.tsx
index 12405cf2b43..8b499f49d69 100644
--- a/polaris.shopify.com/pages/examples/modal-default.tsx
+++ b/polaris.shopify.com/app/examples/modal-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Modal, TextContainer} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ModalExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/modal-large.tsx b/polaris.shopify.com/app/examples/modal-large/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/modal-large.tsx
rename to polaris.shopify.com/app/examples/modal-large/page.tsx
index 392d1fe727b..242a950de18 100644
--- a/polaris.shopify.com/pages/examples/modal-large.tsx
+++ b/polaris.shopify.com/app/examples/modal-large/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Modal, LegacyStack, DropZone, Checkbox} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LargeModalExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/modal-small.tsx b/polaris.shopify.com/app/examples/modal-small/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/modal-small.tsx
rename to polaris.shopify.com/app/examples/modal-small/page.tsx
index ff92284a622..74989df2fe3 100644
--- a/polaris.shopify.com/pages/examples/modal-small.tsx
+++ b/polaris.shopify.com/app/examples/modal-small/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Modal, LegacyStack, DropZone, Checkbox} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SmallModalExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx b/polaris.shopify.com/app/examples/modal-with-activator-ref/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx
rename to polaris.shopify.com/app/examples/modal-with-activator-ref/page.tsx
index b82d88e5947..d6373376b46 100644
--- a/polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx
+++ b/polaris.shopify.com/app/examples/modal-with-activator-ref/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Modal, TextContainer} from '@shopify/polaris';
 import {useState, useCallback, useRef} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ModalExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/modal-with-primary-action.tsx b/polaris.shopify.com/app/examples/modal-with-primary-action/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/modal-with-primary-action.tsx
rename to polaris.shopify.com/app/examples/modal-with-primary-action/page.tsx
index fe42a99f281..ff97a396940 100644
--- a/polaris.shopify.com/pages/examples/modal-with-primary-action.tsx
+++ b/polaris.shopify.com/app/examples/modal-with-primary-action/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Button,
   Modal,
@@ -6,7 +8,7 @@ import {
   TextField,
 } from '@shopify/polaris';
 import {useState, useCallback, useRef} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ModalWithPrimaryActionExample() {
   const DISCOUNT_LINK = 'https://polaris.shopify.com/';
diff --git a/polaris.shopify.com/pages/examples/modal-with-primary-and-secondary-actions.tsx b/polaris.shopify.com/app/examples/modal-with-primary-and-secondary-actions/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/modal-with-primary-and-secondary-actions.tsx
rename to polaris.shopify.com/app/examples/modal-with-primary-and-secondary-actions/page.tsx
index efcfc796180..d426cd1722d 100644
--- a/polaris.shopify.com/pages/examples/modal-with-primary-and-secondary-actions.tsx
+++ b/polaris.shopify.com/app/examples/modal-with-primary-and-secondary-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Modal, LegacyStack, ChoiceList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ModalWithPrimaryAndSecondaryActionsExample() {
   const CURRENT_PAGE = 'current_page';
diff --git a/polaris.shopify.com/pages/examples/modal-with-scroll-listener.tsx b/polaris.shopify.com/app/examples/modal-with-scroll-listener/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/modal-with-scroll-listener.tsx
rename to polaris.shopify.com/app/examples/modal-with-scroll-listener/page.tsx
index 2f68314e3d8..4e0128f120a 100644
--- a/polaris.shopify.com/pages/examples/modal-with-scroll-listener.tsx
+++ b/polaris.shopify.com/app/examples/modal-with-scroll-listener/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Modal, TextContainer} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ModalWithScrollListenerExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/modal-without-a-title.tsx b/polaris.shopify.com/app/examples/modal-without-a-title/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/modal-without-a-title.tsx
rename to polaris.shopify.com/app/examples/modal-without-a-title/page.tsx
index 11f0999fdef..f90d62d083f 100644
--- a/polaris.shopify.com/pages/examples/modal-without-a-title.tsx
+++ b/polaris.shopify.com/app/examples/modal-without-a-title/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Modal, TextContainer} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ModalWithoutTitleExample() {
   const [active, setActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/modal-without-an-activator-prop.tsx b/polaris.shopify.com/app/examples/modal-without-an-activator-prop/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/modal-without-an-activator-prop.tsx
rename to polaris.shopify.com/app/examples/modal-without-an-activator-prop/page.tsx
index 08e4ed957b6..298f117392e 100644
--- a/polaris.shopify.com/pages/examples/modal-without-an-activator-prop.tsx
+++ b/polaris.shopify.com/app/examples/modal-without-an-activator-prop/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {Button, Modal, TextContainer} from '@shopify/polaris';
 import {useState, useCallback, useRef} from 'react';
 
@@ -48,5 +50,5 @@ function ModalExample() {
   );
 }
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 export default withPolarisExample(() => <p />);
diff --git a/polaris.shopify.com/pages/examples/navigation-default.tsx b/polaris.shopify.com/app/examples/navigation-default/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/navigation-default.tsx
rename to polaris.shopify.com/app/examples/navigation-default/page.tsx
index ffeca29e0af..b6baf4aebd1 100644
--- a/polaris.shopify.com/pages/examples/navigation-default.tsx
+++ b/polaris.shopify.com/app/examples/navigation-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {HomeMinor, OrdersMinor, ProductsMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-using-major-icons.tsx b/polaris.shopify.com/app/examples/navigation-using-major-icons/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/navigation-using-major-icons.tsx
rename to polaris.shopify.com/app/examples/navigation-using-major-icons/page.tsx
index 263e9698573..921d5b9e908 100644
--- a/polaris.shopify.com/pages/examples/navigation-using-major-icons.tsx
+++ b/polaris.shopify.com/app/examples/navigation-using-major-icons/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {
   HomeMajor,
@@ -6,7 +8,7 @@ import {
   CustomersMajor,
 } from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-with-a-secondary-action-for-a-section-and-a-section-title.tsx b/polaris.shopify.com/app/examples/navigation-with-a-secondary-action-for-a-section-and-a-section-title/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/navigation-with-a-secondary-action-for-a-section-and-a-section-title.tsx
rename to polaris.shopify.com/app/examples/navigation-with-a-secondary-action-for-a-section-and-a-section-title/page.tsx
index cf38b924bf4..64887d05d88 100644
--- a/polaris.shopify.com/pages/examples/navigation-with-a-secondary-action-for-a-section-and-a-section-title.tsx
+++ b/polaris.shopify.com/app/examples/navigation-with-a-secondary-action-for-a-section-and-a-section-title/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {
   HomeMinor,
@@ -7,7 +9,7 @@ import {
   CirclePlusOutlineMinor,
 } from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-with-a-secondary-action-for-an-item.tsx b/polaris.shopify.com/app/examples/navigation-with-a-secondary-action-for-an-item/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/navigation-with-a-secondary-action-for-an-item.tsx
rename to polaris.shopify.com/app/examples/navigation-with-a-secondary-action-for-an-item/page.tsx
index 1b26c9960ef..fca6c59cabb 100644
--- a/polaris.shopify.com/pages/examples/navigation-with-a-secondary-action-for-an-item.tsx
+++ b/polaris.shopify.com/app/examples/navigation-with-a-secondary-action-for-an-item/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {
   HomeMinor,
@@ -6,7 +8,7 @@ import {
   ProductsMinor,
 } from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-with-an-active-root-item-with-secondary-navigation-items.tsx b/polaris.shopify.com/app/examples/navigation-with-an-active-root-item-with-secondary-navigation-items/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/navigation-with-an-active-root-item-with-secondary-navigation-items.tsx
rename to polaris.shopify.com/app/examples/navigation-with-an-active-root-item-with-secondary-navigation-items/page.tsx
index a0c483ab790..87897cf81d8 100644
--- a/polaris.shopify.com/pages/examples/navigation-with-an-active-root-item-with-secondary-navigation-items.tsx
+++ b/polaris.shopify.com/app/examples/navigation-with-an-active-root-item-with-secondary-navigation-items/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {HomeMinor, OrdersMinor, ProductsMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-with-aria-labelledby.tsx b/polaris.shopify.com/app/examples/navigation-with-aria-labelledby/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/navigation-with-aria-labelledby.tsx
rename to polaris.shopify.com/app/examples/navigation-with-aria-labelledby/page.tsx
index b222dffb156..3f39f9c1285 100644
--- a/polaris.shopify.com/pages/examples/navigation-with-aria-labelledby.tsx
+++ b/polaris.shopify.com/app/examples/navigation-with-aria-labelledby/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Frame, Navigation, Text} from '@shopify/polaris';
 import {HomeMinor, OrdersMinor, ProductsMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx b/polaris.shopify.com/app/examples/navigation-with-multiple-secondary-actions/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx
rename to polaris.shopify.com/app/examples/navigation-with-multiple-secondary-actions/page.tsx
index f9ccfdab659..5445091b653 100644
--- a/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx
+++ b/polaris.shopify.com/app/examples/navigation-with-multiple-secondary-actions/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {
   HomeMinor,
@@ -7,7 +9,7 @@ import {
   OrdersMinor,
 } from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-navigations.tsx b/polaris.shopify.com/app/examples/navigation-with-multiple-secondary-navigations/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-navigations.tsx
rename to polaris.shopify.com/app/examples/navigation-with-multiple-secondary-navigations/page.tsx
index 83c6c010648..73dbe6e6ee3 100644
--- a/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-navigations.tsx
+++ b/polaris.shopify.com/app/examples/navigation-with-multiple-secondary-navigations/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {
   HomeMinor,
@@ -6,7 +8,7 @@ import {
   ProductsMinor,
 } from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-with-section-rollup.tsx b/polaris.shopify.com/app/examples/navigation-with-section-rollup/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/navigation-with-section-rollup.tsx
rename to polaris.shopify.com/app/examples/navigation-with-section-rollup/page.tsx
index 060bbfa28f6..aae1540a6dd 100644
--- a/polaris.shopify.com/pages/examples/navigation-with-section-rollup.tsx
+++ b/polaris.shopify.com/app/examples/navigation-with-section-rollup/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {HomeMinor, OrdersMinor, ProductsMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-with-section-separator.tsx b/polaris.shopify.com/app/examples/navigation-with-section-separator/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/navigation-with-section-separator.tsx
rename to polaris.shopify.com/app/examples/navigation-with-section-separator/page.tsx
index 7c520a1d46b..5145927d105 100644
--- a/polaris.shopify.com/pages/examples/navigation-with-section-separator.tsx
+++ b/polaris.shopify.com/app/examples/navigation-with-section-separator/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {
   HomeMinor,
@@ -6,7 +8,7 @@ import {
   OnlineStoreMinor,
 } from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx b/polaris.shopify.com/app/examples/navigation-with-truncation-for-various-states/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx
rename to polaris.shopify.com/app/examples/navigation-with-truncation-for-various-states/page.tsx
index faa6111ed4a..c7bb350c5d7 100644
--- a/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx
+++ b/polaris.shopify.com/app/examples/navigation-with-truncation-for-various-states/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {
   HomeMinor,
@@ -7,7 +9,7 @@ import {
   MarketingMinor,
 } from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/navigation-with-various-states-and-secondary-elements.tsx b/polaris.shopify.com/app/examples/navigation-with-various-states-and-secondary-elements/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/navigation-with-various-states-and-secondary-elements.tsx
rename to polaris.shopify.com/app/examples/navigation-with-various-states-and-secondary-elements/page.tsx
index 35ff061b324..a2a2e1e8b66 100644
--- a/polaris.shopify.com/pages/examples/navigation-with-various-states-and-secondary-elements.tsx
+++ b/polaris.shopify.com/app/examples/navigation-with-various-states-and-secondary-elements/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {Frame, Navigation} from '@shopify/polaris';
 import {
   HomeMinor,
@@ -10,7 +12,7 @@ import {
   ViewMinor,
 } from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NavigationExample() {
   const location = typeof window !== 'undefined' ? window.location.href : '';
diff --git a/polaris.shopify.com/pages/examples/option-list-default.tsx b/polaris.shopify.com/app/examples/option-list-default/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/option-list-default.tsx
rename to polaris.shopify.com/app/examples/option-list-default/page.tsx
index 358dc3cd08a..2a44ef7f3df 100644
--- a/polaris.shopify.com/pages/examples/option-list-default.tsx
+++ b/polaris.shopify.com/app/examples/option-list-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, OptionList} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function OptionListExample() {
   const [selected, setSelected] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/option-list-in-a-popover.tsx b/polaris.shopify.com/app/examples/option-list-in-a-popover/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/option-list-in-a-popover.tsx
rename to polaris.shopify.com/app/examples/option-list-in-a-popover/page.tsx
index 2aec1026816..e38509b2600 100644
--- a/polaris.shopify.com/pages/examples/option-list-in-a-popover.tsx
+++ b/polaris.shopify.com/app/examples/option-list-in-a-popover/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Popover, OptionList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function OptionListInPopoverExample() {
   const [selected, setSelected] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/option-list-multiple.tsx b/polaris.shopify.com/app/examples/option-list-multiple/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/option-list-multiple.tsx
rename to polaris.shopify.com/app/examples/option-list-multiple/page.tsx
index f1a3cac88ec..ba1df3e81bb 100644
--- a/polaris.shopify.com/pages/examples/option-list-multiple.tsx
+++ b/polaris.shopify.com/app/examples/option-list-multiple/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, OptionList} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MultipleOptionListExample() {
   const [selected, setSelected] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/option-list-with-sections.tsx b/polaris.shopify.com/app/examples/option-list-with-sections/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/option-list-with-sections.tsx
rename to polaris.shopify.com/app/examples/option-list-with-sections/page.tsx
index d5d9ff43e3c..03166cf8175 100644
--- a/polaris.shopify.com/pages/examples/option-list-with-sections.tsx
+++ b/polaris.shopify.com/app/examples/option-list-with-sections/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, OptionList} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function OptionListWithSectionsExample() {
   const [selected, setSelected] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/page-actions-default.tsx b/polaris.shopify.com/app/examples/page-actions-default/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/page-actions-default.tsx
rename to polaris.shopify.com/app/examples/page-actions-default/page.tsx
index de1ef0b8ba6..0b5b9544de8 100644
--- a/polaris.shopify.com/pages/examples/page-actions-default.tsx
+++ b/polaris.shopify.com/app/examples/page-actions-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {PageActions} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-actions-primary-action-only.tsx b/polaris.shopify.com/app/examples/page-actions-primary-action-only/page.tsx
similarity index 71%
rename from polaris.shopify.com/pages/examples/page-actions-primary-action-only.tsx
rename to polaris.shopify.com/app/examples/page-actions-primary-action-only/page.tsx
index 84443e76769..c7bef63e014 100644
--- a/polaris.shopify.com/pages/examples/page-actions-primary-action-only.tsx
+++ b/polaris.shopify.com/app/examples/page-actions-primary-action-only/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {PageActions} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-actions-with-custom-primary-action.tsx b/polaris.shopify.com/app/examples/page-actions-with-custom-primary-action/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/page-actions-with-custom-primary-action.tsx
rename to polaris.shopify.com/app/examples/page-actions-with-custom-primary-action/page.tsx
index 40c6a89f431..ccec1ad93d3 100644
--- a/polaris.shopify.com/pages/examples/page-actions-with-custom-primary-action.tsx
+++ b/polaris.shopify.com/app/examples/page-actions-with-custom-primary-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {PageActions, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-actions-with-custom-secondary-action.tsx b/polaris.shopify.com/app/examples/page-actions-with-custom-secondary-action/page.tsx
similarity index 83%
rename from polaris.shopify.com/pages/examples/page-actions-with-custom-secondary-action.tsx
rename to polaris.shopify.com/app/examples/page-actions-with-custom-secondary-action/page.tsx
index 626eb5237bf..b52edee41d9 100644
--- a/polaris.shopify.com/pages/examples/page-actions-with-custom-secondary-action.tsx
+++ b/polaris.shopify.com/app/examples/page-actions-with-custom-secondary-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {PageActions, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-default.tsx b/polaris.shopify.com/app/examples/page-default/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/page-default.tsx
rename to polaris.shopify.com/app/examples/page-default/page.tsx
index 4cf8b396b89..f256b151694 100644
--- a/polaris.shopify.com/pages/examples/page-default.tsx
+++ b/polaris.shopify.com/app/examples/page-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Badge, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-full-width.tsx b/polaris.shopify.com/app/examples/page-full-width/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/page-full-width.tsx
rename to polaris.shopify.com/app/examples/page-full-width/page.tsx
index 77131ce5618..9ff2eda1378 100644
--- a/polaris.shopify.com/pages/examples/page-full-width.tsx
+++ b/polaris.shopify.com/app/examples/page-full-width/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Page, LegacyCard} from '@shopify/polaris';
 import {PlusMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-narrow-width.tsx b/polaris.shopify.com/app/examples/page-narrow-width/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/page-narrow-width.tsx
rename to polaris.shopify.com/app/examples/page-narrow-width/page.tsx
index 48bc0586673..42e0e4287d7 100644
--- a/polaris.shopify.com/pages/examples/page-narrow-width.tsx
+++ b/polaris.shopify.com/app/examples/page-narrow-width/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, LegacyCard, PageActions} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-with-action-groups.tsx b/polaris.shopify.com/app/examples/page-with-action-groups/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/page-with-action-groups.tsx
rename to polaris.shopify.com/app/examples/page-with-action-groups/page.tsx
index e2cef741da4..e4ba7080794 100644
--- a/polaris.shopify.com/pages/examples/page-with-action-groups.tsx
+++ b/polaris.shopify.com/app/examples/page-with-action-groups/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-with-content-after-title.tsx b/polaris.shopify.com/app/examples/page-with-content-after-title/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/page-with-content-after-title.tsx
rename to polaris.shopify.com/app/examples/page-with-content-after-title/page.tsx
index ef9a78b9f5c..f8bec620fcb 100644
--- a/polaris.shopify.com/pages/examples/page-with-content-after-title.tsx
+++ b/polaris.shopify.com/app/examples/page-with-content-after-title/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Badge, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-with-custom-primary-action.tsx b/polaris.shopify.com/app/examples/page-with-custom-primary-action/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/page-with-custom-primary-action.tsx
rename to polaris.shopify.com/app/examples/page-with-custom-primary-action/page.tsx
index ac9f2ac28d5..7e47236e9b9 100644
--- a/polaris.shopify.com/pages/examples/page-with-custom-primary-action.tsx
+++ b/polaris.shopify.com/app/examples/page-with-custom-primary-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Button, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-with-custom-secondary-action.tsx b/polaris.shopify.com/app/examples/page-with-custom-secondary-action/page.tsx
similarity index 83%
rename from polaris.shopify.com/pages/examples/page-with-custom-secondary-action.tsx
rename to polaris.shopify.com/app/examples/page-with-custom-secondary-action/page.tsx
index e4b544fd763..daa235a6810 100644
--- a/polaris.shopify.com/pages/examples/page-with-custom-secondary-action.tsx
+++ b/polaris.shopify.com/app/examples/page-with-custom-secondary-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-with-destructive-secondary-action.tsx b/polaris.shopify.com/app/examples/page-with-destructive-secondary-action/page.tsx
similarity index 75%
rename from polaris.shopify.com/pages/examples/page-with-destructive-secondary-action.tsx
rename to polaris.shopify.com/app/examples/page-with-destructive-secondary-action/page.tsx
index 4037823e714..22ad28d5a05 100644
--- a/polaris.shopify.com/pages/examples/page-with-destructive-secondary-action.tsx
+++ b/polaris.shopify.com/app/examples/page-with-destructive-secondary-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-with-divider.tsx b/polaris.shopify.com/app/examples/page-with-divider/page.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/page-with-divider.tsx
rename to polaris.shopify.com/app/examples/page-with-divider/page.tsx
index 2474df87e12..2a7e8c7c62b 100644
--- a/polaris.shopify.com/pages/examples/page-with-divider.tsx
+++ b/polaris.shopify.com/app/examples/page-with-divider/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-with-external-link.tsx b/polaris.shopify.com/app/examples/page-with-external-link/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/page-with-external-link.tsx
rename to polaris.shopify.com/app/examples/page-with-external-link/page.tsx
index 9d6f2204b89..f553f3d0921 100644
--- a/polaris.shopify.com/pages/examples/page-with-external-link.tsx
+++ b/polaris.shopify.com/app/examples/page-with-external-link/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Page, LegacyCard} from '@shopify/polaris';
 import {ExternalMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-with-subtitle.tsx b/polaris.shopify.com/app/examples/page-with-subtitle/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/page-with-subtitle.tsx
rename to polaris.shopify.com/app/examples/page-with-subtitle/page.tsx
index ca8df718b78..e60c08297b2 100644
--- a/polaris.shopify.com/pages/examples/page-with-subtitle.tsx
+++ b/polaris.shopify.com/app/examples/page-with-subtitle/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Page, LegacyCard} from '@shopify/polaris';
 import {ArrowDownMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-with-tooltip-action.tsx b/polaris.shopify.com/app/examples/page-with-tooltip-action/page.tsx
similarity index 81%
rename from polaris.shopify.com/pages/examples/page-with-tooltip-action.tsx
rename to polaris.shopify.com/app/examples/page-with-tooltip-action/page.tsx
index 08a8bd878e5..31f3bd7fcd1 100644
--- a/polaris.shopify.com/pages/examples/page-with-tooltip-action.tsx
+++ b/polaris.shopify.com/app/examples/page-with-tooltip-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-without-pagination.tsx b/polaris.shopify.com/app/examples/page-without-pagination/page.tsx
similarity index 81%
rename from polaris.shopify.com/pages/examples/page-without-pagination.tsx
rename to polaris.shopify.com/app/examples/page-without-pagination/page.tsx
index 5196dd91cbb..28a85b81a24 100644
--- a/polaris.shopify.com/pages/examples/page-without-pagination.tsx
+++ b/polaris.shopify.com/app/examples/page-without-pagination/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, LegacyCard} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/page-without-primary-action-in-header.tsx b/polaris.shopify.com/app/examples/page-without-primary-action-in-header/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/page-without-primary-action-in-header.tsx
rename to polaris.shopify.com/app/examples/page-without-primary-action-in-header/page.tsx
index 7b9bda5ce29..5f3d7902b86 100644
--- a/polaris.shopify.com/pages/examples/page-without-primary-action-in-header.tsx
+++ b/polaris.shopify.com/app/examples/page-without-primary-action-in-header/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Page, LegacyCard, LegacyStack, Button} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PageExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/pagination-default.tsx b/polaris.shopify.com/app/examples/pagination-default/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/pagination-default.tsx
rename to polaris.shopify.com/app/examples/pagination-default/page.tsx
index 9d79567247c..4e3ad0ea483 100644
--- a/polaris.shopify.com/pages/examples/pagination-default.tsx
+++ b/polaris.shopify.com/app/examples/pagination-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Pagination} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PaginationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/pagination-with-keyboard-navigation.tsx b/polaris.shopify.com/app/examples/pagination-with-keyboard-navigation/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/pagination-with-keyboard-navigation.tsx
rename to polaris.shopify.com/app/examples/pagination-with-keyboard-navigation/page.tsx
index 6b9eed74003..5ec1ffc9d1b 100644
--- a/polaris.shopify.com/pages/examples/pagination-with-keyboard-navigation.tsx
+++ b/polaris.shopify.com/app/examples/pagination-with-keyboard-navigation/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Pagination} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PaginationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/pagination-with-label.tsx b/polaris.shopify.com/app/examples/pagination-with-label/page.tsx
similarity index 79%
rename from polaris.shopify.com/pages/examples/pagination-with-label.tsx
rename to polaris.shopify.com/app/examples/pagination-with-label/page.tsx
index f6d892aee30..bdc4482e173 100644
--- a/polaris.shopify.com/pages/examples/pagination-with-label.tsx
+++ b/polaris.shopify.com/app/examples/pagination-with-label/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Pagination} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PaginationExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/popover-with-action-list.tsx b/polaris.shopify.com/app/examples/popover-with-action-list/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/popover-with-action-list.tsx
rename to polaris.shopify.com/app/examples/popover-with-action-list/page.tsx
index 599e1d74629..de09dd012b5 100644
--- a/polaris.shopify.com/pages/examples/popover-with-action-list.tsx
+++ b/polaris.shopify.com/app/examples/popover-with-action-list/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Popover, ActionList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PopoverWithActionListExample() {
   const [popoverActive, setPopoverActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/popover-with-content-and-actions.tsx b/polaris.shopify.com/app/examples/popover-with-content-and-actions/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/popover-with-content-and-actions.tsx
rename to polaris.shopify.com/app/examples/popover-with-content-and-actions/page.tsx
index 47e040ed8a5..8e34f3cde72 100644
--- a/polaris.shopify.com/pages/examples/popover-with-content-and-actions.tsx
+++ b/polaris.shopify.com/app/examples/popover-with-content-and-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Popover, ActionList} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PopoverContentExample() {
   const [popoverActive, setPopoverActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/popover-with-form-components.tsx b/polaris.shopify.com/app/examples/popover-with-form-components/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/popover-with-form-components.tsx
rename to polaris.shopify.com/app/examples/popover-with-form-components/page.tsx
index 4ae38705a35..cf09ef41e2f 100644
--- a/polaris.shopify.com/pages/examples/popover-with-form-components.tsx
+++ b/polaris.shopify.com/app/examples/popover-with-form-components/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, Popover, FormLayout, Select, TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PopoverFormExample() {
   const [popoverActive, setPopoverActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx b/polaris.shopify.com/app/examples/popover-with-lazy-loaded-list/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx
rename to polaris.shopify.com/app/examples/popover-with-lazy-loaded-list/page.tsx
index 12982c76377..617efdc870e 100644
--- a/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx
+++ b/polaris.shopify.com/app/examples/popover-with-lazy-loaded-list/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Button, LegacyCard, Popover, ResourceList, Avatar} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PopoverLazyLoadExample() {
   const [popoverActive, setPopoverActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx b/polaris.shopify.com/app/examples/popover-with-searchable-listbox/page.tsx
similarity index 98%
rename from polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx
rename to polaris.shopify.com/app/examples/popover-with-searchable-listbox/page.tsx
index ef6cf5f6f5c..827bb2f298b 100644
--- a/polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx
+++ b/polaris.shopify.com/app/examples/popover-with-searchable-listbox/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, {useState} from 'react';
 import {
   Listbox,
@@ -12,7 +14,7 @@ import {
 } from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 const actionValue = '__ACTION__';
 
diff --git a/polaris.shopify.com/pages/examples/progress-bar-colored.tsx b/polaris.shopify.com/app/examples/progress-bar-colored/page.tsx
similarity index 77%
rename from polaris.shopify.com/pages/examples/progress-bar-colored.tsx
rename to polaris.shopify.com/app/examples/progress-bar-colored/page.tsx
index 32923548272..4eed5411e0a 100644
--- a/polaris.shopify.com/pages/examples/progress-bar-colored.tsx
+++ b/polaris.shopify.com/app/examples/progress-bar-colored/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ProgressBar} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ProgressBarExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/progress-bar-default.tsx b/polaris.shopify.com/app/examples/progress-bar-default/page.tsx
similarity index 72%
rename from polaris.shopify.com/pages/examples/progress-bar-default.tsx
rename to polaris.shopify.com/app/examples/progress-bar-default/page.tsx
index 6d6a7e1c3fb..65ff9099d05 100644
--- a/polaris.shopify.com/pages/examples/progress-bar-default.tsx
+++ b/polaris.shopify.com/app/examples/progress-bar-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ProgressBar} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ProgressBarExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/progress-bar-non-animated.tsx b/polaris.shopify.com/app/examples/progress-bar-non-animated/page.tsx
similarity index 73%
rename from polaris.shopify.com/pages/examples/progress-bar-non-animated.tsx
rename to polaris.shopify.com/app/examples/progress-bar-non-animated/page.tsx
index 43b866f729f..281c3640196 100644
--- a/polaris.shopify.com/pages/examples/progress-bar-non-animated.tsx
+++ b/polaris.shopify.com/app/examples/progress-bar-non-animated/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ProgressBar} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ProgressBarExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/progress-bar-small.tsx b/polaris.shopify.com/app/examples/progress-bar-small/page.tsx
similarity index 73%
rename from polaris.shopify.com/pages/examples/progress-bar-small.tsx
rename to polaris.shopify.com/app/examples/progress-bar-small/page.tsx
index ce471063f7e..953b5525606 100644
--- a/polaris.shopify.com/pages/examples/progress-bar-small.tsx
+++ b/polaris.shopify.com/app/examples/progress-bar-small/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ProgressBar} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ProgressBarExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/radio-button-default.tsx b/polaris.shopify.com/app/examples/radio-button-default/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/radio-button-default.tsx
rename to polaris.shopify.com/app/examples/radio-button-default/page.tsx
index 4dfa40529e5..0e8ebf66e6c 100644
--- a/polaris.shopify.com/pages/examples/radio-button-default.tsx
+++ b/polaris.shopify.com/app/examples/radio-button-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, RadioButton} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function RadioButtonExample() {
   const [value, setValue] = useState('disabled');
diff --git a/polaris.shopify.com/pages/examples/range-slider-default.tsx b/polaris.shopify.com/app/examples/range-slider-default/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/range-slider-default.tsx
rename to polaris.shopify.com/app/examples/range-slider-default/page.tsx
index 7f6acfff956..68ecf332500 100644
--- a/polaris.shopify.com/pages/examples/range-slider-default.tsx
+++ b/polaris.shopify.com/app/examples/range-slider-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, RangeSlider} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function RangeSliderExample() {
   const [rangeValue, setRangeValue] = useState(32);
diff --git a/polaris.shopify.com/pages/examples/range-slider-with-dual-thumb.tsx b/polaris.shopify.com/app/examples/range-slider-with-dual-thumb/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/range-slider-with-dual-thumb.tsx
rename to polaris.shopify.com/app/examples/range-slider-with-dual-thumb/page.tsx
index e939163a58d..3c87ba6dc4e 100644
--- a/polaris.shopify.com/pages/examples/range-slider-with-dual-thumb.tsx
+++ b/polaris.shopify.com/app/examples/range-slider-with-dual-thumb/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LegacyCard,
   RangeSlider,
@@ -5,7 +7,7 @@ import {
   TextField,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function DualThumbRangeSliderExample() {
   const initialValue = [900, 1000];
diff --git a/polaris.shopify.com/pages/examples/range-slider-with-min-and-max.tsx b/polaris.shopify.com/app/examples/range-slider-with-min-and-max/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/range-slider-with-min-and-max.tsx
rename to polaris.shopify.com/app/examples/range-slider-with-min-and-max/page.tsx
index 935f7f82d09..7399d16460e 100644
--- a/polaris.shopify.com/pages/examples/range-slider-with-min-and-max.tsx
+++ b/polaris.shopify.com/app/examples/range-slider-with-min-and-max/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, RangeSlider} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function RangeSliderWithPreciseRangeControlExample() {
   const [rangeValue, setRangeValue] = useState(0);
diff --git a/polaris.shopify.com/pages/examples/range-slider-with-prefix-and-suffix.tsx b/polaris.shopify.com/app/examples/range-slider-with-prefix-and-suffix/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/range-slider-with-prefix-and-suffix.tsx
rename to polaris.shopify.com/app/examples/range-slider-with-prefix-and-suffix/page.tsx
index cb116b6c9e6..6335d2ef534 100644
--- a/polaris.shopify.com/pages/examples/range-slider-with-prefix-and-suffix.tsx
+++ b/polaris.shopify.com/app/examples/range-slider-with-prefix-and-suffix/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, RangeSlider} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function RangeSliderWithPrefixAndSuffixExample() {
   const [rangeValue, setRangeValue] = useState(100);
diff --git a/polaris.shopify.com/pages/examples/range-slider-with-steps.tsx b/polaris.shopify.com/app/examples/range-slider-with-steps/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/range-slider-with-steps.tsx
rename to polaris.shopify.com/app/examples/range-slider-with-steps/page.tsx
index a93f88a5e29..bc2b81c0e33 100644
--- a/polaris.shopify.com/pages/examples/range-slider-with-steps.tsx
+++ b/polaris.shopify.com/app/examples/range-slider-with-steps/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, RangeSlider} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function RangeSliderWithPreciseRangeControlExample() {
   const [rangeValue, setRangeValue] = useState(4);
diff --git a/polaris.shopify.com/pages/examples/resource-item-default.tsx b/polaris.shopify.com/app/examples/resource-item-default/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/resource-item-default.tsx
rename to polaris.shopify.com/app/examples/resource-item-default/page.tsx
index 74dd51085aa..7c18d0101bc 100644
--- a/polaris.shopify.com/pages/examples/resource-item-default.tsx
+++ b/polaris.shopify.com/app/examples/resource-item-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, ResourceItem, Text} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceItemExample() {
   const [selectedItems, setSelectedItems] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/resource-item-with-media.tsx b/polaris.shopify.com/app/examples/resource-item-with-media/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/resource-item-with-media.tsx
rename to polaris.shopify.com/app/examples/resource-item-with-media/page.tsx
index 1246f1e9484..ddbe8874fd1 100644
--- a/polaris.shopify.com/pages/examples/resource-item-with-media.tsx
+++ b/polaris.shopify.com/app/examples/resource-item-with-media/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, ResourceItem, Avatar, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceItemExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/resource-item-with-shortcut-actions.tsx b/polaris.shopify.com/app/examples/resource-item-with-shortcut-actions/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/resource-item-with-shortcut-actions.tsx
rename to polaris.shopify.com/app/examples/resource-item-with-shortcut-actions/page.tsx
index aa774e2def8..f6e9eff4881 100644
--- a/polaris.shopify.com/pages/examples/resource-item-with-shortcut-actions.tsx
+++ b/polaris.shopify.com/app/examples/resource-item-with-shortcut-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, ResourceItem, Avatar, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceItemExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/resource-item-with-vertical-alignment.tsx b/polaris.shopify.com/app/examples/resource-item-with-vertical-alignment/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/resource-item-with-vertical-alignment.tsx
rename to polaris.shopify.com/app/examples/resource-item-with-vertical-alignment/page.tsx
index 865c24eb6de..5072cdcd5d0 100644
--- a/polaris.shopify.com/pages/examples/resource-item-with-vertical-alignment.tsx
+++ b/polaris.shopify.com/app/examples/resource-item-with-vertical-alignment/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, ResourceItem, Avatar, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceItemExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/resource-list-default.tsx b/polaris.shopify.com/app/examples/resource-list-default/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/resource-list-default.tsx
rename to polaris.shopify.com/app/examples/resource-list-default/page.tsx
index af9ccc64b86..33aca5fc56a 100644
--- a/polaris.shopify.com/pages/examples/resource-list-default.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, Avatar, ResourceItem, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-a-custom-empty-search-result-state.tsx b/polaris.shopify.com/app/examples/resource-list-with-a-custom-empty-search-result-state/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/resource-list-with-a-custom-empty-search-result-state.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-a-custom-empty-search-result-state/page.tsx
index b6c65b62ac3..92954052099 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-a-custom-empty-search-result-state.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-a-custom-empty-search-result-state/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   TextField,
   Filters,
@@ -9,7 +11,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListWithFilteringExample() {
   const [taggedWith, setTaggedWith] = useState('VIP');
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-all-of-its-elements.tsx b/polaris.shopify.com/app/examples/resource-list-with-all-of-its-elements/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/resource-list-with-all-of-its-elements.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-all-of-its-elements/page.tsx
index 5641a5ac726..e51225656a8 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-all-of-its-elements.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-all-of-its-elements/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   TextField,
   Filters,
@@ -9,7 +11,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListExample() {
   const [selectedItems, setSelectedItems] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-alternate-tool.tsx b/polaris.shopify.com/app/examples/resource-list-with-alternate-tool/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/resource-list-with-alternate-tool.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-alternate-tool/page.tsx
index 2507ced16e7..c67d959cad8 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-alternate-tool.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-alternate-tool/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LegacyCard,
   ResourceList,
@@ -7,7 +9,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListWithAlternateToolExample() {
   const resourceName = {
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-bulk-actions.tsx b/polaris.shopify.com/app/examples/resource-list-with-bulk-actions/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/resource-list-with-bulk-actions.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-bulk-actions/page.tsx
index 36a31551a0d..26d5e5ffb5d 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-bulk-actions.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-bulk-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, Avatar, ResourceItem, Text} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListWithBulkActionsExample() {
   const [selectedItems, setSelectedItems] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-empty-state.tsx b/polaris.shopify.com/app/examples/resource-list-with-empty-state/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/resource-list-with-empty-state.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-empty-state/page.tsx
index 1e1c45e3071..aa811f8b76e 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-empty-state.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-empty-state/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Filters,
   EmptyState,
@@ -7,7 +9,7 @@ import {
   ResourceList,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListWithEmptyStateExample() {
   const items = [];
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-filtering.tsx b/polaris.shopify.com/app/examples/resource-list-with-filtering/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/resource-list-with-filtering.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-filtering/page.tsx
index 88f04d18e19..265df89adf7 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-filtering.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-filtering/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   TextField,
   Filters,
@@ -9,7 +11,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListWithFilteringExample() {
   const [taggedWith, setTaggedWith] = useState('VIP');
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-item-shortcut-actions.tsx b/polaris.shopify.com/app/examples/resource-list-with-item-shortcut-actions/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/resource-list-with-item-shortcut-actions.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-item-shortcut-actions/page.tsx
index bad50508124..9f07bc54373 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-item-shortcut-actions.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-item-shortcut-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, Avatar, ResourceItem, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-loading-state.tsx b/polaris.shopify.com/app/examples/resource-list-with-loading-state/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/resource-list-with-loading-state.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-loading-state/page.tsx
index 22f4d4dd0e5..7b8fe4ae186 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-loading-state.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-loading-state/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, Avatar, ResourceItem, Text} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListWithLoadingExample() {
   const [selectedItems, setSelectedItems] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-multiselect.tsx b/polaris.shopify.com/app/examples/resource-list-with-multiselect/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/resource-list-with-multiselect.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-multiselect/page.tsx
index 4b9d9000396..59eb3ff27b8 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-multiselect.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-multiselect/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, Avatar, ResourceItem, Text} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListExample() {
   const [selectedItems, setSelectedItems] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-persistent-item-shortcut-actions.tsx b/polaris.shopify.com/app/examples/resource-list-with-persistent-item-shortcut-actions/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/resource-list-with-persistent-item-shortcut-actions.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-persistent-item-shortcut-actions/page.tsx
index df8b3d26edc..4d4d50632f7 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-persistent-item-shortcut-actions.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-persistent-item-shortcut-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, Avatar, ResourceItem, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-selection-and-no-bulk-actions.tsx b/polaris.shopify.com/app/examples/resource-list-with-selection-and-no-bulk-actions/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/resource-list-with-selection-and-no-bulk-actions.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-selection-and-no-bulk-actions/page.tsx
index cd40ebb5a95..5c14a040673 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-selection-and-no-bulk-actions.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-selection-and-no-bulk-actions/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, Avatar, ResourceItem, Text} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListWithSelectionExample() {
   const [selectedItems, setSelectedItems] = useState([]);
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-sorting.tsx b/polaris.shopify.com/app/examples/resource-list-with-sorting/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/resource-list-with-sorting.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-sorting/page.tsx
index ecf6fa256b9..e83341a8921 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-sorting.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-sorting/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, Avatar, ResourceItem, Text} from '@shopify/polaris';
 import {useState} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListWithSortingExample() {
   const [sortValue, setSortValue] = useState('DATE_MODIFIED_DESC');
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-total-count.tsx b/polaris.shopify.com/app/examples/resource-list-with-total-count/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/resource-list-with-total-count.tsx
rename to polaris.shopify.com/app/examples/resource-list-with-total-count/page.tsx
index 198cb1cdaac..eeadef3304a 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-total-count.tsx
+++ b/polaris.shopify.com/app/examples/resource-list-with-total-count/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, ResourceList, Avatar, ResourceItem, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ResourceListWithTotalItemsCount() {
   return (
diff --git a/polaris.shopify.com/pages/examples/scrollable-default.tsx b/polaris.shopify.com/app/examples/scrollable-default/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/scrollable-default.tsx
rename to polaris.shopify.com/app/examples/scrollable-default/page.tsx
index 5558bb4b4ef..0d72cfe995e 100644
--- a/polaris.shopify.com/pages/examples/scrollable-default.tsx
+++ b/polaris.shopify.com/app/examples/scrollable-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, Scrollable} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ScrollableExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/scrollable-to-child-component.tsx b/polaris.shopify.com/app/examples/scrollable-to-child-component/page.tsx
similarity index 99%
rename from polaris.shopify.com/pages/examples/scrollable-to-child-component.tsx
rename to polaris.shopify.com/app/examples/scrollable-to-child-component/page.tsx
index 1d44267b2cb..f3aa7ea1755 100644
--- a/polaris.shopify.com/pages/examples/scrollable-to-child-component.tsx
+++ b/polaris.shopify.com/app/examples/scrollable-to-child-component/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, Scrollable} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ScrollableExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/select-default.tsx b/polaris.shopify.com/app/examples/select-default/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/select-default.tsx
rename to polaris.shopify.com/app/examples/select-default/page.tsx
index ea080c1f90b..7902e447d0e 100644
--- a/polaris.shopify.com/pages/examples/select-default.tsx
+++ b/polaris.shopify.com/app/examples/select-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Select} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SelectExample() {
   const [selected, setSelected] = useState('today');
diff --git a/polaris.shopify.com/pages/examples/select-disabled.tsx b/polaris.shopify.com/app/examples/select-disabled/page.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/select-disabled.tsx
rename to polaris.shopify.com/app/examples/select-disabled/page.tsx
index d83a33b68d3..ca11999978d 100644
--- a/polaris.shopify.com/pages/examples/select-disabled.tsx
+++ b/polaris.shopify.com/app/examples/select-disabled/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Select} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SelectExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/select-with-inline-label.tsx b/polaris.shopify.com/app/examples/select-with-inline-label/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/select-with-inline-label.tsx
rename to polaris.shopify.com/app/examples/select-with-inline-label/page.tsx
index 25bb1f570d1..2d4612e458f 100644
--- a/polaris.shopify.com/pages/examples/select-with-inline-label.tsx
+++ b/polaris.shopify.com/app/examples/select-with-inline-label/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Select} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function InlineLabelExample() {
   const [selected, setSelected] = useState('newestUpdate');
diff --git a/polaris.shopify.com/pages/examples/select-with-prefix.tsx b/polaris.shopify.com/app/examples/select-with-prefix/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/select-with-prefix.tsx
rename to polaris.shopify.com/app/examples/select-with-prefix/page.tsx
index 0230f4557ee..83960868ecd 100644
--- a/polaris.shopify.com/pages/examples/select-with-prefix.tsx
+++ b/polaris.shopify.com/app/examples/select-with-prefix/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Icon, Select} from '@shopify/polaris';
 import {CaretUpMinor, CaretDownMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PrefixExample() {
   const [selected, setSelected] = useState('enabled');
diff --git a/polaris.shopify.com/pages/examples/select-with-separate-validation-error.tsx b/polaris.shopify.com/app/examples/select-with-separate-validation-error/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/select-with-separate-validation-error.tsx
rename to polaris.shopify.com/app/examples/select-with-separate-validation-error/page.tsx
index ce08dfe8d94..a067b22e426 100644
--- a/polaris.shopify.com/pages/examples/select-with-separate-validation-error.tsx
+++ b/polaris.shopify.com/app/examples/select-with-separate-validation-error/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LegacyStack,
   FormLayout,
@@ -9,7 +11,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SeparateValidationErrorExample() {
   const [weight, setWeight] = useState('12');
diff --git a/polaris.shopify.com/pages/examples/select-with-validation-error.tsx b/polaris.shopify.com/app/examples/select-with-validation-error/page.tsx
similarity index 83%
rename from polaris.shopify.com/pages/examples/select-with-validation-error.tsx
rename to polaris.shopify.com/app/examples/select-with-validation-error/page.tsx
index 329ef708c40..c07d69f08cd 100644
--- a/polaris.shopify.com/pages/examples/select-with-validation-error.tsx
+++ b/polaris.shopify.com/app/examples/select-with-validation-error/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Select} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ValidationErrorExample() {
   const [selected, setSelected] = useState('');
diff --git a/polaris.shopify.com/pages/examples/setting-toggle-default.tsx b/polaris.shopify.com/app/examples/setting-toggle-default/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/setting-toggle-default.tsx
rename to polaris.shopify.com/app/examples/setting-toggle-default/page.tsx
index 8183e5a0e06..0f1bdd2d6a9 100644
--- a/polaris.shopify.com/pages/examples/setting-toggle-default.tsx
+++ b/polaris.shopify.com/app/examples/setting-toggle-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SettingToggle, Text} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SettingToggleExample() {
   const [active, setActive] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/sheet-default.tsx b/polaris.shopify.com/app/examples/sheet-default/page.tsx
similarity index 97%
rename from polaris.shopify.com/pages/examples/sheet-default.tsx
rename to polaris.shopify.com/app/examples/sheet-default/page.tsx
index c5e772d2698..4b9cc180758 100644
--- a/polaris.shopify.com/pages/examples/sheet-default.tsx
+++ b/polaris.shopify.com/app/examples/sheet-default/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   List,
   Button,
@@ -10,7 +12,7 @@ import {
 } from '@shopify/polaris';
 import {MobileCancelMajor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SheetExample() {
   const [sheetActive, setSheetActive] = useState(true);
diff --git a/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx b/polaris.shopify.com/app/examples/sheet-with-searchable-listbox/page.tsx
similarity index 99%
rename from polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
rename to polaris.shopify.com/app/examples/sheet-with-searchable-listbox/page.tsx
index 4047c0b029f..2200df62556 100644
--- a/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
+++ b/polaris.shopify.com/app/examples/sheet-with-searchable-listbox/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, {useState, useCallback} from 'react';
 import {
   TextField,
@@ -15,7 +17,7 @@ import {
 } from '@shopify/polaris';
 import {MobileCancelMajor, SearchMinor} from '@shopify/polaris-icons';
 
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 const actionValue = '__ACTION__';
 
diff --git a/polaris.shopify.com/pages/examples/skeleton-body-text-default.tsx b/polaris.shopify.com/app/examples/skeleton-body-text-default/page.tsx
similarity index 66%
rename from polaris.shopify.com/pages/examples/skeleton-body-text-default.tsx
rename to polaris.shopify.com/app/examples/skeleton-body-text-default/page.tsx
index 5cb6db9d970..9d4cfa24198 100644
--- a/polaris.shopify.com/pages/examples/skeleton-body-text-default.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-body-text-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SkeletonBodyText} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return <SkeletonBodyText />;
diff --git a/polaris.shopify.com/pages/examples/skeleton-body-text-single-line-content.tsx b/polaris.shopify.com/app/examples/skeleton-body-text-single-line-content/page.tsx
similarity index 67%
rename from polaris.shopify.com/pages/examples/skeleton-body-text-single-line-content.tsx
rename to polaris.shopify.com/app/examples/skeleton-body-text-single-line-content/page.tsx
index 69419c8f69b..ecfa04f19c6 100644
--- a/polaris.shopify.com/pages/examples/skeleton-body-text-single-line-content.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-body-text-single-line-content/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SkeletonBodyText} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return <SkeletonBodyText lines={1} />;
diff --git a/polaris.shopify.com/pages/examples/skeleton-display-text-extra-large.tsx b/polaris.shopify.com/app/examples/skeleton-display-text-extra-large/page.tsx
similarity index 69%
rename from polaris.shopify.com/pages/examples/skeleton-display-text-extra-large.tsx
rename to polaris.shopify.com/app/examples/skeleton-display-text-extra-large/page.tsx
index dfc849a12fe..45ef37c7715 100644
--- a/polaris.shopify.com/pages/examples/skeleton-display-text-extra-large.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-display-text-extra-large/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SkeletonDisplayText} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return <SkeletonDisplayText size="extraLarge" />;
diff --git a/polaris.shopify.com/pages/examples/skeleton-display-text-medium-and-large.tsx b/polaris.shopify.com/app/examples/skeleton-display-text-medium-and-large/page.tsx
similarity index 68%
rename from polaris.shopify.com/pages/examples/skeleton-display-text-medium-and-large.tsx
rename to polaris.shopify.com/app/examples/skeleton-display-text-medium-and-large/page.tsx
index fa939b4f964..53af90f2932 100644
--- a/polaris.shopify.com/pages/examples/skeleton-display-text-medium-and-large.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-display-text-medium-and-large/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SkeletonDisplayText} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return <SkeletonDisplayText size="medium" />;
diff --git a/polaris.shopify.com/pages/examples/skeleton-display-text-small.tsx b/polaris.shopify.com/app/examples/skeleton-display-text-small/page.tsx
similarity index 68%
rename from polaris.shopify.com/pages/examples/skeleton-display-text-small.tsx
rename to polaris.shopify.com/app/examples/skeleton-display-text-small/page.tsx
index 064398a6e14..cdf57716881 100644
--- a/polaris.shopify.com/pages/examples/skeleton-display-text-small.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-display-text-small/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SkeletonDisplayText} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return <SkeletonDisplayText size="small" />;
diff --git a/polaris.shopify.com/pages/examples/skeleton-page-with-dynamic-content.tsx b/polaris.shopify.com/app/examples/skeleton-page-with-dynamic-content/page.tsx
similarity index 94%
rename from polaris.shopify.com/pages/examples/skeleton-page-with-dynamic-content.tsx
rename to polaris.shopify.com/app/examples/skeleton-page-with-dynamic-content/page.tsx
index 86592463c85..f114c4aa6a2 100644
--- a/polaris.shopify.com/pages/examples/skeleton-page-with-dynamic-content.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-page-with-dynamic-content/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   SkeletonPage,
   Layout,
@@ -7,7 +9,7 @@ import {
   SkeletonDisplayText,
 } from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/skeleton-page-with-static-content.tsx b/polaris.shopify.com/app/examples/skeleton-page-with-static-content/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/skeleton-page-with-static-content.tsx
rename to polaris.shopify.com/app/examples/skeleton-page-with-static-content/page.tsx
index 77b9975a6e4..cde2077fee8 100644
--- a/polaris.shopify.com/pages/examples/skeleton-page-with-static-content.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-page-with-static-content/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SkeletonPage, Layout, LegacyCard, SkeletonBodyText} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/skeleton-tabs-default.tsx b/polaris.shopify.com/app/examples/skeleton-tabs-default/page.tsx
similarity index 71%
rename from polaris.shopify.com/pages/examples/skeleton-tabs-default.tsx
rename to polaris.shopify.com/app/examples/skeleton-tabs-default/page.tsx
index 693e719ac5e..08c7257701b 100644
--- a/polaris.shopify.com/pages/examples/skeleton-tabs-default.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-tabs-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, SkeletonTabs} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/skeleton-tabs-with-a-custom-count.tsx b/polaris.shopify.com/app/examples/skeleton-tabs-with-a-custom-count/page.tsx
similarity index 72%
rename from polaris.shopify.com/pages/examples/skeleton-tabs-with-a-custom-count.tsx
rename to polaris.shopify.com/app/examples/skeleton-tabs-with-a-custom-count/page.tsx
index 79feef0019e..f7cd00a79e1 100644
--- a/polaris.shopify.com/pages/examples/skeleton-tabs-with-a-custom-count.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-tabs-with-a-custom-count/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, SkeletonTabs} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/skeleton-thumbnail-extra-small.tsx b/polaris.shopify.com/app/examples/skeleton-thumbnail-extra-small/page.tsx
similarity index 68%
rename from polaris.shopify.com/pages/examples/skeleton-thumbnail-extra-small.tsx
rename to polaris.shopify.com/app/examples/skeleton-thumbnail-extra-small/page.tsx
index de5215fb6e3..48ae65d43be 100644
--- a/polaris.shopify.com/pages/examples/skeleton-thumbnail-extra-small.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-thumbnail-extra-small/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SkeletonThumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return <SkeletonThumbnail size="extraSmall" />;
diff --git a/polaris.shopify.com/pages/examples/skeleton-thumbnail-large.tsx b/polaris.shopify.com/app/examples/skeleton-thumbnail-large/page.tsx
similarity index 68%
rename from polaris.shopify.com/pages/examples/skeleton-thumbnail-large.tsx
rename to polaris.shopify.com/app/examples/skeleton-thumbnail-large/page.tsx
index f7fbd1318a5..80829932576 100644
--- a/polaris.shopify.com/pages/examples/skeleton-thumbnail-large.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-thumbnail-large/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SkeletonThumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return <SkeletonThumbnail size="large" />;
diff --git a/polaris.shopify.com/pages/examples/skeleton-thumbnail-medium.tsx b/polaris.shopify.com/app/examples/skeleton-thumbnail-medium/page.tsx
similarity index 68%
rename from polaris.shopify.com/pages/examples/skeleton-thumbnail-medium.tsx
rename to polaris.shopify.com/app/examples/skeleton-thumbnail-medium/page.tsx
index 1792b2d22c2..ff485be834f 100644
--- a/polaris.shopify.com/pages/examples/skeleton-thumbnail-medium.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-thumbnail-medium/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SkeletonThumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return <SkeletonThumbnail size="medium" />;
diff --git a/polaris.shopify.com/pages/examples/skeleton-thumbnail-small.tsx b/polaris.shopify.com/app/examples/skeleton-thumbnail-small/page.tsx
similarity index 68%
rename from polaris.shopify.com/pages/examples/skeleton-thumbnail-small.tsx
rename to polaris.shopify.com/app/examples/skeleton-thumbnail-small/page.tsx
index f1448cf4f62..70ddb9c7ee7 100644
--- a/polaris.shopify.com/pages/examples/skeleton-thumbnail-small.tsx
+++ b/polaris.shopify.com/app/examples/skeleton-thumbnail-small/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {SkeletonThumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SkeletonExample() {
   return <SkeletonThumbnail size="small" />;
diff --git a/polaris.shopify.com/pages/examples/spinner-default.tsx b/polaris.shopify.com/app/examples/spinner-default/page.tsx
similarity index 69%
rename from polaris.shopify.com/pages/examples/spinner-default.tsx
rename to polaris.shopify.com/app/examples/spinner-default/page.tsx
index 76f072e9d4d..87688081e1f 100644
--- a/polaris.shopify.com/pages/examples/spinner-default.tsx
+++ b/polaris.shopify.com/app/examples/spinner-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Spinner} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SpinnerExample() {
   return <Spinner accessibilityLabel="Spinner example" size="large" />;
diff --git a/polaris.shopify.com/pages/examples/spinner-small.tsx b/polaris.shopify.com/app/examples/spinner-small/page.tsx
similarity index 70%
rename from polaris.shopify.com/pages/examples/spinner-small.tsx
rename to polaris.shopify.com/app/examples/spinner-small/page.tsx
index 277a61b3364..31a98412ca1 100644
--- a/polaris.shopify.com/pages/examples/spinner-small.tsx
+++ b/polaris.shopify.com/app/examples/spinner-small/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Spinner} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SpinnerExample() {
   return <Spinner accessibilityLabel="Small spinner example" size="small" />;
diff --git a/polaris.shopify.com/pages/examples/spinner-with-focus-management.tsx b/polaris.shopify.com/app/examples/spinner-with-focus-management/page.tsx
similarity index 95%
rename from polaris.shopify.com/pages/examples/spinner-with-focus-management.tsx
rename to polaris.shopify.com/app/examples/spinner-with-focus-management/page.tsx
index 85e127df3dd..bbbc98090a6 100644
--- a/polaris.shopify.com/pages/examples/spinner-with-focus-management.tsx
+++ b/polaris.shopify.com/app/examples/spinner-with-focus-management/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Spinner,
   Form,
@@ -8,7 +10,7 @@ import {
   Tabs,
 } from '@shopify/polaris';
 import {useState, useEffect, useCallback, useRef} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SpinnerWithFocusManagement() {
   const tabs = useRef([
diff --git a/polaris.shopify.com/pages/examples/stack-default.tsx b/polaris.shopify.com/app/examples/stack-default/page.tsx
similarity index 76%
rename from polaris.shopify.com/pages/examples/stack-default.tsx
rename to polaris.shopify.com/app/examples/stack-default/page.tsx
index 639dac7df51..ec84ff83f1a 100644
--- a/polaris.shopify.com/pages/examples/stack-default.tsx
+++ b/polaris.shopify.com/app/examples/stack-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Stack, Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function StackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/stack-fill-available-space-proportionally.tsx b/polaris.shopify.com/app/examples/stack-fill-available-space-proportionally/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/stack-fill-available-space-proportionally.tsx
rename to polaris.shopify.com/app/examples/stack-fill-available-space-proportionally/page.tsx
index 572d9af85f2..2e71c361a86 100644
--- a/polaris.shopify.com/pages/examples/stack-fill-available-space-proportionally.tsx
+++ b/polaris.shopify.com/app/examples/stack-fill-available-space-proportionally/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Stack, Badge, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function StackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/stack-non-wrapping.tsx b/polaris.shopify.com/app/examples/stack-non-wrapping/page.tsx
similarity index 77%
rename from polaris.shopify.com/pages/examples/stack-non-wrapping.tsx
rename to polaris.shopify.com/app/examples/stack-non-wrapping/page.tsx
index 0069e4199c3..dc40cee8f29 100644
--- a/polaris.shopify.com/pages/examples/stack-non-wrapping.tsx
+++ b/polaris.shopify.com/app/examples/stack-non-wrapping/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Stack, Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function StackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/stack-spacing.tsx b/polaris.shopify.com/app/examples/stack-spacing/page.tsx
similarity index 73%
rename from polaris.shopify.com/pages/examples/stack-spacing.tsx
rename to polaris.shopify.com/app/examples/stack-spacing/page.tsx
index 7e5bd3535c6..c61dc36af96 100644
--- a/polaris.shopify.com/pages/examples/stack-spacing.tsx
+++ b/polaris.shopify.com/app/examples/stack-spacing/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Stack, Badge} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function StackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/stack-vertical-centering.tsx b/polaris.shopify.com/app/examples/stack-vertical-centering/page.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/stack-vertical-centering.tsx
rename to polaris.shopify.com/app/examples/stack-vertical-centering/page.tsx
index 5afbf183379..4572feb86c8 100644
--- a/polaris.shopify.com/pages/examples/stack-vertical-centering.tsx
+++ b/polaris.shopify.com/app/examples/stack-vertical-centering/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Stack, Badge, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function StackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/stack-where-a-single-item-fills-the-remaining-space.tsx b/polaris.shopify.com/app/examples/stack-where-a-single-item-fills-the-remaining-space/page.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/stack-where-a-single-item-fills-the-remaining-space.tsx
rename to polaris.shopify.com/app/examples/stack-where-a-single-item-fills-the-remaining-space/page.tsx
index 567327e49b8..e3b0b55d41e 100644
--- a/polaris.shopify.com/pages/examples/stack-where-a-single-item-fills-the-remaining-space.tsx
+++ b/polaris.shopify.com/app/examples/stack-where-a-single-item-fills-the-remaining-space/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Stack, Badge, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function StackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/stack-where-items-fill-space-evenly.tsx b/polaris.shopify.com/app/examples/stack-where-items-fill-space-evenly/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/stack-where-items-fill-space-evenly.tsx
rename to polaris.shopify.com/app/examples/stack-where-items-fill-space-evenly/page.tsx
index 511f3db5909..d757d7f9586 100644
--- a/polaris.shopify.com/pages/examples/stack-where-items-fill-space-evenly.tsx
+++ b/polaris.shopify.com/app/examples/stack-where-items-fill-space-evenly/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Stack, Badge, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function StackExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/tabs-default.tsx b/polaris.shopify.com/app/examples/tabs-default/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/tabs-default.tsx
rename to polaris.shopify.com/app/examples/tabs-default/page.tsx
index 77d9a18d137..05726dbbaaa 100644
--- a/polaris.shopify.com/pages/examples/tabs-default.tsx
+++ b/polaris.shopify.com/app/examples/tabs-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, Tabs} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TabsExample() {
   const [selected, setSelected] = useState(0);
diff --git a/polaris.shopify.com/pages/examples/tabs-fitted.tsx b/polaris.shopify.com/app/examples/tabs-fitted/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/tabs-fitted.tsx
rename to polaris.shopify.com/app/examples/tabs-fitted/page.tsx
index 7a116db2a68..61971467589 100644
--- a/polaris.shopify.com/pages/examples/tabs-fitted.tsx
+++ b/polaris.shopify.com/app/examples/tabs-fitted/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, Tabs} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function FittedTabsExample() {
   const [selected, setSelected] = useState(0);
diff --git a/polaris.shopify.com/pages/examples/tabs-with-badge-content.tsx b/polaris.shopify.com/app/examples/tabs-with-badge-content/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/tabs-with-badge-content.tsx
rename to polaris.shopify.com/app/examples/tabs-with-badge-content/page.tsx
index c8171899dfa..550afa7441d 100644
--- a/polaris.shopify.com/pages/examples/tabs-with-badge-content.tsx
+++ b/polaris.shopify.com/app/examples/tabs-with-badge-content/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Badge, LegacyCard, Tabs} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TabsWithBadgeExample() {
   const [selected, setSelected] = useState(0);
diff --git a/polaris.shopify.com/pages/examples/tabs-with-custom-disclosure.tsx b/polaris.shopify.com/app/examples/tabs-with-custom-disclosure/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/tabs-with-custom-disclosure.tsx
rename to polaris.shopify.com/app/examples/tabs-with-custom-disclosure/page.tsx
index 5869b85bb34..0a7aac5bf18 100644
--- a/polaris.shopify.com/pages/examples/tabs-with-custom-disclosure.tsx
+++ b/polaris.shopify.com/app/examples/tabs-with-custom-disclosure/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyCard, Tabs} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TabsWithCustomDisclosureExample() {
   const [selected, setSelected] = useState(0);
diff --git a/polaris.shopify.com/pages/examples/tag-clickable.tsx b/polaris.shopify.com/app/examples/tag-clickable/page.tsx
similarity index 68%
rename from polaris.shopify.com/pages/examples/tag-clickable.tsx
rename to polaris.shopify.com/app/examples/tag-clickable/page.tsx
index d75e3e5c78c..7a43a18107f 100644
--- a/polaris.shopify.com/pages/examples/tag-clickable.tsx
+++ b/polaris.shopify.com/app/examples/tag-clickable/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Tag} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TagExample() {
   return <Tag onClick={() => console.log('Clicked')}>Wholesale</Tag>;
diff --git a/polaris.shopify.com/pages/examples/tag-default.tsx b/polaris.shopify.com/app/examples/tag-default/page.tsx
similarity index 63%
rename from polaris.shopify.com/pages/examples/tag-default.tsx
rename to polaris.shopify.com/app/examples/tag-default/page.tsx
index c4d506ca426..8e88373715f 100644
--- a/polaris.shopify.com/pages/examples/tag-default.tsx
+++ b/polaris.shopify.com/app/examples/tag-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Tag} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TagExample() {
   return <Tag>Wholesale</Tag>;
diff --git a/polaris.shopify.com/pages/examples/tag-removable-with-link.tsx b/polaris.shopify.com/app/examples/tag-removable-with-link/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/tag-removable-with-link.tsx
rename to polaris.shopify.com/app/examples/tag-removable-with-link/page.tsx
index 6a7d06e5f9e..fd4221e5f5d 100644
--- a/polaris.shopify.com/pages/examples/tag-removable-with-link.tsx
+++ b/polaris.shopify.com/app/examples/tag-removable-with-link/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Tag, LegacyStack} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function RemovableTagWithLinkExample() {
   const [selectedTags, setSelectedTags] = useState([
diff --git a/polaris.shopify.com/pages/examples/tag-removable.tsx b/polaris.shopify.com/app/examples/tag-removable/page.tsx
similarity index 93%
rename from polaris.shopify.com/pages/examples/tag-removable.tsx
rename to polaris.shopify.com/app/examples/tag-removable/page.tsx
index a6e883cd77e..ad0e5e0dc56 100644
--- a/polaris.shopify.com/pages/examples/tag-removable.tsx
+++ b/polaris.shopify.com/app/examples/tag-removable/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Tag, LegacyStack} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function RemovableTagExample() {
   const [selectedTags, setSelectedTags] = useState([
diff --git a/polaris.shopify.com/pages/examples/tag-with-custom-content.tsx b/polaris.shopify.com/app/examples/tag-with-custom-content/page.tsx
similarity index 79%
rename from polaris.shopify.com/pages/examples/tag-with-custom-content.tsx
rename to polaris.shopify.com/app/examples/tag-with-custom-content/page.tsx
index e3e85afa8bb..cc36b322b9e 100644
--- a/polaris.shopify.com/pages/examples/tag-with-custom-content.tsx
+++ b/polaris.shopify.com/app/examples/tag-with-custom-content/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Tag, LegacyStack, Icon} from '@shopify/polaris';
 import {WandMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TagExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/tag-with-link.tsx b/polaris.shopify.com/app/examples/tag-with-link/page.tsx
similarity index 64%
rename from polaris.shopify.com/pages/examples/tag-with-link.tsx
rename to polaris.shopify.com/app/examples/tag-with-link/page.tsx
index d93bc1b88d3..cab80f313e6 100644
--- a/polaris.shopify.com/pages/examples/tag-with-link.tsx
+++ b/polaris.shopify.com/app/examples/tag-with-link/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Tag} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TagExample() {
   return <Tag url="#">Wholesale</Tag>;
diff --git a/polaris.shopify.com/pages/examples/text-align.tsx b/polaris.shopify.com/app/examples/text-align/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/text-align.tsx
rename to polaris.shopify.com/app/examples/text-align/page.tsx
index 76cd1511844..79e3666c638 100644
--- a/polaris.shopify.com/pages/examples/text-align.tsx
+++ b/polaris.shopify.com/app/examples/text-align/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Text, LegacyStack} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/text-body.tsx b/polaris.shopify.com/app/examples/text-body/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/text-body.tsx
rename to polaris.shopify.com/app/examples/text-body/page.tsx
index d2387094260..c60af4b6aac 100644
--- a/polaris.shopify.com/pages/examples/text-body.tsx
+++ b/polaris.shopify.com/app/examples/text-body/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Text, LegacyStack} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/text-color.tsx b/polaris.shopify.com/app/examples/text-color/page.tsx
similarity index 91%
rename from polaris.shopify.com/pages/examples/text-color.tsx
rename to polaris.shopify.com/app/examples/text-color/page.tsx
index 85e1e474bb4..da7646ce327 100644
--- a/polaris.shopify.com/pages/examples/text-color.tsx
+++ b/polaris.shopify.com/app/examples/text-color/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Text, LegacyStack} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/text-container-default.tsx b/polaris.shopify.com/app/examples/text-container-default/page.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/text-container-default.tsx
rename to polaris.shopify.com/app/examples/text-container-default/page.tsx
index 43c04f43484..e210ec0c56b 100644
--- a/polaris.shopify.com/pages/examples/text-container-default.tsx
+++ b/polaris.shopify.com/app/examples/text-container-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextContainer, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextContainerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/text-container-loose.tsx b/polaris.shopify.com/app/examples/text-container-loose/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/text-container-loose.tsx
rename to polaris.shopify.com/app/examples/text-container-loose/page.tsx
index f53a0ccd218..51d72c14f0f 100644
--- a/polaris.shopify.com/pages/examples/text-container-loose.tsx
+++ b/polaris.shopify.com/app/examples/text-container-loose/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextContainer} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextContainerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/text-container-tight.tsx b/polaris.shopify.com/app/examples/text-container-tight/page.tsx
similarity index 83%
rename from polaris.shopify.com/pages/examples/text-container-tight.tsx
rename to polaris.shopify.com/app/examples/text-container-tight/page.tsx
index 2a47be251a9..ad79a80cc0d 100644
--- a/polaris.shopify.com/pages/examples/text-container-tight.tsx
+++ b/polaris.shopify.com/app/examples/text-container-tight/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextContainer, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextContainerExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/text-field-default.tsx b/polaris.shopify.com/app/examples/text-field-default/page.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/text-field-default.tsx
rename to polaris.shopify.com/app/examples/text-field-default/page.tsx
index b0e8c2ef688..ccc8d4413ad 100644
--- a/polaris.shopify.com/pages/examples/text-field-default.tsx
+++ b/polaris.shopify.com/app/examples/text-field-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextFieldExample() {
   const [value, setValue] = useState('Jaded Pixel');
diff --git a/polaris.shopify.com/pages/examples/text-field-disabled.tsx b/polaris.shopify.com/app/examples/text-field-disabled/page.tsx
similarity index 70%
rename from polaris.shopify.com/pages/examples/text-field-disabled.tsx
rename to polaris.shopify.com/app/examples/text-field-disabled/page.tsx
index deb00fe8873..9b737ee6dbd 100644
--- a/polaris.shopify.com/pages/examples/text-field-disabled.tsx
+++ b/polaris.shopify.com/app/examples/text-field-disabled/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextFieldExample() {
   return <TextField label="Store name" disabled autoComplete="off" />;
diff --git a/polaris.shopify.com/pages/examples/text-field-email.tsx b/polaris.shopify.com/app/examples/text-field-email/page.tsx
similarity index 83%
rename from polaris.shopify.com/pages/examples/text-field-email.tsx
rename to polaris.shopify.com/app/examples/text-field-email/page.tsx
index b69de4165db..9c94f24126f 100644
--- a/polaris.shopify.com/pages/examples/text-field-email.tsx
+++ b/polaris.shopify.com/app/examples/text-field-email/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function EmailFieldExample() {
   const [value, setValue] = useState('bernadette.lapresse@jadedpixel.com');
diff --git a/polaris.shopify.com/pages/examples/text-field-multiline.tsx b/polaris.shopify.com/app/examples/text-field-multiline/page.tsx
similarity index 83%
rename from polaris.shopify.com/pages/examples/text-field-multiline.tsx
rename to polaris.shopify.com/app/examples/text-field-multiline/page.tsx
index a8fe0774cdc..8ad9276d5db 100644
--- a/polaris.shopify.com/pages/examples/text-field-multiline.tsx
+++ b/polaris.shopify.com/app/examples/text-field-multiline/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MultilineFieldExample() {
   const [value, setValue] = useState('1776 Barnes Street\nOrlando, FL 32801');
diff --git a/polaris.shopify.com/pages/examples/text-field-number.tsx b/polaris.shopify.com/app/examples/text-field-number/page.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/text-field-number.tsx
rename to polaris.shopify.com/app/examples/text-field-number/page.tsx
index ace2651cc2d..1674b6da073 100644
--- a/polaris.shopify.com/pages/examples/text-field-number.tsx
+++ b/polaris.shopify.com/app/examples/text-field-number/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function NumberFieldExample() {
   const [value, setValue] = useState('1');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-character-count.tsx b/polaris.shopify.com/app/examples/text-field-with-character-count/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/text-field-with-character-count.tsx
rename to polaris.shopify.com/app/examples/text-field-with-character-count/page.tsx
index 5b304f64eae..c97dcea0f95 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-character-count.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-character-count/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextFieldWithCharacterCountExample() {
   const [textFieldValue, setTextFieldValue] = useState('Jaded Pixel');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-clear-button.tsx b/polaris.shopify.com/app/examples/text-field-with-clear-button/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/text-field-with-clear-button.tsx
rename to polaris.shopify.com/app/examples/text-field-with-clear-button/page.tsx
index 9d4702b7d80..83fe61e7514 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-clear-button.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-clear-button/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextFieldWithClearButtonExample() {
   const [textFieldValue, setTextFieldValue] = useState('Jaded Pixel');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-connected-fields.tsx b/polaris.shopify.com/app/examples/text-field-with-connected-fields/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/text-field-with-connected-fields.tsx
rename to polaris.shopify.com/app/examples/text-field-with-connected-fields/page.tsx
index 3d1bc2747ca..de17faacfc0 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-connected-fields.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-connected-fields/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField, Select, Button} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ConnectedFieldsExample() {
   const [textFieldValue, setTextFieldValue] = useState('10.6');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-help-text.tsx b/polaris.shopify.com/app/examples/text-field-with-help-text/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/text-field-with-help-text.tsx
rename to polaris.shopify.com/app/examples/text-field-with-help-text/page.tsx
index f0d8670519b..518466c0513 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-help-text.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-help-text/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function HelpTextExample() {
   const [textFieldValue, setTextFieldValue] = useState(
diff --git a/polaris.shopify.com/pages/examples/text-field-with-hidden-label.tsx b/polaris.shopify.com/app/examples/text-field-with-hidden-label/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/text-field-with-hidden-label.tsx
rename to polaris.shopify.com/app/examples/text-field-with-hidden-label/page.tsx
index 3a86e4216b5..9781245d5f7 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-hidden-label.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-hidden-label/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {FormLayout, ChoiceList, TextField, Select} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function HiddenLabelExample() {
   const [value, setValue] = useState('12');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-inline-suggestion.tsx b/polaris.shopify.com/app/examples/text-field-with-inline-suggestion/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/text-field-with-inline-suggestion.tsx
rename to polaris.shopify.com/app/examples/text-field-with-inline-suggestion/page.tsx
index d836fcd72aa..6bfc594f114 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-inline-suggestion.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-inline-suggestion/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useEffect, useCallback, useMemo} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextFieldWithSuggestionExample() {
   const suggestions = useMemo(
diff --git a/polaris.shopify.com/pages/examples/text-field-with-label-action.tsx b/polaris.shopify.com/app/examples/text-field-with-label-action/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/text-field-with-label-action.tsx
rename to polaris.shopify.com/app/examples/text-field-with-label-action/page.tsx
index c7e63510a2d..c43e1d6e09b 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-label-action.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-label-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function LabelActionExample() {
   const [textFieldValue, setTextFieldValue] = useState('6201.11.0000');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-monospaced-font.tsx b/polaris.shopify.com/app/examples/text-field-with-monospaced-font/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/text-field-with-monospaced-font.tsx
rename to polaris.shopify.com/app/examples/text-field-with-monospaced-font/page.tsx
index 785b4f177b6..b99915a5893 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-monospaced-font.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-monospaced-font/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextFieldWithMonospacedFontExample() {
   const [textFieldValue, setTextFieldValue] = useState('Jaded Pixel');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-placeholder-text.tsx b/polaris.shopify.com/app/examples/text-field-with-placeholder-text/page.tsx
similarity index 85%
rename from polaris.shopify.com/pages/examples/text-field-with-placeholder-text.tsx
rename to polaris.shopify.com/app/examples/text-field-with-placeholder-text/page.tsx
index f21844b08bf..f84295f43fb 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-placeholder-text.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-placeholder-text/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PlaceholderExample() {
   const [textFieldValue, setTextFieldValue] = useState('');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-prefix-or-suffix.tsx b/polaris.shopify.com/app/examples/text-field-with-prefix-or-suffix/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/text-field-with-prefix-or-suffix.tsx
rename to polaris.shopify.com/app/examples/text-field-with-prefix-or-suffix/page.tsx
index 1321b9bc33c..42e44b6ad2f 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-prefix-or-suffix.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-prefix-or-suffix/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function PrefixExample() {
   const [textFieldValue, setTextFieldValue] = useState('2.00');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-right-aligned-text.tsx b/polaris.shopify.com/app/examples/text-field-with-right-aligned-text/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/text-field-with-right-aligned-text.tsx
rename to polaris.shopify.com/app/examples/text-field-with-right-aligned-text/page.tsx
index c17289046d6..d3abfb5c77d 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-right-aligned-text.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-right-aligned-text/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function RightAlignExample() {
   const [textFieldValue, setTextFieldValue] = useState('1');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-separate-validation-error.tsx b/polaris.shopify.com/app/examples/text-field-with-separate-validation-error/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/text-field-with-separate-validation-error.tsx
rename to polaris.shopify.com/app/examples/text-field-with-separate-validation-error/page.tsx
index 09804b37690..e035d3166b7 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-separate-validation-error.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-separate-validation-error/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LegacyStack,
   FormLayout,
@@ -9,7 +11,7 @@ import {
 } from '@shopify/polaris';
 import {DeleteMinor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function SeparateValidationErrorExample() {
   const [textFieldValue, setTextFieldValue] = useState('');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-validation-error.tsx b/polaris.shopify.com/app/examples/text-field-with-validation-error/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/text-field-with-validation-error.tsx
rename to polaris.shopify.com/app/examples/text-field-with-validation-error/page.tsx
index 5d818d9d156..d161c4c7008 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-validation-error.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-validation-error/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ValidationErrorExample() {
   const [textFieldValue, setTextFieldValue] = useState('');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-value-selected-on-focus.tsx b/polaris.shopify.com/app/examples/text-field-with-value-selected-on-focus/page.tsx
similarity index 84%
rename from polaris.shopify.com/pages/examples/text-field-with-value-selected-on-focus.tsx
rename to polaris.shopify.com/app/examples/text-field-with-value-selected-on-focus/page.tsx
index 7221367db18..552038ececf 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-value-selected-on-focus.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-value-selected-on-focus/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextFieldWithSelectTextOnFocusExample() {
   const [textFieldValue, setTextFieldValue] = useState('Jaded Pixel');
diff --git a/polaris.shopify.com/pages/examples/text-field-with-vertical-content.tsx b/polaris.shopify.com/app/examples/text-field-with-vertical-content/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/text-field-with-vertical-content.tsx
rename to polaris.shopify.com/app/examples/text-field-with-vertical-content/page.tsx
index f5ab9117aef..bf01af8f669 100644
--- a/polaris.shopify.com/pages/examples/text-field-with-vertical-content.tsx
+++ b/polaris.shopify.com/app/examples/text-field-with-vertical-content/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {LegacyStack, Tag, TextField} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function VerticalContentExample() {
   const tags = ['Rustic', 'Antique', 'Vinyl', 'Refurbished'];
diff --git a/polaris.shopify.com/pages/examples/text-heading.tsx b/polaris.shopify.com/app/examples/text-heading/page.tsx
similarity index 90%
rename from polaris.shopify.com/pages/examples/text-heading.tsx
rename to polaris.shopify.com/app/examples/text-heading/page.tsx
index 7dce868a493..5f38f591283 100644
--- a/polaris.shopify.com/pages/examples/text-heading.tsx
+++ b/polaris.shopify.com/app/examples/text-heading/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Text, LegacyStack} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/text-weight.tsx b/polaris.shopify.com/app/examples/text-weight/page.tsx
similarity index 86%
rename from polaris.shopify.com/pages/examples/text-weight.tsx
rename to polaris.shopify.com/app/examples/text-weight/page.tsx
index 4f3653092c5..db0ff67d1a7 100644
--- a/polaris.shopify.com/pages/examples/text-weight.tsx
+++ b/polaris.shopify.com/app/examples/text-weight/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Text, LegacyStack} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TextExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/thumbnail-default.tsx b/polaris.shopify.com/app/examples/thumbnail-default/page.tsx
similarity index 76%
rename from polaris.shopify.com/pages/examples/thumbnail-default.tsx
rename to polaris.shopify.com/app/examples/thumbnail-default/page.tsx
index e93b90d3d4e..8eab4e9debf 100644
--- a/polaris.shopify.com/pages/examples/thumbnail-default.tsx
+++ b/polaris.shopify.com/app/examples/thumbnail-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Thumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ThumbnailExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/thumbnail-extra-small.tsx b/polaris.shopify.com/app/examples/thumbnail-extra-small/page.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/thumbnail-extra-small.tsx
rename to polaris.shopify.com/app/examples/thumbnail-extra-small/page.tsx
index 2dcc914ffd6..6f90de60c59 100644
--- a/polaris.shopify.com/pages/examples/thumbnail-extra-small.tsx
+++ b/polaris.shopify.com/app/examples/thumbnail-extra-small/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Thumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ThumbnailExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/thumbnail-large.tsx b/polaris.shopify.com/app/examples/thumbnail-large/page.tsx
similarity index 77%
rename from polaris.shopify.com/pages/examples/thumbnail-large.tsx
rename to polaris.shopify.com/app/examples/thumbnail-large/page.tsx
index 5c56fcac55f..f4c6e0556f5 100644
--- a/polaris.shopify.com/pages/examples/thumbnail-large.tsx
+++ b/polaris.shopify.com/app/examples/thumbnail-large/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Thumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ThumbnailExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/thumbnail-small.tsx b/polaris.shopify.com/app/examples/thumbnail-small/page.tsx
similarity index 77%
rename from polaris.shopify.com/pages/examples/thumbnail-small.tsx
rename to polaris.shopify.com/app/examples/thumbnail-small/page.tsx
index 98589eaeecb..b63153be7b6 100644
--- a/polaris.shopify.com/pages/examples/thumbnail-small.tsx
+++ b/polaris.shopify.com/app/examples/thumbnail-small/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Thumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ThumbnailExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/thumbnail-with-component-source.tsx b/polaris.shopify.com/app/examples/thumbnail-with-component-source/page.tsx
similarity index 74%
rename from polaris.shopify.com/pages/examples/thumbnail-with-component-source.tsx
rename to polaris.shopify.com/app/examples/thumbnail-with-component-source/page.tsx
index 08ab504a449..2fbfecfae53 100644
--- a/polaris.shopify.com/pages/examples/thumbnail-with-component-source.tsx
+++ b/polaris.shopify.com/app/examples/thumbnail-with-component-source/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {Thumbnail} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ThumbnailExample() {
   return <Thumbnail source={NoteMinor} size="large" alt="Small document" />;
diff --git a/polaris.shopify.com/pages/examples/toast-default.tsx b/polaris.shopify.com/app/examples/toast-default/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/toast-default.tsx
rename to polaris.shopify.com/app/examples/toast-default/page.tsx
index 4725edb94f6..0567c77bb00 100644
--- a/polaris.shopify.com/pages/examples/toast-default.tsx
+++ b/polaris.shopify.com/app/examples/toast-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Toast, Frame, Page, Button} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ToastExample() {
   const [active, setActive] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/toast-error.tsx b/polaris.shopify.com/app/examples/toast-error/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/toast-error.tsx
rename to polaris.shopify.com/app/examples/toast-error/page.tsx
index 56ddc068b4b..5c91952acfc 100644
--- a/polaris.shopify.com/pages/examples/toast-error.tsx
+++ b/polaris.shopify.com/app/examples/toast-error/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Toast, Frame, Page, Button} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ErrorToastExample() {
   const [active, setActive] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/toast-multiple-messages.tsx b/polaris.shopify.com/app/examples/toast-multiple-messages/page.tsx
similarity index 92%
rename from polaris.shopify.com/pages/examples/toast-multiple-messages.tsx
rename to polaris.shopify.com/app/examples/toast-multiple-messages/page.tsx
index d732fb331d3..198ab6e925c 100644
--- a/polaris.shopify.com/pages/examples/toast-multiple-messages.tsx
+++ b/polaris.shopify.com/app/examples/toast-multiple-messages/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Toast, Frame, Page, ButtonGroup, Button} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function MultipleToastExample() {
   const [activeOne, setActiveOne] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/toast-with-action.tsx b/polaris.shopify.com/app/examples/toast-with-action/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/toast-with-action.tsx
rename to polaris.shopify.com/app/examples/toast-with-action/page.tsx
index 73e7e9b3b06..104a347d1cb 100644
--- a/polaris.shopify.com/pages/examples/toast-with-action.tsx
+++ b/polaris.shopify.com/app/examples/toast-with-action/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Toast, Frame, Page, Button} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ToastWithActionExample() {
   const [active, setActive] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/toast-with-custom-duration.tsx b/polaris.shopify.com/app/examples/toast-with-custom-duration/page.tsx
similarity index 87%
rename from polaris.shopify.com/pages/examples/toast-with-custom-duration.tsx
rename to polaris.shopify.com/app/examples/toast-with-custom-duration/page.tsx
index 581a7c7f437..fa36709a3c4 100644
--- a/polaris.shopify.com/pages/examples/toast-with-custom-duration.tsx
+++ b/polaris.shopify.com/app/examples/toast-with-custom-duration/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Toast, Frame, Page, Button} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function ToastWithCustomDurationExample() {
   const [active, setActive] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/tooltip-default.tsx b/polaris.shopify.com/app/examples/tooltip-default/page.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/tooltip-default.tsx
rename to polaris.shopify.com/app/examples/tooltip-default/page.tsx
index 21d500dc8eb..312681353ee 100644
--- a/polaris.shopify.com/pages/examples/tooltip-default.tsx
+++ b/polaris.shopify.com/app/examples/tooltip-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Tooltip, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TooltipExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/tooltip-visible-only-with-child-interaction.tsx b/polaris.shopify.com/app/examples/tooltip-visible-only-with-child-interaction/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/tooltip-visible-only-with-child-interaction.tsx
rename to polaris.shopify.com/app/examples/tooltip-visible-only-with-child-interaction/page.tsx
index 383fe6ec457..3130f4c6f5b 100644
--- a/polaris.shopify.com/pages/examples/tooltip-visible-only-with-child-interaction.tsx
+++ b/polaris.shopify.com/app/examples/tooltip-visible-only-with-child-interaction/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {ButtonGroup, Tooltip, Button, TextField} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TooltipExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/tooltip-with-suffix.tsx b/polaris.shopify.com/app/examples/tooltip-with-suffix/page.tsx
similarity index 83%
rename from polaris.shopify.com/pages/examples/tooltip-with-suffix.tsx
rename to polaris.shopify.com/app/examples/tooltip-with-suffix/page.tsx
index af7cca586d8..391d466d2df 100644
--- a/polaris.shopify.com/pages/examples/tooltip-with-suffix.tsx
+++ b/polaris.shopify.com/app/examples/tooltip-with-suffix/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {Tooltip, Button, Inline, Text} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TooltipExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/top-bar-default.tsx b/polaris.shopify.com/app/examples/top-bar-default/page.tsx
similarity index 96%
rename from polaris.shopify.com/pages/examples/top-bar-default.tsx
rename to polaris.shopify.com/app/examples/top-bar-default/page.tsx
index 47d400ca48e..ea0ed222aad 100644
--- a/polaris.shopify.com/pages/examples/top-bar-default.tsx
+++ b/polaris.shopify.com/app/examples/top-bar-default/page.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import {TopBar, ActionList, Icon, Frame, Text} from '@shopify/polaris';
 import {ArrowLeftMinor, QuestionMarkMajor} from '@shopify/polaris-icons';
 import {useState, useCallback} from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function TopBarExample() {
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
diff --git a/polaris.shopify.com/pages/examples/video-thumbnail-default.tsx b/polaris.shopify.com/app/examples/video-thumbnail-default/page.tsx
similarity index 88%
rename from polaris.shopify.com/pages/examples/video-thumbnail-default.tsx
rename to polaris.shopify.com/app/examples/video-thumbnail-default/page.tsx
index 3c871f6dd6a..678b3b95dce 100644
--- a/polaris.shopify.com/pages/examples/video-thumbnail-default.tsx
+++ b/polaris.shopify.com/app/examples/video-thumbnail-default/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {MediaCard, VideoThumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function VideoThumbnailExample() {
   return (
diff --git a/polaris.shopify.com/pages/examples/video-thumbnail-with-progress.tsx b/polaris.shopify.com/app/examples/video-thumbnail-with-progress/page.tsx
similarity index 89%
rename from polaris.shopify.com/pages/examples/video-thumbnail-with-progress.tsx
rename to polaris.shopify.com/app/examples/video-thumbnail-with-progress/page.tsx
index 631ed7f6a01..77db503c128 100644
--- a/polaris.shopify.com/pages/examples/video-thumbnail-with-progress.tsx
+++ b/polaris.shopify.com/app/examples/video-thumbnail-with-progress/page.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import {MediaCard, VideoThumbnail} from '@shopify/polaris';
 import React from 'react';
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {withPolarisExample} from '../../../src/components/PolarisExampleWrapper';
 
 function VideoThumbnailExample() {
   return (
diff --git a/polaris.shopify.com/app/layout.tsx b/polaris.shopify.com/app/layout.tsx
new file mode 100644
index 00000000000..afe6b77331f
--- /dev/null
+++ b/polaris.shopify.com/app/layout.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+export default function RootLayout({children}: {children: React.ReactNode}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js
index ad5dd4c667e..420b44ba455 100644
--- a/polaris.shopify.com/next.config.js
+++ b/polaris.shopify.com/next.config.js
@@ -13,6 +13,7 @@ const nextConfig = {
     scrollRestoration: true,
     // this includes files from the monorepo base one directory up
     outputFileTracingRoot: path.join(__dirname, '../'),
+    appDir: true,
   },
   async rewrites() {
     return [
diff --git a/polaris.shopify.com/pages/_app.tsx b/polaris.shopify.com/pages/_app.tsx
index b3e34be9754..481d191fbf2 100644
--- a/polaris.shopify.com/pages/_app.tsx
+++ b/polaris.shopify.com/pages/_app.tsx
@@ -4,7 +4,6 @@ import Script from 'next/script';
 import {useEffect} from 'react';
 import {useRouter} from 'next/router';
 import useDarkMode from 'use-dark-mode';
-import '@shopify/polaris/build/esm/styles.css';
 
 import {className} from '../src/utils/various';
 import Frame from '../src/components/Frame';
diff --git a/polaris.shopify.com/pages/components/[group]/[component]/index.tsx b/polaris.shopify.com/pages/components/[group]/[component]/index.tsx
index 441904eca3f..42e7d992603 100644
--- a/polaris.shopify.com/pages/components/[group]/[component]/index.tsx
+++ b/polaris.shopify.com/pages/components/[group]/[component]/index.tsx
@@ -105,7 +105,7 @@ export const getStaticProps: GetStaticProps<
       (example: ComponentExample) => {
         const examplePath = path.resolve(
           process.cwd(),
-          `pages/examples/${example.fileName}`,
+          `app/examples/${example.fileName.replace('.tsx', '')}/page.tsx`,
         );
         let code = '';
 
@@ -117,6 +117,8 @@ export const getStaticProps: GetStaticProps<
             .join('\n');
         }
 
+        code = code.replace("'use client';\n\n", '');
+
         return {...example, code};
       },
     );
diff --git a/polaris.shopify.com/scripts/fix-examples.mjs b/polaris.shopify.com/scripts/fix-examples.mjs
new file mode 100644
index 00000000000..08d73b2b228
--- /dev/null
+++ b/polaris.shopify.com/scripts/fix-examples.mjs
@@ -0,0 +1,18 @@
+import path from 'path';
+import fs from 'fs';
+import globby from 'globby';
+
+const pathGlob = path.join(process.cwd(), 'app/examples/**/page.tsx');
+const filePaths = globby.sync(pathGlob);
+
+filePaths.forEach((filePath) => {
+  let fileContent = fs.readFileSync(filePath, 'utf-8');
+  if (!fileContent.includes('use client')) {
+    fileContent = `'use client';\n\n${fileContent}`;
+  }
+  fileContent = fileContent.replace(
+    "{withPolarisExample} from '../../src",
+    "{withPolarisExample} from '../../../src",
+  );
+  fs.writeFileSync(filePath, fileContent, 'utf-8');
+});
diff --git a/polaris.shopify.com/scripts/move-examples.mjs b/polaris.shopify.com/scripts/move-examples.mjs
new file mode 100644
index 00000000000..6e8fdd47154
--- /dev/null
+++ b/polaris.shopify.com/scripts/move-examples.mjs
@@ -0,0 +1,19 @@
+import path from 'path';
+import fs from 'fs';
+import globby from 'globby';
+
+const pathGlob = path.join(process.cwd(), 'pages/examples/*.tsx');
+
+const filePaths = globby.sync(pathGlob);
+
+filePaths.forEach((filePath) => {
+  const segments = filePath.split('/');
+  const dir = `app/examples/${segments[segments.length - 1].replace(
+    '.tsx',
+    '',
+  )}`;
+  console.log({dir});
+  fs.mkdirSync(dir);
+  const newPath = `${dir}/page.tsx`;
+  fs.copyFileSync(filePath, newPath);
+});
diff --git a/polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss b/polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss
index 5c95072c9b2..31962844aaa 100644
--- a/polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss
+++ b/polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss
@@ -1,17 +1,19 @@
 .Banner {
   border-radius: var(--border-radius-700);
   background-color: var(--surface-subdued);
-  box-shadow: var(--p-shadow-card);
+  box-shadow: var(--shadow-card);
   display: flex;
-  align-items: center;
-  gap: var(--p-space-6);
-  padding: var(--p-space-5) var(--p-space-6);
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.5rem;
+
   & > svg {
     flex-shrink: 0;
     fill: var(--p-icon-highlight);
     /* Undo these overly perscriptive styles from Polaris Icons */
     filter: none;
     opacity: 1;
+    margin-top: 0.33rem;
   }
   & > p {
     margin: 0;
diff --git a/polaris.shopify.com/tsconfig.json b/polaris.shopify.com/tsconfig.json
index 356f7512c1a..50ed27fc6ba 100644
--- a/polaris.shopify.com/tsconfig.json
+++ b/polaris.shopify.com/tsconfig.json
@@ -18,16 +18,23 @@
     "jsx": "preserve",
     "composite": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true
+    "noUnusedParameters": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
     "src",
     "pages",
+    "app",
     ".cache/*.json",
     "**/*.json",
     "next-env.d.ts",
     "scripts/get-props/src/get-props.ts",
-    "constants.js"
+    "constants.js",
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules",

From 6b7067e7f089224db7e296406950acdae54ee4d4 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 14:55:22 +0100
Subject: [PATCH 02/15] Add changeset

---
 .changeset/tough-nails-thank.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tough-nails-thank.md

diff --git a/.changeset/tough-nails-thank.md b/.changeset/tough-nails-thank.md
new file mode 100644
index 00000000000..e11a4d730d5
--- /dev/null
+++ b/.changeset/tough-nails-thank.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Move code examples to examples the app directory to avoid conflicting stylesheets on the website

From 0bf1629498fe2cffa3e96aa0491c534dc143b28f Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 14:56:12 +0100
Subject: [PATCH 03/15] Fix website styles that rely on on --p- values

---
 .../pages/components/[group]/index.tsx               |  2 +-
 polaris.shopify.com/src/components/Grid/Grid.tsx     | 12 +++++++++---
 .../PatternsExample/PatternsExample.module.scss      |  2 +-
 .../components/PatternsPage/PatternsPage.module.scss |  4 ++--
 .../src/components/Stack/Stack.module.scss           |  2 +-
 polaris.shopify.com/src/components/Stack/index.tsx   |  2 +-
 6 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/polaris.shopify.com/pages/components/[group]/index.tsx b/polaris.shopify.com/pages/components/[group]/index.tsx
index 86c39b443b6..883ee795933 100644
--- a/polaris.shopify.com/pages/components/[group]/index.tsx
+++ b/polaris.shopify.com/pages/components/[group]/index.tsx
@@ -110,7 +110,7 @@ export default function GroupPage({
             {relatedResources.map((resource) => (
               <li
                 key={resource}
-                style={{listStyle: 'initial', marginLeft: 'var(--p-space-4)'}}
+                style={{listStyle: 'initial', marginLeft: '.5rem'}}
               >
                 <Markdown>{resource}</Markdown>
               </li>
diff --git a/polaris.shopify.com/src/components/Grid/Grid.tsx b/polaris.shopify.com/src/components/Grid/Grid.tsx
index 48d18d426d5..6d5059e0798 100644
--- a/polaris.shopify.com/src/components/Grid/Grid.tsx
+++ b/polaris.shopify.com/src/components/Grid/Grid.tsx
@@ -44,11 +44,17 @@ export const Grid = forwardRef(
       style={{
         // @ts-expect-error The types for `style` don't support css vars
         '--props-grid-gap':
-          typeof gap !== 'undefined' ? `var(--p-space-${gap})` : undefined,
+          typeof gap !== 'undefined'
+            ? `${0.25 * parseFloat(gap)}rem)`
+            : undefined,
         '--props-grid-gap-x':
-          typeof gapX !== 'undefined' ? `var(--p-space-${gapX})` : undefined,
+          typeof gapX !== 'undefined'
+            ? `${0.25 * parseFloat(gapX)}rem)`
+            : undefined,
         '--props-grid-gap-y':
-          typeof gapY !== 'undefined' ? `var(--p-space-${gapY})` : undefined,
+          typeof gapY !== 'undefined'
+            ? `${0.25 * parseFloat(gapY)}rem)`
+            : undefined,
         '--props-grid-item-min-width': itemMinWidth,
       }}
       className={[styles.Grid, condensed && styles.condensed, className]}
diff --git a/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss b/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss
index 6e875d56adb..91bd6a90899 100644
--- a/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss
+++ b/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss
@@ -10,7 +10,7 @@
 .SpecificityBuster {
   .ExampleWrapper {
     box-shadow: none;
-    border: 1px solid var(--p-border-subdued);
+    border: 1px solid var(--border-color);
     @media screen and (max-width: $breakpointMobile) {
       border-left: 0;
       border-right: 0;
diff --git a/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss b/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss
index e09d52445d6..24442b70233 100644
--- a/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss
+++ b/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss
@@ -18,7 +18,7 @@
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   overflow: hidden;
-  background: var(--p-surface-neutral-subdued);
+  background: var(--surface-subdued);
   padding: 0 9%;
   display: flex;
   align-items: flex-end;
@@ -27,7 +27,7 @@
 .PreviewInner {
   flex-grow: 1;
   aspect-ratio: inherit;
-  border: 1.4px var(--p-border-subdued);
+  border: 1px var(--border-color);
   border-radius: var(--border-radius-600);
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
diff --git a/polaris.shopify.com/src/components/Stack/Stack.module.scss b/polaris.shopify.com/src/components/Stack/Stack.module.scss
index 646d5939a62..5a0d8bff706 100644
--- a/polaris.shopify.com/src/components/Stack/Stack.module.scss
+++ b/polaris.shopify.com/src/components/Stack/Stack.module.scss
@@ -1,7 +1,7 @@
 .Stack {
   display: flex;
   flex-direction: column;
-  gap: var(--stack-gap-prop, var(--p-space-0));
+  gap: var(--stack-gap-prop, 0);
 }
 
 .Row {
diff --git a/polaris.shopify.com/src/components/Stack/index.tsx b/polaris.shopify.com/src/components/Stack/index.tsx
index d517434cff4..9ad95a3d4ea 100644
--- a/polaris.shopify.com/src/components/Stack/index.tsx
+++ b/polaris.shopify.com/src/components/Stack/index.tsx
@@ -15,7 +15,7 @@ export const Stack = forwardRef(
       style={{
         // @ts-expect-error The types for `style` don't support css vars for
         // some reason
-        '--stack-gap-prop': `var(--p-space-${gap})`,
+        '--stack-gap-prop': `${gap * 0.25}rem`,
         ...style,
       }}
       {...props}

From 915116eadceb53e8017a40f43c2c9f0f6d10b66c Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 14:58:57 +0100
Subject: [PATCH 04/15] Fix design details

---
 .../src/components/Container/Container.module.scss              | 2 +-
 .../src/components/PatternsPage/PatternsPage.module.scss        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/polaris.shopify.com/src/components/Container/Container.module.scss b/polaris.shopify.com/src/components/Container/Container.module.scss
index 223908d3232..c2ba786597e 100644
--- a/polaris.shopify.com/src/components/Container/Container.module.scss
+++ b/polaris.shopify.com/src/components/Container/Container.module.scss
@@ -5,7 +5,7 @@
   margin-left: auto;
   margin-right: auto;
   max-width: $pageMaxWidth;
-  padding: 0 1.5rem;
+  padding: 0 2.5rem;
   // The header is always a fixed height
   // This is added in order to ensure native browser scroll-snap behaviour in our content area
   // Also accounts for the height of the header element.
diff --git a/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss b/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss
index 24442b70233..db8f3681a1c 100644
--- a/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss
+++ b/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss
@@ -6,7 +6,7 @@
   gap: 0.5em;
 }
 .UpdateBanner {
-  width: 50%;
+  width: 60%;
   @media screen and (max-width: $breakpointDesktopSmall) {
     width: 100%;
   }

From f39330101b3be028922e0f539e9cd3deb8ed92ae Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 15:02:27 +0100
Subject: [PATCH 05/15] Remove vscode config

---
 polaris.shopify.com/.vscode/settings.json | 4 ----
 1 file changed, 4 deletions(-)
 delete mode 100644 polaris.shopify.com/.vscode/settings.json

diff --git a/polaris.shopify.com/.vscode/settings.json b/polaris.shopify.com/.vscode/settings.json
deleted file mode 100644
index d0679104bda..00000000000
--- a/polaris.shopify.com/.vscode/settings.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
-}
\ No newline at end of file

From 38c5a5f1fc0aa04806dd2ab8390a42263a5dc393 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 15:25:36 +0100
Subject: [PATCH 06/15] Add VSCode config if VSCode really wants it in here

---
 polaris.shopify.com/.vscode/settings.json | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 polaris.shopify.com/.vscode/settings.json

diff --git a/polaris.shopify.com/.vscode/settings.json b/polaris.shopify.com/.vscode/settings.json
new file mode 100644
index 00000000000..d0679104bda
--- /dev/null
+++ b/polaris.shopify.com/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
\ No newline at end of file

From f9f4486668a8cbd361c0f305c67874860a1b17e6 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 15:25:43 +0100
Subject: [PATCH 07/15] Fix styles that rely on --p- variables

---
 .../PatternPage/PatternPage.module.scss       | 16 ++---
 .../PatternsPage/PatternsPage.module.scss     |  2 +-
 .../ThumbnailPreview.module.scss              |  2 +-
 .../TipBanner/TipBanner.module.scss           | 10 +--
 .../UpdateBanner/UpdateBanner.module.scss     |  2 +-
 polaris.shopify.com/src/styles/globals.scss   | 68 +++++++++----------
 6 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/polaris.shopify.com/src/components/PatternPage/PatternPage.module.scss b/polaris.shopify.com/src/components/PatternPage/PatternPage.module.scss
index 4efa904128a..4b01dc54e20 100644
--- a/polaris.shopify.com/src/components/PatternPage/PatternPage.module.scss
+++ b/polaris.shopify.com/src/components/PatternPage/PatternPage.module.scss
@@ -7,7 +7,7 @@
 }
 
 .TabGroup {
-  --tab-background: var(--p-surface-subdued);
+  --tab-background: var(--surface-subdued);
   --tab-background-pressed: rgba(250, 250, 250, 1);
   --tab-background-hover: rgba(241, 241, 241, 1);
   --tab-border: 1px solid #c9cccf;
@@ -90,7 +90,7 @@
     font-size: var(--font-size-400);
     font-weight: var(--font-weight-500);
     line-height: 1.33;
-    color: var(--p-text-disabled);
+    color: var(--text-subdied);
 
     &[aria-selected='true'] {
       color: var(--text-strong);
@@ -136,14 +136,14 @@
 .HowItHelps {
   .ImageWrapper {
     display: block;
-    border: 1px solid var(--p-border-subdued);
+    border: 1px solid var(--border-color);
     position: relative;
     flex: auto;
     overflow: hidden;
     aspect-ratio: 361.9/180.9;
     width: 100%;
     border-radius: 0.25rem;
-    background: var(--p-surface-depressed);
+    background: var(--surface-subdued);
     > img {
       width: 100%;
       object-fit: fill;
@@ -174,8 +174,8 @@
 
 .UsageGuidelinesGrid {
   display: grid;
-  column-gap: var(--p-space-4);
-  row-gap: var(--p-space-8);
+  column-gap: 1rem;
+  row-gap: 2rem;
 
   --txt-column-width: 35%;
   /*
@@ -205,7 +205,7 @@
 
   @media screen and (max-width: $breakpointMobile) {
     grid-template-columns: 1fr;
-    row-gap: var(--p-space-4);
+    row-gap: 1rem;
   }
 
   .UsageGuidelinesRow {
@@ -215,7 +215,7 @@
   .ImageWrapper {
     aspect-ratio: 485/315;
     position: relative;
-    background: var(--p-surface-depressed);
+    background: var(--surface-subdued);
     display: block;
     overflow: hidden;
     > img {
diff --git a/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss b/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss
index db8f3681a1c..d5ddf7a1747 100644
--- a/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss
+++ b/polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss
@@ -32,6 +32,6 @@
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   overflow: hidden;
-  background: var(--p-surface-subdued);
+  background: var(--surface-subdued);
   box-shadow: 0px 0px 3px 0px rgba(31, 33, 36, 0.24);
 }
diff --git a/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss b/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss
index a48c273d366..548fbbb2a64 100644
--- a/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss
+++ b/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss
@@ -2,6 +2,6 @@
   aspect-ratio: 16/9;
   border-radius: var(--border-radius-600);
   overflow: hidden;
-  background: var(--p-surface-neutral-subdued);
+  background: var(--surface-subdued);
   position: relative;
 }
diff --git a/polaris.shopify.com/src/components/TipBanner/TipBanner.module.scss b/polaris.shopify.com/src/components/TipBanner/TipBanner.module.scss
index 44b05db25b1..a19413c01f0 100644
--- a/polaris.shopify.com/src/components/TipBanner/TipBanner.module.scss
+++ b/polaris.shopify.com/src/components/TipBanner/TipBanner.module.scss
@@ -1,8 +1,8 @@
 .TipBanner {
-  padding: var(--p-space-4) var(--p-space-6);
-  background: var(--p-surface-highlight-subdued);
-  border-radius: var(--p-border-radius-2);
+  padding: 1rem 1.5rem;
+  background: var(--surface);
+  border-radius: var(--border-radius-100);
   color: #00565e;
-  margin: var(--p-space-6) 0;
-  margin-bottom: var(--p-space-16);
+  margin: 1.5rem 0;
+  margin-bottom: 4rem;
 }
diff --git a/polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss b/polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss
index 31962844aaa..c4951f3846e 100644
--- a/polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss
+++ b/polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss
@@ -9,7 +9,7 @@
 
   & > svg {
     flex-shrink: 0;
-    fill: var(--p-icon-highlight);
+    fill: var(--text);
     /* Undo these overly perscriptive styles from Polaris Icons */
     filter: none;
     opacity: 1;
diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss
index 08fe7b28f58..abe3fff3cc8 100644
--- a/polaris.shopify.com/src/styles/globals.scss
+++ b/polaris.shopify.com/src/styles/globals.scss
@@ -367,40 +367,40 @@ button {
   }
 }
 
-.components-grid {
-  display: grid;
-  gap: var(--p-space-4);
-  grid-template-columns: repeat(1, 1fr);
-}
-
-@media (min-width: 490px) {
-  .components-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1040px) {
-  .components-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.components-grid__title {
-  font-weight: var(--p-font-weight-semibold);
-  line-height: var(--p-font-line-height-3);
-  margin: 0 !important;
-  margin-bottom: var(--p-space-1) !important;
-  color: #4e52b8;
-}
-
-.tip-banner {
-  padding: var(--p-space-4) var(--p-space-6);
-  background: var(--p-surface-highlight-subdued);
-  border-radius: var(--p-border-radius-2);
-  color: #00565e !important;
-  margin: var(--p-space-6) 0;
-  margin-bottom: var(--p-space-16);
-}
+// .components-grid {
+//   display: grid;
+//   gap: 1rem;
+//   grid-template-columns: repeat(1, 1fr);
+// }
+
+// @media (min-width: 490px) {
+//   .components-grid {
+//     grid-template-columns: repeat(2, 1fr);
+//   }
+// }
+
+// @media (min-width: 1040px) {
+//   .components-grid {
+//     grid-template-columns: repeat(3, 1fr);
+//   }
+// }
+
+// .components-grid__title {
+//   font-weight: var(--p-font-weight-semibold);
+//   line-height: var(--p-font-line-height-3);
+//   margin: 0 !important;
+//   margin-bottom: var(--p-space-1) !important;
+//   color: #4e52b8;
+// }
+
+// .tip-banner {
+//   padding: 1rem 1.5rem;
+//   background: var(--p-surface-highlight-subdued);
+//   border-radius: var(--p-border-radius-2);
+//   color: #00565e !important;
+//   margin: 1.5rem 0;
+//   margin-bottom: var(--p-space-16);
+// }
 
 .tip-banner__header {
   display: flex;

From 7a0cf2c2c320c8f26c20454c3fe2d71cbde96804 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 15:30:03 +0100
Subject: [PATCH 08/15] Remove unused code

---
 polaris.shopify.com/src/styles/globals.scss | 45 ---------------------
 1 file changed, 45 deletions(-)

diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss
index abe3fff3cc8..77c28f09567 100644
--- a/polaris.shopify.com/src/styles/globals.scss
+++ b/polaris.shopify.com/src/styles/globals.scss
@@ -366,48 +366,3 @@ button {
     }
   }
 }
-
-// .components-grid {
-//   display: grid;
-//   gap: 1rem;
-//   grid-template-columns: repeat(1, 1fr);
-// }
-
-// @media (min-width: 490px) {
-//   .components-grid {
-//     grid-template-columns: repeat(2, 1fr);
-//   }
-// }
-
-// @media (min-width: 1040px) {
-//   .components-grid {
-//     grid-template-columns: repeat(3, 1fr);
-//   }
-// }
-
-// .components-grid__title {
-//   font-weight: var(--p-font-weight-semibold);
-//   line-height: var(--p-font-line-height-3);
-//   margin: 0 !important;
-//   margin-bottom: var(--p-space-1) !important;
-//   color: #4e52b8;
-// }
-
-// .tip-banner {
-//   padding: 1rem 1.5rem;
-//   background: var(--p-surface-highlight-subdued);
-//   border-radius: var(--p-border-radius-2);
-//   color: #00565e !important;
-//   margin: 1.5rem 0;
-//   margin-bottom: var(--p-space-16);
-// }
-
-.tip-banner__header {
-  display: flex;
-  align-items: center;
-  gap: var(--p-space-2);
-}
-
-.tip-banner__header h4 {
-  margin: 0 !important;
-}

From 235a370e1419656962673745cd6c0f033882093d Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 15:56:51 +0100
Subject: [PATCH 09/15] Ignore examples in app dir

---
 polaris.shopify.com/tsconfig.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/polaris.shopify.com/tsconfig.json b/polaris.shopify.com/tsconfig.json
index 50ed27fc6ba..4b2b3bfd13d 100644
--- a/polaris.shopify.com/tsconfig.json
+++ b/polaris.shopify.com/tsconfig.json
@@ -36,9 +36,5 @@
     "constants.js",
     ".next/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules",
-    "pages/examples/**/*",
-    "scripts/get-props/testData"
-  ]
+  "exclude": ["node_modules", "app/examples/**/*", "scripts/get-props/testData"]
 }

From e9f6e5fc82796d9f6726ccfa3f42c7873f48866f Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 21:18:02 +0100
Subject: [PATCH 10/15] Show output from subprocess while generating assets

---
 polaris.shopify.com/scripts/gen-site-map.mjs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/polaris.shopify.com/scripts/gen-site-map.mjs b/polaris.shopify.com/scripts/gen-site-map.mjs
index ba101ce1b4b..cddf7213a76 100644
--- a/polaris.shopify.com/scripts/gen-site-map.mjs
+++ b/polaris.shopify.com/scripts/gen-site-map.mjs
@@ -4,9 +4,13 @@ import path from 'path';
 const genSiteMap = async () => {
   const outputFile = 'public/sitemap.xml';
 
+  console.log('⚙️  Generating sitemap.xml...');
+  console.log('⚙️  Starting dev server using next dev...');
   const nextBin = path.join(process.cwd(), 'node_modules/.bin/next');
   const server = execa(nextBin, ['dev']);
 
+  server.stdout.pipe(process.stdout);
+
   const {stdout} = await execa('npx', [
     'get-site-urls',
     'http://localhost:3000',

From 7fbdc9ad86783c4ce01f1d4b0ba6844495e69227 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 21:25:49 +0100
Subject: [PATCH 11/15] Delay server start

---
 polaris.shopify.com/scripts/gen-site-map.mjs | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/polaris.shopify.com/scripts/gen-site-map.mjs b/polaris.shopify.com/scripts/gen-site-map.mjs
index cddf7213a76..0c1814c41cd 100644
--- a/polaris.shopify.com/scripts/gen-site-map.mjs
+++ b/polaris.shopify.com/scripts/gen-site-map.mjs
@@ -11,15 +11,17 @@ const genSiteMap = async () => {
 
   server.stdout.pipe(process.stdout);
 
-  const {stdout} = await execa('npx', [
-    'get-site-urls',
-    'http://localhost:3000',
-    `--output=${outputFile}`,
-    '--alias=https://polaris.shopify.com',
-  ]);
-  console.log(stdout);
+  setTimeout(async () => {
+    const {stdout} = await execa('npx', [
+      'get-site-urls',
+      'http://localhost:3000',
+      `--output=${outputFile}`,
+      '--alias=https://polaris.shopify.com',
+    ]);
+    console.log(stdout);
 
-  await server.kill();
+    await server.kill();
+  }, 5000);
 };
 
 export default genSiteMap;

From ca704d46eb1a0a45922ab98b7572e0afebfa9b63 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 21:33:17 +0100
Subject: [PATCH 12/15] Change wait logic

---
 polaris.shopify.com/scripts/gen-site-map.mjs | 30 +++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/polaris.shopify.com/scripts/gen-site-map.mjs b/polaris.shopify.com/scripts/gen-site-map.mjs
index 0c1814c41cd..83e83c005aa 100644
--- a/polaris.shopify.com/scripts/gen-site-map.mjs
+++ b/polaris.shopify.com/scripts/gen-site-map.mjs
@@ -11,17 +11,25 @@ const genSiteMap = async () => {
 
   server.stdout.pipe(process.stdout);
 
-  setTimeout(async () => {
-    const {stdout} = await execa('npx', [
-      'get-site-urls',
-      'http://localhost:3000',
-      `--output=${outputFile}`,
-      '--alias=https://polaris.shopify.com',
-    ]);
-    console.log(stdout);
-
-    await server.kill();
-  }, 5000);
+  console.log('wait 5 seconds');
+  await sleep(10000);
+  console.log('wait done');
+
+  const {stdout} = await execa('npx', [
+    'get-site-urls',
+    'http://localhost:3000',
+    `--output=${outputFile}`,
+    '--alias=https://polaris.shopify.com',
+  ]);
+  console.log(stdout);
+
+  await server.kill();
 };
 
+function sleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
 export default genSiteMap;

From e93d237bd3a6f55de0ad299f4b6e0745ff69be31 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 21:37:46 +0100
Subject: [PATCH 13/15] Wait longer

---
 polaris.shopify.com/scripts/gen-site-map.mjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/polaris.shopify.com/scripts/gen-site-map.mjs b/polaris.shopify.com/scripts/gen-site-map.mjs
index 83e83c005aa..cd28d58df85 100644
--- a/polaris.shopify.com/scripts/gen-site-map.mjs
+++ b/polaris.shopify.com/scripts/gen-site-map.mjs
@@ -11,8 +11,8 @@ const genSiteMap = async () => {
 
   server.stdout.pipe(process.stdout);
 
-  console.log('wait 5 seconds');
-  await sleep(10000);
+  console.log('wait 30 seconds');
+  await sleep(30 * 1000);
   console.log('wait done');
 
   const {stdout} = await execa('npx', [

From 348dd81607a3b1dd84b999c0cf025a2a2c57d06a Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 21:48:24 +0100
Subject: [PATCH 14/15] Update next.js version

---
 polaris.shopify.com/next-env.d.ts |   1 +
 polaris.shopify.com/package.json  |   2 +-
 yarn.lock                         | 182 +++++++++++++++---------------
 3 files changed, 93 insertions(+), 92 deletions(-)

diff --git a/polaris.shopify.com/next-env.d.ts b/polaris.shopify.com/next-env.d.ts
index 4f11a03dc6c..fd36f9494e2 100644
--- a/polaris.shopify.com/next-env.d.ts
+++ b/polaris.shopify.com/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index e717e609a67..347a1172e63 100644
--- a/polaris.shopify.com/package.json
+++ b/polaris.shopify.com/package.json
@@ -33,7 +33,7 @@
     "gray-matter": "^4.0.3",
     "lodash.get": "^4.4.2",
     "lodash.throttle": "^4.1.1",
-    "next": "^13.0.6",
+    "next": "^13.2.3",
     "prismjs": "^1.27.0",
     "sharp": "^0.31.2",
     "react": "^18.2.0",
diff --git a/yarn.lock b/yarn.lock
index 9703b5d9f4a..8554f095a60 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2837,10 +2837,10 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@next/env@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.6.tgz#3fcab11ffbe95bff127827d9f7f3139bc5e6adff"
-  integrity sha512-yceT6DCHKqPRS1cAm8DHvDvK74DLIkDQdm5iV+GnIts8h0QbdHvkUIkdOvQoOODgpr6018skbmSQp12z5OWIQQ==
+"@next/env@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.2.3.tgz#77ca49edb3c1d7c5263bb8f2ebe686080e98279e"
+  integrity sha512-FN50r/E+b8wuqyRjmGaqvqNDuWBWYWQiigfZ50KnSFH0f+AMQQyaZl+Zm2+CIpKk0fL9QxhLxOpTVA3xFHgFow==
 
 "@next/eslint-plugin-next@13.0.0":
   version "13.0.0"
@@ -2856,70 +2856,70 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-android-arm-eabi@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.6.tgz#c971e5a3f8aae875ac1d9fdb159b7e126d8d98d5"
-  integrity sha512-FGFSj3v2Bluw8fD/X+1eXIEB0PhoJE0zfutsAauRhmNpjjZshLDgoXMWm1jTRL/04K/o9gwwO2+A8+sPVCH1uw==
-
-"@next/swc-android-arm64@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.0.6.tgz#ecacae60f1410136cc31f9e1e09e78e624ca2d68"
-  integrity sha512-7MgbtU7kimxuovVsd7jSJWMkIHBDBUsNLmmlkrBRHTvgzx5nDBXogP0hzZm7EImdOPwVMPpUHRQMBP9mbsiJYQ==
-
-"@next/swc-darwin-arm64@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.6.tgz#266e9e0908024760eba0dfce17edc90ffcba5fdc"
-  integrity sha512-AUVEpVTxbP/fxdFsjVI9d5a0CFn6NVV7A/RXOb0Y+pXKIIZ1V5rFjPwpYfIfyOo2lrqgehMNQcyMRoTrhq04xg==
-
-"@next/swc-darwin-x64@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.0.6.tgz#4be4ca7bc37f9c93d2e38be5ff313873ad758c09"
-  integrity sha512-SasCDJlshglsPnbzhWaIF6VEGkQy2NECcAOxPwaPr0cwbbt4aUlZ7QmskNzgolr5eAjFS/xTr7CEeKJtZpAAtQ==
-
-"@next/swc-freebsd-x64@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.6.tgz#42eb9043ee65ea5927ba550f4b59827d7064c47b"
-  integrity sha512-6Lbxd9gAdXneTkwHyYW/qtX1Tdw7ND9UbiGsGz/SP43ZInNWnW6q0au4hEVPZ9bOWWRKzcVoeTBdoMpQk9Hx9w==
-
-"@next/swc-linux-arm-gnueabihf@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.6.tgz#aab663282b5f15d12bf9de1120175f438a44c924"
-  integrity sha512-wNdi5A519e1P+ozEuYOhWPzzE6m1y7mkO6NFwn6watUwO0X9nZs7fT9THmnekvmFQpaZ6U+xf2MQ9poQoCh6jQ==
-
-"@next/swc-linux-arm64-gnu@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.6.tgz#5e2b6df4636576a00befb7bd414820a12161a9af"
-  integrity sha512-e8KTRnleQY1KLk5PwGV5hrmvKksCc74QRpHl5ffWnEEAtL2FE0ave5aIkXqErsPdXkiKuA/owp3LjQrP+/AH7Q==
-
-"@next/swc-linux-arm64-musl@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.6.tgz#4a5e91a36cf140cad974df602d647e64b1b9473f"
-  integrity sha512-/7RF03C3mhjYpHN+pqOolgME3guiHU5T3TsejuyteqyEyzdEyLHod+jcYH6ft7UZ71a6TdOewvmbLOtzHW2O8A==
-
-"@next/swc-linux-x64-gnu@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.6.tgz#accb8a721a99e704565b936f16e96fa0c67e8db1"
-  integrity sha512-kxyEXnYHpOEkFnmrlwB1QlzJtjC6sAJytKcceIyFUHbCaD3W/Qb5tnclcnHKTaFccizZRePXvV25Ok/eUSpKTw==
-
-"@next/swc-linux-x64-musl@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.6.tgz#2affaa2f4f01bc190a539d895118a6ad1a477645"
-  integrity sha512-N0c6gubS3WW1oYYgo02xzZnNatfVQP/CiJq2ax+DJ55ePV62IACbRCU99TZNXXg+Kos6vNW4k+/qgvkvpGDeyA==
-
-"@next/swc-win32-arm64-msvc@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.6.tgz#28e5c042772865efd05197a8d1db5920156997fc"
-  integrity sha512-QjeMB2EBqBFPb/ac0CYr7GytbhUkrG4EwFWbcE0vsRp4H8grt25kYpFQckL4Jak3SUrp7vKfDwZ/SwO7QdO8vw==
-
-"@next/swc-win32-ia32-msvc@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.6.tgz#30d91a6d847fa8bce9f8a0f9d2b469d574270be5"
-  integrity sha512-EQzXtdqRTcmhT/tCq81rIwE36Y3fNHPInaCuJzM/kftdXfa0F+64y7FAoMO13npX8EG1+SamXgp/emSusKrCXg==
-
-"@next/swc-win32-x64-msvc@13.0.6":
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.6.tgz#dfa28ddb335c16233d22cf39ec8cdf723e6587a1"
-  integrity sha512-pSkqZ//UP/f2sS9T7IvHLfEWDPTX0vRyXJnAUNisKvO3eF3e1xdhDX7dix/X3Z3lnN4UjSwOzclAI87JFbOwmQ==
+"@next/swc-android-arm-eabi@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.3.tgz#85eed560c87c7996558c868a117be9780778f192"
+  integrity sha512-mykdVaAXX/gm+eFO2kPeVjnOCKwanJ9mV2U0lsUGLrEdMUifPUjiXKc6qFAIs08PvmTMOLMNnUxqhGsJlWGKSw==
+
+"@next/swc-android-arm64@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.2.3.tgz#8ac54ca9795a48afc4631b4823a4864bd5db0129"
+  integrity sha512-8XwHPpA12gdIFtope+n9xCtJZM3U4gH4vVTpUwJ2w1kfxFmCpwQ4xmeGSkR67uOg80yRMuF0h9V1ueo05sws5w==
+
+"@next/swc-darwin-arm64@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.2.3.tgz#f674e3c65aec505b6d218a662ade3fe248ccdbda"
+  integrity sha512-TXOubiFdLpMfMtaRu1K5d1I9ipKbW5iS2BNbu8zJhoqrhk3Kp7aRKTxqFfWrbliAHhWVE/3fQZUYZOWSXVQi1w==
+
+"@next/swc-darwin-x64@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.2.3.tgz#a15ea7fb4c46034a8f5e387906d0cad08387075a"
+  integrity sha512-GZctkN6bJbpjlFiS5pylgB2pifHvgkqLAPumJzxnxkf7kqNm6rOGuNjsROvOWVWXmKhrzQkREO/WPS2aWsr/yw==
+
+"@next/swc-freebsd-x64@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.3.tgz#f7ac6ae4f7d706ff2431f33e40230a554c8c2cbc"
+  integrity sha512-rK6GpmMt/mU6MPuav0/M7hJ/3t8HbKPCELw/Uqhi4732xoq2hJ2zbo2FkYs56y6w0KiXrIp4IOwNB9K8L/q62g==
+
+"@next/swc-linux-arm-gnueabihf@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.3.tgz#84ad9e9679d55542a23b590ad9f2e1e9b2df62f7"
+  integrity sha512-yeiCp/Odt1UJ4KUE89XkeaaboIDiVFqKP4esvoLKGJ0fcqJXMofj4ad3tuQxAMs3F+qqrz9MclqhAHkex1aPZA==
+
+"@next/swc-linux-arm64-gnu@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.2.3.tgz#56f9175bc632d647c60b9e8bedc0875edf92d8b7"
+  integrity sha512-/miIopDOUsuNlvjBjTipvoyjjaxgkOuvlz+cIbbPcm1eFvzX2ltSfgMgty15GuOiR8Hub4FeTSiq3g2dmCkzGA==
+
+"@next/swc-linux-arm64-musl@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.2.3.tgz#7d4cf00e8f1729a3de464da0624773f5d0d14888"
+  integrity sha512-sujxFDhMMDjqhruup8LLGV/y+nCPi6nm5DlFoThMJFvaaKr/imhkXuk8uCTq4YJDbtRxnjydFv2y8laBSJVC2g==
+
+"@next/swc-linux-x64-gnu@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.2.3.tgz#17de404910c4ebf7a1d366b19334d7e27e126ab0"
+  integrity sha512-w5MyxPknVvC9LVnMenAYMXMx4KxPwXuJRMQFvY71uXg68n7cvcas85U5zkdrbmuZ+JvsO5SIG8k36/6X3nUhmQ==
+
+"@next/swc-linux-x64-musl@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.2.3.tgz#07cb7b7f3a3a98034e2533f82638a9b099ba4ab1"
+  integrity sha512-CTeelh8OzSOVqpzMFMFnVRJIFAFQoTsI9RmVJWW/92S4xfECGcOzgsX37CZ8K982WHRzKU7exeh7vYdG/Eh4CA==
+
+"@next/swc-win32-arm64-msvc@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.2.3.tgz#b9ac98c954c71ec9de45d3497a8585096b873152"
+  integrity sha512-7N1KBQP5mo4xf52cFCHgMjzbc9jizIlkTepe9tMa2WFvEIlKDfdt38QYcr9mbtny17yuaIw02FXOVEytGzqdOQ==
+
+"@next/swc-win32-ia32-msvc@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.2.3.tgz#5ec48653a48fd664e940c69c96bba698fdae92eb"
+  integrity sha512-LzWD5pTSipUXTEMRjtxES/NBYktuZdo7xExJqGDMnZU8WOI+v9mQzsmQgZS/q02eIv78JOCSemqVVKZBGCgUvA==
+
+"@next/swc-win32-x64-msvc@13.2.3":
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.2.3.tgz#cd432f280beb8d8de5b7cd2501e9f502e9f3dd72"
+  integrity sha512-aLG2MaFs4y7IwaMTosz2r4mVbqRyCnMoFqOcmfTi7/mAS+G4IMH0vJp4oLdbshqiVoiVuKrAfqtXj55/m7Qu1Q==
 
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
@@ -16066,30 +16066,30 @@ nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0:
   resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.1.tgz#26c8a3cee6cc05fbcf1e333cd2fc3e003326c0b5"
   integrity sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==
 
-next@^13.0.6:
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.0.6.tgz#f9a2e9e2df9ad60e1b6b716488c9ad501a383621"
-  integrity sha512-COvigvms2LRt1rrzfBQcMQ2GZd86Mvk1z+LOLY5pniFtL4VrTmhZ9salrbKfSiXbhsD01TrDdD68ec3ABDyscA==
+next@^13.2.3:
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/next/-/next-13.2.3.tgz#92d170e7aca421321f230ff80c35c4751035f42e"
+  integrity sha512-nKFJC6upCPN7DWRx4+0S/1PIOT7vNlCT157w9AzbXEgKy6zkiPKEt5YyRUsRZkmpEqBVrGgOqNfwecTociyg+w==
   dependencies:
-    "@next/env" "13.0.6"
+    "@next/env" "13.2.3"
     "@swc/helpers" "0.4.14"
     caniuse-lite "^1.0.30001406"
     postcss "8.4.14"
-    styled-jsx "5.1.0"
+    styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-android-arm-eabi" "13.0.6"
-    "@next/swc-android-arm64" "13.0.6"
-    "@next/swc-darwin-arm64" "13.0.6"
-    "@next/swc-darwin-x64" "13.0.6"
-    "@next/swc-freebsd-x64" "13.0.6"
-    "@next/swc-linux-arm-gnueabihf" "13.0.6"
-    "@next/swc-linux-arm64-gnu" "13.0.6"
-    "@next/swc-linux-arm64-musl" "13.0.6"
-    "@next/swc-linux-x64-gnu" "13.0.6"
-    "@next/swc-linux-x64-musl" "13.0.6"
-    "@next/swc-win32-arm64-msvc" "13.0.6"
-    "@next/swc-win32-ia32-msvc" "13.0.6"
-    "@next/swc-win32-x64-msvc" "13.0.6"
+    "@next/swc-android-arm-eabi" "13.2.3"
+    "@next/swc-android-arm64" "13.2.3"
+    "@next/swc-darwin-arm64" "13.2.3"
+    "@next/swc-darwin-x64" "13.2.3"
+    "@next/swc-freebsd-x64" "13.2.3"
+    "@next/swc-linux-arm-gnueabihf" "13.2.3"
+    "@next/swc-linux-arm64-gnu" "13.2.3"
+    "@next/swc-linux-arm64-musl" "13.2.3"
+    "@next/swc-linux-x64-gnu" "13.2.3"
+    "@next/swc-linux-x64-musl" "13.2.3"
+    "@next/swc-win32-arm64-msvc" "13.2.3"
+    "@next/swc-win32-ia32-msvc" "13.2.3"
+    "@next/swc-win32-x64-msvc" "13.2.3"
 
 nice-try@^1.0.4:
   version "1.0.5"
@@ -20755,10 +20755,10 @@ style-value-types@5.0.0:
     hey-listen "^1.0.8"
     tslib "^2.1.0"
 
-styled-jsx@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.0.tgz#4a5622ab9714bd3fcfaeec292aa555871f057563"
-  integrity sha512-/iHaRJt9U7T+5tp6TRelLnqBqiaIT0HsO0+vgyj8hK2KUk7aejFqRrumqPUlAqDwAj8IbS/1hk3IhBAAK/FCUQ==
+styled-jsx@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
+  integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
   dependencies:
     client-only "0.0.1"
 

From 8860347acbd81518a54a635b7e55cf0788f0cb3c Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 7 Mar 2023 21:56:21 +0100
Subject: [PATCH 15/15] Remove wait time

---
 polaris.shopify.com/scripts/gen-site-map.mjs | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/polaris.shopify.com/scripts/gen-site-map.mjs b/polaris.shopify.com/scripts/gen-site-map.mjs
index cd28d58df85..84a206eaa68 100644
--- a/polaris.shopify.com/scripts/gen-site-map.mjs
+++ b/polaris.shopify.com/scripts/gen-site-map.mjs
@@ -11,10 +11,6 @@ const genSiteMap = async () => {
 
   server.stdout.pipe(process.stdout);
 
-  console.log('wait 30 seconds');
-  await sleep(30 * 1000);
-  console.log('wait done');
-
   const {stdout} = await execa('npx', [
     'get-site-urls',
     'http://localhost:3000',