diff --git a/packages/nextjs/app/about/page.tsx b/packages/nextjs/app/about/page.tsx
index 1a8d81b..ac293fa 100644
--- a/packages/nextjs/app/about/page.tsx
+++ b/packages/nextjs/app/about/page.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from "next";
 
 import Link from "next/link";
-import { BreadIcon } from "../ui/shared-ui";
+import { BreadIcon } from "shared-ui";
 import { Breadcrumbs } from "app/components/Breadcrumbs";
 import LocalImage from "app/components/LocalImage";
 import bigPictureImage from "../../../../docs/img/big-picture.png";
diff --git a/packages/nextjs/app/categories/page.tsx b/packages/nextjs/app/categories/page.tsx
index 851282c..75aae36 100644
--- a/packages/nextjs/app/categories/page.tsx
+++ b/packages/nextjs/app/categories/page.tsx
@@ -1,7 +1,7 @@
 import { Breadcrumbs } from "app/components/Breadcrumbs";
 import { CategoryList } from "app/components/CategoryList";
 import { Metadata } from "next";
-import { WeDontSellBreadBanner } from "../ui/shared-ui";
+import { WeDontSellBreadBanner } from "shared-ui";
 import { getAllCategories } from "utils/getAllCategoriesQuery";
 import { isString, pluralize } from "utils/pluralize";
 
diff --git a/packages/nextjs/app/components/Card.tsx b/packages/nextjs/app/components/Card.tsx
index 5ca246c..6fc27c3 100644
--- a/packages/nextjs/app/components/Card.tsx
+++ b/packages/nextjs/app/components/Card.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { SanityImageSource } from "@sanity/image-url/lib/types/types";
 import Link, { LinkProps } from "next/link";
 import { Image } from "./Image";
-import { Card as BaseCard } from "../ui/shared-ui";
+import { Card as BaseCard } from "shared-ui";
 
 export interface CardProps {
   title: string;
diff --git a/packages/nextjs/app/components/ImageCarousel.tsx b/packages/nextjs/app/components/ImageCarousel.tsx
index b8117e5..92cdcc1 100644
--- a/packages/nextjs/app/components/ImageCarousel.tsx
+++ b/packages/nextjs/app/components/ImageCarousel.tsx
@@ -1,7 +1,7 @@
 import { ProductImage } from "utils/groqTypes/ProductList";
 import * as React from "react";
 import { Image } from "app/components/Image";
-import { ImageCarousel as BaseImageCarousel } from "../ui/shared-ui";
+import { ImageCarousel as BaseImageCarousel } from "shared-ui";
 
 export type ImageCarouselProps = {
   productImages: ProductImage[];
diff --git a/packages/nextjs/app/components/Pagination.tsx b/packages/nextjs/app/components/Pagination.tsx
index b8e1d6b..ae545fd 100644
--- a/packages/nextjs/app/components/Pagination.tsx
+++ b/packages/nextjs/app/components/Pagination.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Pagination as BasePagination } from "../ui/shared-ui";
+import { Pagination as BasePagination } from "shared-ui";
 import Link from "next/link";
 import classNames from "classnames";
 import { usePathname, useSearchParams } from "next/navigation";
diff --git a/packages/nextjs/app/components/PaginationFade.tsx b/packages/nextjs/app/components/PaginationFade.tsx
index c8d7f9e..2cf9640 100644
--- a/packages/nextjs/app/components/PaginationFade.tsx
+++ b/packages/nextjs/app/components/PaginationFade.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import classNames from "classnames";
-import { FadeInOut } from "../ui/shared-ui";
+import { FadeInOut } from "shared-ui";
 import { useSearchParams } from "next/navigation";
 import { pluralize } from "utils/pluralize";
 import { PLPVariant } from "utils/groqTypes/ProductList";
diff --git a/packages/nextjs/app/components/Product.tsx b/packages/nextjs/app/components/Product.tsx
index f96644d..d32514a 100644
--- a/packages/nextjs/app/components/Product.tsx
+++ b/packages/nextjs/app/components/Product.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Price } from "../ui/shared-ui";
+import { Price } from "shared-ui";
 import { PLPVariant } from "utils/groqTypes/ProductList";
 import { Image } from "./Image";
 
diff --git a/packages/nextjs/app/components/ProductDetailBody.tsx b/packages/nextjs/app/components/ProductDetailBody.tsx
index 1eca7c0..0d88caa 100644
--- a/packages/nextjs/app/components/ProductDetailBody.tsx
+++ b/packages/nextjs/app/components/ProductDetailBody.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { BlockContent, Price } from "../ui/shared-ui";
+import { BlockContent, Price } from "shared-ui";
 
 import { ImageCarousel } from "app/components/ImageCarousel";
 import { StyleOptions } from "app/components/ProductPage/StyleOptions";
diff --git a/packages/nextjs/app/components/ProductFilters/FilterGroup.tsx b/packages/nextjs/app/components/ProductFilters/FilterGroup.tsx
index d031a65..ff1b9f7 100644
--- a/packages/nextjs/app/components/ProductFilters/FilterGroup.tsx
+++ b/packages/nextjs/app/components/ProductFilters/FilterGroup.tsx
@@ -3,7 +3,7 @@
 import type { FilterGroup as FilterGroupType } from "utils/filters";
 import * as React from "react";
 import { ChangeEvent } from "react";
-import { Checkbox } from "../../ui/shared-ui";
+import { Checkbox } from "shared-ui";
 import { useRouterQueryParams } from "utils/useRouterQueryParams";
 
 type FilterGroupProps = {
diff --git a/packages/nextjs/app/components/ProductSort.tsx b/packages/nextjs/app/components/ProductSort.tsx
index a595a6b..6d6e691 100644
--- a/packages/nextjs/app/components/ProductSort.tsx
+++ b/packages/nextjs/app/components/ProductSort.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { useRouterQueryParams } from "utils/useRouterQueryParams";
-import { ProductSort as BaseProductSort, ProductSortProps as BaseProps } from "../ui/shared-ui";
+import { ProductSort as BaseProductSort, ProductSortProps as BaseProps } from "shared-ui";
 
 type ProductSortProps = Pick<BaseProps, "as" | "showTitle" | "title" | "selectClassName">;
 
diff --git a/packages/nextjs/app/components/ProductsList.tsx b/packages/nextjs/app/components/ProductsList.tsx
index 8fd1b57..438821f 100644
--- a/packages/nextjs/app/components/ProductsList.tsx
+++ b/packages/nextjs/app/components/ProductsList.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { AnimatePresence } from "../ui/framer";
 
-import { H6, WeDontSellBreadBanner } from "../ui/shared-ui";
+import { H6, WeDontSellBreadBanner } from "shared-ui";
 import { CategoryFilterItem, FlavourFilterItem, PLPVariant, StyleFilterItem } from "utils/groqTypes/ProductList";
 
 import { ProductFilters } from "app/components/ProductFilters/ProductFilters";
diff --git a/packages/nextjs/app/components/SortAndFiltersToolbarMobile.tsx b/packages/nextjs/app/components/SortAndFiltersToolbarMobile.tsx
index db2e93e..21996fa 100644
--- a/packages/nextjs/app/components/SortAndFiltersToolbarMobile.tsx
+++ b/packages/nextjs/app/components/SortAndFiltersToolbarMobile.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "../ui/shared-ui";
+import { Button } from "shared-ui";
 import React from "react";
 import { MdOutlineFilterList } from "react-icons/md";
 import { ProductSort } from "app/components/ProductSort";
diff --git a/packages/nextjs/app/components/page.tsx b/packages/nextjs/app/components/page.tsx
index a2bda12..ae6aebc 100644
--- a/packages/nextjs/app/components/page.tsx
+++ b/packages/nextjs/app/components/page.tsx
@@ -1,5 +1,5 @@
 import { MdArrowForward } from "react-icons/md";
-import { Button, Input, Pill, Checkbox, Select, LinkText } from "../ui/shared-ui";
+import { Button, Input, Pill, Checkbox, Select, LinkText } from "shared-ui";
 
 export default async function Page() {
   return (
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
index ef3a36e..1a807f7 100644
--- a/packages/nextjs/app/layout.tsx
+++ b/packages/nextjs/app/layout.tsx
@@ -1,4 +1,4 @@
-import { Footer, MobileNavProvider } from "./ui/shared-ui";
+import { Footer, MobileNavProvider } from "shared-ui";
 import "./global.css";
 import { Header } from "app/components/Header/Header";
 import { Metadata } from "next";
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 6380dd2..73e012e 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -4,7 +4,7 @@ import { getRecommendations } from "utils/getRecommendationsQuery";
 import { FiArrowRight } from "react-icons/fi";
 import Link from "next/link";
 
-import { Button, FeaturedQuote } from "./ui/shared-ui";
+import { Button, FeaturedQuote } from "shared-ui";
 
 import featuredImg from "assets/featured-story.jpg";
 import { FeaturedList } from "app/components/FeaturedList";
diff --git a/packages/nextjs/app/products/[slug]/page.tsx b/packages/nextjs/app/products/[slug]/page.tsx
index 8cee0e0..b9ee334 100644
--- a/packages/nextjs/app/products/[slug]/page.tsx
+++ b/packages/nextjs/app/products/[slug]/page.tsx
@@ -4,7 +4,7 @@ import { Breadcrumbs } from "app/components/Breadcrumbs";
 import { AnimatePresence } from "../../ui/framer";
 import { Metadata } from "next";
 import React from "react";
-import { H6, FadeInOut } from "../../ui/shared-ui";
+import { H6, FadeInOut } from "shared-ui";
 import { getProductBySlug } from "utils/getProductBySlug";
 import { getRecommendations } from "utils/getRecommendationsQuery";
 import { isSlug } from "utils/isSlug";
diff --git a/packages/nextjs/app/template.tsx b/packages/nextjs/app/template.tsx
index dbf0fa0..dad338b 100644
--- a/packages/nextjs/app/template.tsx
+++ b/packages/nextjs/app/template.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FadeInOut } from "./ui/shared-ui";
+import { FadeInOut } from "shared-ui";
 
 // TODO: exit animations currently do not work in next app router
 export default function Template({ children }: { children: React.ReactNode }) {
diff --git a/packages/nextjs/app/ui/shared-ui.ts b/packages/nextjs/app/ui/shared-ui.ts
deleted file mode 100644
index 325b7d1..0000000
--- a/packages/nextjs/app/ui/shared-ui.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-"use client";
-
-// TODO: separate imports so this isn't needed
-// for server-compatible components like Footer
-export * from "shared-ui";
diff --git a/packages/shared-ui/tsup.config.ts b/packages/shared-ui/tsup.config.ts
index 54a8376..5c72529 100644
--- a/packages/shared-ui/tsup.config.ts
+++ b/packages/shared-ui/tsup.config.ts
@@ -7,4 +7,9 @@ export default defineConfig({
   dts: true,
   format: ["cjs", "esm"],
   target: "es6",
+  esbuildOptions(options) {
+    options.banner = {
+      js: '"use client"',
+    };
+  },
 });