From 7255527fde0f83eebc856e5c0f4886345c5bfe1e Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Mon, 20 Apr 2026 13:08:24 -0500
Subject: [PATCH 1/9] feat(ui): replace injectStyles() with React 19 style
 precedence hoisting

Replace module-level injectStyles() side effect with React 19's <style precedence>
component. Each public component now renders <YvStyles /> which React handles for
hoisting, deduplication, SSR streaming, and Suspense. Fixes FOUC on SSR, RSC
incompatibility, and tree-shaking issues. Non-breaking change for consumers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/ui/AGENTS.md                         |  15 +-
 packages/ui/package.json                      |   7 +-
 .../src/components/YouVersionAuthButton.tsx   |  79 +++----
 packages/ui/src/components/bible-card.tsx     |  88 ++++----
 .../src/components/bible-chapter-picker.tsx   | 203 +++++++++---------
 packages/ui/src/components/bible-reader.tsx   |   2 +
 .../src/components/bible-version-picker.tsx   |  14 +-
 .../ui/src/components/verse-of-the-day.tsx    | 174 +++++++--------
 packages/ui/src/components/verse.tsx          |  86 ++++----
 packages/ui/src/index.ts                      |   5 -
 packages/ui/src/lib/inject-styles.ts          |  15 --
 packages/ui/src/lib/yv-styles.tsx             |   9 +
 packages/ui/src/styles/global.css             |  12 +-
 packages/ui/vitest.config.ts                  |   3 +
 14 files changed, 373 insertions(+), 339 deletions(-)
 delete mode 100644 packages/ui/src/lib/inject-styles.ts
 create mode 100644 packages/ui/src/lib/yv-styles.tsx
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
index 55352c6b..e9ff7229 100644
--- a/packages/ui/AGENTS.md
+++ b/packages/ui/AGENTS.md
@@ -11,8 +11,8 @@ Complete UI layer with many Bible components: BibleTextView, VerseOfTheDay, Bibl
 ```
 components/            # Public Bible components (exported)
 components/ui/         # Internal Radix primitives (not exported)
-lib/                   # Utilities (injectStyles, utils)
-src/index.ts           # Entry point with style injection side effect
+lib/                   # Utilities (yv-styles, utils)
+src/index.ts           # Entry point (re-exports components, types, hooks)
 ```
 
 ## PUBLIC API
@@ -32,7 +32,7 @@ src/index.ts           # Entry point with style injection side effect
 
 ❌ Don't: Make raw network requests from UI components
 ❌ Don't: Import from `@youversion/platform-core` directly (except re-exports in index.ts)
-❌ Don't: Add global CSS files; all styling goes through Tailwind build and `injectStyles`
+❌ Don't: Add global CSS files; all styling goes through Tailwind build and `<YvStyles />`
 ❌ Don't: Use unprefixed Tailwind classes (causes collisions in consumer apps)
 
 ## CONVENTIONS
@@ -42,9 +42,10 @@ src/index.ts           # Entry point with style injection side effect
 - tsup for bundling, tsc for type declarations
 
 ## STYLING
-**Auto-injected on import**: `src/index.ts` calls `injectStyles()` on module load
-- CSS embedded as `__YV_STYLES__` constant via tsup define (no separate CSS file)
-- Built Tailwind CSS: `dist/tailwind.css` → injected as JS string at build time
+**React 19 `<style precedence>`**: Each public component renders `<YvStyles />` (from `src/lib/yv-styles.tsx`) which outputs a `<style href="yv-sdk-styles" precedence="yv-sdk">` element. React handles hoisting to `<head>`, deduplication, SSR streaming, and Suspense integration.
+- CSS embedded as `__YV_STYLES__` constant via tsup define
+- Built Tailwind CSS: `dist/tailwind.css` → embedded as JS string at build time
+- Static CSS also available via `import '@youversion/platform-react-ui/styles.css'` for non-React consumers
 - Each component includes a `data-yv-sdk` attribute on its root element for style scoping (consumers don't need to add this)
 - Tailwind CSS classes must be prefixed with `yv:` to prevent class naming collision when someone uses our components in their app. For example, `mt-4` becomes `yv:mt-4`
 - Light/dark mode via CSS variables (`[data-yv-sdk]`)
@@ -168,6 +169,6 @@ From repo root, `pnpm build` runs Turbo which builds in order:
 3. `@youversion/platform-react-ui` (build:css → build:js → build:types)
 
 ## CRITICAL
-- **Side effect**: importing package injects styles automatically
+- **No module side effects**: styles are rendered via React 19 `<style precedence>` in each component's render tree
 - Never skip build:css step (styles required for __YV_STYLES__ constant)
 - Always rebuild after CSS changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 700d34a3..baa35638 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -11,7 +11,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./styles.css": "./dist/tailwind.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -22,9 +23,7 @@
     "README.md",
     "LICENSE"
   ],
-  "sideEffects": [
-    "*.css"
-  ],
+  "sideEffects": false,
   "scripts": {
     "build:types": "tsc -p tsconfig.build.json",
     "build:js": "tsup",
diff --git a/packages/ui/src/components/YouVersionAuthButton.tsx b/packages/ui/src/components/YouVersionAuthButton.tsx
index 69688e03..d32c8063 100644
--- a/packages/ui/src/components/YouVersionAuthButton.tsx
+++ b/packages/ui/src/components/YouVersionAuthButton.tsx
@@ -5,6 +5,7 @@ import { useYVAuth, useTheme } from '@youversion/platform-react-hooks';
 import { Button } from '../components/ui/button';
 import { YouVersionLogo } from './icons/youversion-logo';
 import { cn } from '../lib/utils';
+import { YvStyles } from '../lib/yv-styles';
 
 interface SignInAuthProps {
   /**
@@ -178,12 +179,50 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
 
     if (size === 'icon') {
       return (
+        <>
+          <YvStyles />
+          <Button
+            {...props}
+            data-yv-sdk
+            data-yv-theme={theme}
+            className={cn(
+              'yv:shadow-none yv:p-3 yv:h-auto yv:w-fit',
+              variant === 'outline' ? 'yv:border' : 'yv:border-none',
+              theme === 'light' ? 'yv:text-black' : 'yv:text-white',
+              className,
+            )}
+            disabled={buttonLoading ? true : (disabled ?? false)}
+            ref={ref}
+            onClick={(e) => void handleClick(e)}
+            size="icon"
+            style={{
+              ...(radius === 'rectangular'
+                ? ({
+                    '--yv-radius': '0.65rem',
+                  } as React.CSSProperties)
+                : {}),
+              borderColor: theme === 'light' ? 'var(--yv-gray-15)' : 'var(--yv-gray-35)',
+              borderWidth: '1px',
+            }}
+            variant={'default'}
+          >
+            {buttonLoading ? loadingSpinner : null}
+            <YouVersionLogo />
+            <span className="yv:sr-only">{buttonText}</span>
+          </Button>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <YvStyles />
         <Button
           {...props}
           data-yv-sdk
           data-yv-theme={theme}
           className={cn(
-            'yv:shadow-none yv:p-3 yv:h-auto yv:w-fit',
+            'yv:relative yv:shadow-none yv:w-fit',
             variant === 'outline' ? 'yv:border' : 'yv:border-none',
             theme === 'light' ? 'yv:text-black' : 'yv:text-white',
             className,
@@ -191,7 +230,7 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
           disabled={buttonLoading ? true : (disabled ?? false)}
           ref={ref}
           onClick={(e) => void handleClick(e)}
-          size="icon"
+          size="lg"
           style={{
             ...(radius === 'rectangular'
               ? ({
@@ -205,41 +244,9 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
         >
           {buttonLoading ? loadingSpinner : null}
           <YouVersionLogo />
-          <span className="yv:sr-only">{buttonText}</span>
+          {buttonText}
         </Button>
-      );
-    }
-
-    return (
-      <Button
-        {...props}
-        data-yv-sdk
-        data-yv-theme={theme}
-        className={cn(
-          'yv:relative yv:shadow-none yv:w-fit',
-          variant === 'outline' ? 'yv:border' : 'yv:border-none',
-          theme === 'light' ? 'yv:text-black' : 'yv:text-white',
-          className,
-        )}
-        disabled={buttonLoading ? true : (disabled ?? false)}
-        ref={ref}
-        onClick={(e) => void handleClick(e)}
-        size="lg"
-        style={{
-          ...(radius === 'rectangular'
-            ? ({
-                '--yv-radius': '0.65rem',
-              } as React.CSSProperties)
-            : {}),
-          borderColor: theme === 'light' ? 'var(--yv-gray-15)' : 'var(--yv-gray-35)',
-          borderWidth: '1px',
-        }}
-        variant={'default'}
-      >
-        {buttonLoading ? loadingSpinner : null}
-        <YouVersionLogo />
-        {buttonText}
-      </Button>
+      </>
     );
   },
 );
diff --git a/packages/ui/src/components/bible-card.tsx b/packages/ui/src/components/bible-card.tsx
index fd47f71f..31617eed 100644
--- a/packages/ui/src/components/bible-card.tsx
+++ b/packages/ui/src/components/bible-card.tsx
@@ -7,6 +7,7 @@ import { useState, useEffect } from 'react';
 import { SOURCE_SERIF_FONT } from '@/lib/verse-html-utils';
 import { LoaderIcon } from './icons/loader';
 import { AnimatedHeight } from './animated-height';
+import { YvStyles } from '@/lib/yv-styles';
 
 function useDelayedLoading(loading: boolean, delay = 250): boolean {
   const [showSpinner, setShowSpinner] = useState(false);
@@ -137,50 +138,53 @@ export function BibleCard({
   const showSpinner = useDelayedLoading(isRefetching);
 
   return (
-    <section
-      data-yv-sdk
-      data-yv-theme={theme}
-      className="yv:w-full yv:flex yv:flex-col yv:grow yv:bg-card yv:p-6 yv:max-w-md yv:rounded-2xl"
-    >
-      <div className="yv:flex yv:w-full yv:justify-between yv:items-center yv:mb-4">
-        {passage && !passageError ? (
-          <div className="yv:grow yv:flex yv:items-center yv:gap-1.5">
-            <BibleCardHeaderReference passage={passage} version={version} />
-            {showSpinner ? (
-              <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
-            ) : null}
-          </div>
-        ) : passageError ? (
-          <BibleCardHeaderError />
-        ) : (
-          <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
-        )}
-
-        {showVersionPicker && !passageError ? (
-          <BibleCardVersionPicker
-            versionId={versionNum}
-            onVersionChange={setVersionNum}
+    <>
+      <YvStyles />
+      <section
+        data-yv-sdk
+        data-yv-theme={theme}
+        className="yv:w-full yv:flex yv:flex-col yv:grow yv:bg-card yv:p-6 yv:max-w-md yv:rounded-2xl"
+      >
+        <div className="yv:flex yv:w-full yv:justify-between yv:items-center yv:mb-4">
+          {passage && !passageError ? (
+            <div className="yv:grow yv:flex yv:items-center yv:gap-1.5">
+              <BibleCardHeaderReference passage={passage} version={version} />
+              {showSpinner ? (
+                <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
+              ) : null}
+            </div>
+          ) : passageError ? (
+            <BibleCardHeaderError />
+          ) : (
+            <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
+          )}
+
+          {showVersionPicker && !passageError ? (
+            <BibleCardVersionPicker
+              versionId={versionNum}
+              onVersionChange={setVersionNum}
+              theme={theme}
+            />
+          ) : null}
+        </div>
+
+        <AnimatedHeight>
+          <BibleTextView
             theme={theme}
+            fontSize={16}
+            fontFamily={SOURCE_SERIF_FONT}
+            reference={reference}
+            versionId={versionNum}
+            passageState={{
+              passage,
+              loading: passageLoading,
+              error: passageError,
+            }}
           />
-        ) : null}
-      </div>
+        </AnimatedHeight>
 
-      <AnimatedHeight>
-        <BibleTextView
-          theme={theme}
-          fontSize={16}
-          fontFamily={SOURCE_SERIF_FONT}
-          reference={reference}
-          versionId={versionNum}
-          passageState={{
-            passage,
-            loading: passageLoading,
-            error: passageError,
-          }}
-        />
-      </AnimatedHeight>
-
-      <BibleCardFooter copyright={!passageError ? version?.copyright : null} />
-    </section>
+        <BibleCardFooter copyright={!passageError ? version?.copyright : null} />
+      </section>
+    </>
   );
 }
diff --git a/packages/ui/src/components/bible-chapter-picker.tsx b/packages/ui/src/components/bible-chapter-picker.tsx
index 67066b8a..89d24928 100644
--- a/packages/ui/src/components/bible-chapter-picker.tsx
+++ b/packages/ui/src/components/bible-chapter-picker.tsx
@@ -16,6 +16,7 @@ import { Button } from './ui/button';
 import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from './ui/popover';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './ui/accordion';
 import { InputGroup, InputGroupInput, InputGroupAddon } from './ui/input-group';
+import { YvStyles } from '@/lib/yv-styles';
 
 type BibleChapterPickerContextType = {
   book: string;
@@ -134,115 +135,123 @@ function Root({
   };
 
   return (
-    <Popover>
-      <BibleChapterPickerContext.Provider
-        value={{
-          book,
-          chapter,
-          setBook,
-          setChapter,
-          versionId,
-          background: theme,
-          scrollToCurrentBook,
-        }}
-      >
-        {children}
+    <>
+      <YvStyles />
+      <Popover>
+        <BibleChapterPickerContext.Provider
+          value={{
+            book,
+            chapter,
+            setBook,
+            setChapter,
+            versionId,
+            background: theme,
+            scrollToCurrentBook,
+          }}
+        >
+          {children}
 
-        {/* data-yv-sdk for styles is needed because the popover gets rendered outside of the providers scope **/}
-        <PopoverContent sideOffset={16} heading="Books" theme={theme} side="top">
-          <Accordion
-            className="yv:relative yv:overflow-y-auto yv:bg-background yv:px-6"
-            type="single"
-            collapsible
-            defaultValue={defaultBook || book || 'GEN'}
-            onValueChange={setExpandedBook}
-          >
-            {filteredBooks && filteredBooks.length > 0 ? (
-              filteredBooks.map((bookItem) => (
-                <AccordionItem
-                  className="yv:border-b yv:border-border"
-                  key={bookItem.id}
-                  value={bookItem.id}
-                  id={bookItem.id}
-                  ref={(node) => {
-                    if (node) {
-                      bookElementsRef.current[bookItem.id] = node;
-                    } else {
-                      delete bookElementsRef.current[bookItem.id];
-                    }
-                  }}
-                >
-                  <AccordionTrigger className="yv:rounded-none">{bookItem.title}</AccordionTrigger>
-                  <AccordionContent>
-                    {bookItem.chapters && bookItem.chapters.length > 0 ? (
-                      <div className="yv:grid yv:grid-cols-5 yv:gap-2">
-                        {bookItem.intro?.id && bookItem.intro?.passage_id ? (
-                          <PopoverClose asChild key={`${bookItem.id}-${bookItem.intro.passage_id}`}>
-                            <Button
-                              variant="secondary"
-                              size="icon"
-                              className="yv:aspect-square yv:w-full yv:h-full yv:flex yv:items-center yv:justify-center yv:rounded-[4px]"
-                              onClick={() =>
-                                handleChapterButtonClick(
-                                  bookItem.id,
-                                  bookItem.intro?.passage_id || '',
-                                )
-                              }
+          {/* data-yv-sdk for styles is needed because the popover gets rendered outside of the providers scope **/}
+          <PopoverContent sideOffset={16} heading="Books" theme={theme} side="top">
+            <Accordion
+              className="yv:relative yv:overflow-y-auto yv:bg-background yv:px-6"
+              type="single"
+              collapsible
+              defaultValue={defaultBook || book || 'GEN'}
+              onValueChange={setExpandedBook}
+            >
+              {filteredBooks && filteredBooks.length > 0 ? (
+                filteredBooks.map((bookItem) => (
+                  <AccordionItem
+                    className="yv:border-b yv:border-border"
+                    key={bookItem.id}
+                    value={bookItem.id}
+                    id={bookItem.id}
+                    ref={(node) => {
+                      if (node) {
+                        bookElementsRef.current[bookItem.id] = node;
+                      } else {
+                        delete bookElementsRef.current[bookItem.id];
+                      }
+                    }}
+                  >
+                    <AccordionTrigger className="yv:rounded-none">
+                      {bookItem.title}
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      {bookItem.chapters && bookItem.chapters.length > 0 ? (
+                        <div className="yv:grid yv:grid-cols-5 yv:gap-2">
+                          {bookItem.intro?.id && bookItem.intro?.passage_id ? (
+                            <PopoverClose
+                              asChild
+                              key={`${bookItem.id}-${bookItem.intro.passage_id}`}
                             >
-                              <InfoIcon />
-                            </Button>
-                          </PopoverClose>
-                        ) : null}
-                        {bookItem.chapters.map((chapterRef) => {
-                          const chapterId = chapterRef.passage_id.split('.').pop() || '';
-                          return (
-                            <PopoverClose asChild key={`${bookItem.id}-${chapterRef.passage_id}`}>
                               <Button
                                 variant="secondary"
                                 size="icon"
                                 className="yv:aspect-square yv:w-full yv:h-full yv:flex yv:items-center yv:justify-center yv:rounded-[4px]"
                                 onClick={() =>
-                                  handleChapterButtonClick(bookItem.id, chapterRef.passage_id)
+                                  handleChapterButtonClick(
+                                    bookItem.id,
+                                    bookItem.intro?.passage_id || '',
+                                  )
                                 }
                               >
-                                {chapterId}
+                                <InfoIcon />
                               </Button>
                             </PopoverClose>
-                          );
-                        })}
-                      </div>
-                    ) : (
-                      <div className="yv:w-full yv:flex yv:items-center yv:justify-center yv:py-4 yv:text-muted-foreground yv:text-sm">
-                        No chapters available
-                      </div>
-                    )}
-                  </AccordionContent>
-                </AccordionItem>
-              ))
-            ) : (
-              <div className="yv:w-full yv:h-full yv:flex yv:items-center yv:justify-center yv:py-4 yv:text-center yv:text-balance yv:text-muted-foreground yv:text-sm">
-                We're sorry, there are no Bible results for this search.
-              </div>
-            )}
-          </Accordion>
+                          ) : null}
+                          {bookItem.chapters.map((chapterRef) => {
+                            const chapterId = chapterRef.passage_id.split('.').pop() || '';
+                            return (
+                              <PopoverClose asChild key={`${bookItem.id}-${chapterRef.passage_id}`}>
+                                <Button
+                                  variant="secondary"
+                                  size="icon"
+                                  className="yv:aspect-square yv:w-full yv:h-full yv:flex yv:items-center yv:justify-center yv:rounded-[4px]"
+                                  onClick={() =>
+                                    handleChapterButtonClick(bookItem.id, chapterRef.passage_id)
+                                  }
+                                >
+                                  {chapterId}
+                                </Button>
+                              </PopoverClose>
+                            );
+                          })}
+                        </div>
+                      ) : (
+                        <div className="yv:w-full yv:flex yv:items-center yv:justify-center yv:py-4 yv:text-muted-foreground yv:text-sm">
+                          No chapters available
+                        </div>
+                      )}
+                    </AccordionContent>
+                  </AccordionItem>
+                ))
+              ) : (
+                <div className="yv:w-full yv:h-full yv:flex yv:items-center yv:justify-center yv:py-4 yv:text-center yv:text-balance yv:text-muted-foreground yv:text-sm">
+                  We're sorry, there are no Bible results for this search.
+                </div>
+              )}
+            </Accordion>
 
-          <section className="yv:bg-muted yv:border-s yv:border-muted yv:p-4 yv:w-full">
-            <InputGroup className="yv:rounded-3xl yv:bg-background yv:shadow-none yv:border-border">
-              <InputGroupInput
-                tabIndex={1}
-                type="text"
-                placeholder="Search"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-              <InputGroupAddon align="inline-start">
-                <SearchIcon className="yv:size-5 yv:text-muted-foreground" />
-              </InputGroupAddon>
-            </InputGroup>
-          </section>
-        </PopoverContent>
-      </BibleChapterPickerContext.Provider>
-    </Popover>
+            <section className="yv:bg-muted yv:border-s yv:border-muted yv:p-4 yv:w-full">
+              <InputGroup className="yv:rounded-3xl yv:bg-background yv:shadow-none yv:border-border">
+                <InputGroupInput
+                  tabIndex={1}
+                  type="text"
+                  placeholder="Search"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+                <InputGroupAddon align="inline-start">
+                  <SearchIcon className="yv:size-5 yv:text-muted-foreground" />
+                </InputGroupAddon>
+              </InputGroup>
+            </section>
+          </PopoverContent>
+        </BibleChapterPickerContext.Provider>
+      </Popover>
+    </>
   );
 }
 
diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index b1357ad4..3ab59b65 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -32,6 +32,7 @@ import { BibleTextView } from './verse';
 import { INTER_FONT, SOURCE_SERIF_FONT, type FontFamily } from '@/lib/verse-html-utils';
 import { ChevronLeftIcon } from './icons/chevron-left';
 import { ChevronRightIcon } from './icons/chevron-right';
+import { YvStyles } from '@/lib/yv-styles';
 
 type BibleReaderContextType = {
   book: string;
@@ -175,6 +176,7 @@ function Root({
 
   return (
     <BibleReaderContext.Provider value={contextValue}>
+      <YvStyles />
       <div
         data-yv-sdk
         data-yv-theme={theme}
diff --git a/packages/ui/src/components/bible-version-picker.tsx b/packages/ui/src/components/bible-version-picker.tsx
index fce4c227..66eab7e5 100644
--- a/packages/ui/src/components/bible-version-picker.tsx
+++ b/packages/ui/src/components/bible-version-picker.tsx
@@ -29,6 +29,7 @@ import { InputGroup, InputGroupAddon, InputGroupInput } from './ui/input-group';
 import { Item, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from './ui/item';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { YvStyles } from '@/lib/yv-styles';
 
 export const RECENT_VERSIONS_KEY = 'youversion-platform:picker:recent-versions';
 const MAX_RECENT_VERSIONS = 3;
@@ -317,11 +318,14 @@ function Root({
   };
 
   return (
-    <BibleVersionPickerContext.Provider value={contextValue}>
-      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-        {children}
-      </Popover>
-    </BibleVersionPickerContext.Provider>
+    <>
+      <YvStyles />
+      <BibleVersionPickerContext.Provider value={contextValue}>
+        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+          {children}
+        </Popover>
+      </BibleVersionPickerContext.Provider>
+    </>
   );
 }
 
diff --git a/packages/ui/src/components/verse-of-the-day.tsx b/packages/ui/src/components/verse-of-the-day.tsx
index cdbf8e8e..8041e433 100644
--- a/packages/ui/src/components/verse-of-the-day.tsx
+++ b/packages/ui/src/components/verse-of-the-day.tsx
@@ -17,6 +17,7 @@ import { Button } from '@/components/ui/button';
 import { BibleTextView } from '@/components/verse';
 import { DEFAULT_LICENSE_FREE_BIBLE_VERSION } from '@youversion/platform-core';
 import { cn } from '@/lib/utils';
+import { YvStyles } from '@/lib/yv-styles';
 
 export type VerseOfTheDayProps = {
   /**
@@ -127,97 +128,100 @@ export function VerseOfTheDay({
   };
 
   return (
-    <section
-      data-yv-sdk
-      data-yv-theme={theme}
-      data-size={size}
-      className={
-        'yv:data-[size=lg]:p-8 yv:data-[size=default]:p-4 yv:*:shrink-0 yv:font-sans yv:flex yv:flex-col yv:gap-3 yv:w-full yv:grow yv:max-w-md yv:p-4 yv:rounded-2xl yv:bg-card'
-      }
-    >
-      <div className="yv:flex yv:items-center yv:gap-2 yv:text-black yv:dark:text-white">
-        {showSunIcon ? (
-          <div
-            data-slot="card-icon"
-            className="yv:col-start-1 yv:row-start-1 yv:self-start yv:justify-self-start"
-          >
-            <Votd className="yv:shrink-0 yv:h-10 yv:w-10" />
+    <>
+      <YvStyles />
+      <section
+        data-yv-sdk
+        data-yv-theme={theme}
+        data-size={size}
+        className={
+          'yv:data-[size=lg]:p-8 yv:data-[size=default]:p-4 yv:*:shrink-0 yv:font-sans yv:flex yv:flex-col yv:gap-3 yv:w-full yv:grow yv:max-w-md yv:p-4 yv:rounded-2xl yv:bg-card'
+        }
+      >
+        <div className="yv:flex yv:items-center yv:gap-2 yv:text-black yv:dark:text-white">
+          {showSunIcon ? (
+            <div
+              data-slot="card-icon"
+              className="yv:col-start-1 yv:row-start-1 yv:self-start yv:justify-self-start"
+            >
+              <Votd className="yv:shrink-0 yv:h-10 yv:w-10" />
+            </div>
+          ) : null}
+          <div className="yv:grow yv:grid">
+            <p
+              className={
+                'trim-both yv:line-clamp-1 yv:text-muted-foreground yv:uppercase yv:text-xs yv:font-medium yv:select-none'
+              }
+            >
+              {t('verseOfTheDay')}
+            </p>
           </div>
-        ) : null}
-        <div className="yv:grow yv:grid">
-          <p
-            className={
-              'trim-both yv:line-clamp-1 yv:text-muted-foreground yv:uppercase yv:text-xs yv:font-medium yv:select-none'
-            }
-          >
-            {t('verseOfTheDay')}
-          </p>
+          {showShareButton ? (
+            <div
+              data-slot="card-action"
+              className="yv:col-start-2 yv:row-span-2 yv:row-start-1 yv:self-start yv:justify-self-end"
+            >
+              <Button
+                aria-label="Share"
+                className={cn(size === 'lg' ? 'yv:translate-x-3' : 'yv:translate-x-2')}
+                onClick={() => void handleShareVerse()}
+                disabled={!!(errorPassage || errorVerseOfTheDay)}
+                size="icon"
+                variant="ghost"
+              >
+                <Share className="yv:h-6! yv:w-6!" />
+              </Button>
+            </div>
+          ) : null}
         </div>
-        {showShareButton ? (
-          <div
-            data-slot="card-action"
-            className="yv:col-start-2 yv:row-span-2 yv:row-start-1 yv:self-start yv:justify-self-end"
-          >
-            <Button
-              aria-label="Share"
-              className={cn(size === 'lg' ? 'yv:translate-x-3' : 'yv:translate-x-2')}
-              onClick={() => void handleShareVerse()}
-              disabled={!!(errorPassage || errorVerseOfTheDay)}
-              size="icon"
-              variant="ghost"
+
+        <AnimatedHeight>
+          {isLoading ? (
+            <div
+              className="yv:flex yv:justify-center yv:py-2"
+              role="status"
+              aria-label="Loading verse"
             >
-              <Share className="yv:h-6! yv:w-6!" />
-            </Button>
-          </div>
-        ) : null}
-      </div>
+              <LoaderIcon
+                className="yv:size-4 yv:animate-spin yv:text-muted-foreground"
+                aria-hidden="true"
+              />
+            </div>
+          ) : (
+            <div className="yv:flex yv:flex-col yv:gap-2">
+              <BibleTextView
+                ref={verseRef}
+                theme={theme}
+                reference={data?.passage_id || ''}
+                versionId={versionId}
+                fontSize={size === 'default' ? 16 : 20}
+                fontFamily={size === 'default' ? 'var(--yv-font-sans)' : 'var(--yv-font-serif)'}
+                passageState={{
+                  passage,
+                  loading: isLoading,
+                  error: errorPassage || errorVerseOfTheDay || null,
+                }}
+              />
 
-      <AnimatedHeight>
-        {isLoading ? (
+              {errorPassage || errorVerseOfTheDay ? null : (
+                <p className="yv:text-muted-foreground yv:font-medium yv:text-sm yv:mt-3">
+                  {referenceText}
+                </p>
+              )}
+            </div>
+          )}
+        </AnimatedHeight>
+
+        {showBibleAppAttribution ? (
           <div
-            className="yv:flex yv:justify-center yv:py-2"
-            role="status"
-            aria-label="Loading verse"
+            className={
+              'yv:grid yv:grid-cols-1 yv:mt-4 yv:justify-between yv:items-center yv:gap-2 yv:w-full'
+            }
           >
-            <LoaderIcon
-              className="yv:size-4 yv:animate-spin yv:text-muted-foreground"
-              aria-hidden="true"
-            />
+            <BibleAppLogoLockup data-slot="attribution" className="yv:justify-self-end" />
           </div>
-        ) : (
-          <div className="yv:flex yv:flex-col yv:gap-2">
-            <BibleTextView
-              ref={verseRef}
-              theme={theme}
-              reference={data?.passage_id || ''}
-              versionId={versionId}
-              fontSize={size === 'default' ? 16 : 20}
-              fontFamily={size === 'default' ? 'var(--yv-font-sans)' : 'var(--yv-font-serif)'}
-              passageState={{
-                passage,
-                loading: isLoading,
-                error: errorPassage || errorVerseOfTheDay || null,
-              }}
-            />
-
-            {errorPassage || errorVerseOfTheDay ? null : (
-              <p className="yv:text-muted-foreground yv:font-medium yv:text-sm yv:mt-3">
-                {referenceText}
-              </p>
-            )}
-          </div>
-        )}
-      </AnimatedHeight>
-
-      {showBibleAppAttribution ? (
-        <div
-          className={
-            'yv:grid yv:grid-cols-1 yv:mt-4 yv:justify-between yv:items-center yv:gap-2 yv:w-full'
-          }
-        >
-          <BibleAppLogoLockup data-slot="attribution" className="yv:justify-self-end" />
-        </div>
-      ) : null}
-    </section>
+        ) : null}
+      </section>
+    </>
   );
 }
diff --git a/packages/ui/src/components/verse.tsx b/packages/ui/src/components/verse.tsx
index 93a3186d..01a9e68e 100644
--- a/packages/ui/src/components/verse.tsx
+++ b/packages/ui/src/components/verse.tsx
@@ -18,6 +18,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { getBibleTextErrorMessage } from '@/lib/bible-text-error';
 import { cn } from '@/lib/utils';
 import { type FontFamily } from '@/lib/verse-html-utils';
+import { YvStyles } from '@/lib/yv-styles';
 import { transformBibleHtml } from '@youversion/platform-core/browser';
 
 const LETTERS = 'abcdefghijklmnopqrstuvwxyz';
@@ -448,53 +449,62 @@ export const BibleTextView = forwardRef<HTMLDivElement, BibleTextViewProps>(
 
     if (currentLoading && !currentPassage) {
       return (
-        <div
-          ref={ref}
-          data-yv-sdk
-          data-yv-theme={currentTheme}
-          role="status"
-          aria-label="Loading passage"
-          className="yv:flex yv:grow yv:items-center yv:justify-center"
-        >
-          <LoaderIcon
-            className="yv:size-4 yv:animate-spin yv:text-muted-foreground"
-            aria-hidden="true"
-          />
-        </div>
+        <>
+          <YvStyles />
+          <div
+            ref={ref}
+            data-yv-sdk
+            data-yv-theme={currentTheme}
+            role="status"
+            aria-label="Loading passage"
+            className="yv:flex yv:grow yv:items-center yv:justify-center"
+          >
+            <LoaderIcon
+              className="yv:size-4 yv:animate-spin yv:text-muted-foreground"
+              aria-hidden="true"
+            />
+          </div>
+        </>
       );
     }
 
     if (currentError) {
       return (
-        <div ref={ref} data-yv-sdk data-yv-theme={currentTheme}>
-          <VerseUnavailableMessage message={getBibleTextErrorMessage(currentError)} />
-        </div>
+        <>
+          <YvStyles />
+          <div ref={ref} data-yv-sdk data-yv-theme={currentTheme}>
+            <VerseUnavailableMessage message={getBibleTextErrorMessage(currentError)} />
+          </div>
+        </>
       );
     }
 
     return (
-      <div
-        data-yv-sdk
-        data-yv-theme={currentTheme}
-        className={cn(fetchedLoading || currentLoading ? 'yv:animate-pulse' : '')}
-        aria-busy={currentLoading || undefined}
-        style={currentLoading ? { pointerEvents: 'none' } : undefined}
-      >
-        <Verse.Html
-          ref={ref}
-          html={currentPassage?.content || ''}
-          fontFamily={fontFamily}
-          fontSize={fontSize}
-          lineHeight={lineHeight}
-          showVerseNumbers={showVerseNumbers}
-          renderNotes={renderNotes}
-          reference={currentPassage?.reference}
-          theme={currentTheme}
-          selectedVerses={selectedVerses}
-          onVerseSelect={onVerseSelect}
-          highlightedVerses={highlightedVerses}
-        />
-      </div>
+      <>
+        <YvStyles />
+        <div
+          data-yv-sdk
+          data-yv-theme={currentTheme}
+          className={cn(fetchedLoading || currentLoading ? 'yv:animate-pulse' : '')}
+          aria-busy={currentLoading || undefined}
+          style={currentLoading ? { pointerEvents: 'none' } : undefined}
+        >
+          <Verse.Html
+            ref={ref}
+            html={currentPassage?.content || ''}
+            fontFamily={fontFamily}
+            fontSize={fontSize}
+            lineHeight={lineHeight}
+            showVerseNumbers={showVerseNumbers}
+            renderNotes={renderNotes}
+            reference={currentPassage?.reference}
+            theme={currentTheme}
+            selectedVerses={selectedVerses}
+            onVerseSelect={onVerseSelect}
+            highlightedVerses={highlightedVerses}
+          />
+        </div>
+      </>
     );
   },
 );
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 5274baaf..ddcd0b9f 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,10 +1,5 @@
 // React SDK main entry point
 
-import { injectStyles } from './lib/inject-styles';
-
-// Inject styles on import
-injectStyles();
-
 export * from './components';
 export * from './types';
 
diff --git a/packages/ui/src/lib/inject-styles.ts b/packages/ui/src/lib/inject-styles.ts
deleted file mode 100644
index b028b6c8..00000000
--- a/packages/ui/src/lib/inject-styles.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Built CSS is injected as a global by tsup at bundle time
-declare const __YV_STYLES__: string;
-
-export function injectStyles() {
-  if (typeof document === 'undefined') return; // SSR safety
-
-  const id = '__yv-sdk-styles';
-  if (document.getElementById(id)) return; // Already injected
-
-  // Create and append style tag to DOM
-  const style = document.createElement('style');
-  style.id = id;
-  style.textContent = __YV_STYLES__;
-  document.head.appendChild(style);
-}
diff --git a/packages/ui/src/lib/yv-styles.tsx b/packages/ui/src/lib/yv-styles.tsx
new file mode 100644
index 00000000..d5042691
--- /dev/null
+++ b/packages/ui/src/lib/yv-styles.tsx
@@ -0,0 +1,9 @@
+declare const __YV_STYLES__: string;
+
+export function YvStyles() {
+  return (
+    <style href="yv-sdk-styles" precedence="yv-sdk">
+      {__YV_STYLES__}
+    </style>
+  );
+}
diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css
index 7cd3d0eb..a3e99a06 100644
--- a/packages/ui/src/styles/global.css
+++ b/packages/ui/src/styles/global.css
@@ -2,13 +2,15 @@
  * Tailwind v4 CSS Layer Strategy
  * ==============================
  * All SDK styles are wrapped in custom @layer directives (yv-sdk-*) so that
- * when injected into a consumer's app, they sit below unlayered author styles
- * in the CSS cascade. This prevents our SDK from overriding consumer CSS.
+ * they sit below unlayered author styles in the CSS cascade. This prevents
+ * our SDK from overriding consumer CSS.
  *
  * LAYER ORDER IS CRITICAL. We declare Tailwind v4's standard layer names
- * (theme, base, components, utilities) BEFORE our yv-sdk-* layers. Because
- * injectStyles() appends our <style> tag first, we establish the document's
- * layer order before the consumer's Tailwind can. This ensures:
+ * (theme, base, components, utilities) BEFORE our yv-sdk-* layers. Each
+ * public component renders a React 19 <style href="yv-sdk-styles"
+ * precedence="yv-sdk"> element which React hoists to <head>, deduplicates,
+ * and includes in SSR-streamed HTML. This establishes the document's layer
+ * order before the consumer's Tailwind can. This ensures:
  *
  *   1. Consumer Tailwind layers (theme/base/utilities) = LOW priority
  *   2. SDK layers (yv-sdk-*)                           = MEDIUM priority
diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
index 5d7c48d5..e06bea2d 100644
--- a/packages/ui/vitest.config.ts
+++ b/packages/ui/vitest.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
     projects: [
       // Unit tests project
       defineProject({
+        define: {
+          __YV_STYLES__: '""',
+        },
         resolve: {
           alias: {
             '@': path.join(dirname, 'src'),

From d65acad4b8c561c8e1928aee45fddfa830420c8e Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Mon, 20 Apr 2026 13:12:48 -0500
Subject: [PATCH 2/9] fix(ui): define __YV_STYLES__ in Storybook Vite config

Storybook tests run through Storybook's Vite dev server which needs the
__YV_STYLES__ constant defined. Storybook already loads CSS via a direct
import of dist/tailwind.css, so empty string is correct here.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/ui/.storybook/main.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
index ca538181..4d265ece 100644
--- a/packages/ui/.storybook/main.ts
+++ b/packages/ui/.storybook/main.ts
@@ -13,6 +13,9 @@ const config: StorybookConfig = {
   framework: '@storybook/react-vite',
   staticDirs: ['../public'], // This is for Storybook mock service worker
   viteFinal: (config) => {
+    // YvStyles reads __YV_STYLES__ at render time; Storybook already loads
+    // CSS via `import '../dist/tailwind.css'` in preview.tsx, so empty string is fine.
+    config.define = { ...config.define, __YV_STYLES__: '""' };
     config.resolve = {
       ...config.resolve,
       alias: {

From 70e3ef69b39e71f881afc9ffc0273777f27f57d2 Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Mon, 20 Apr 2026 13:14:40 -0500
Subject: [PATCH 3/9] docs(ui): clarify __YV_STYLES__ define comments in test
 configs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/ui/.storybook/main.ts | 5 +++--
 packages/ui/vitest.config.ts   | 3 +++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
index 4d265ece..7f13f26a 100644
--- a/packages/ui/.storybook/main.ts
+++ b/packages/ui/.storybook/main.ts
@@ -13,8 +13,9 @@ const config: StorybookConfig = {
   framework: '@storybook/react-vite',
   staticDirs: ['../public'], // This is for Storybook mock service worker
   viteFinal: (config) => {
-    // YvStyles reads __YV_STYLES__ at render time; Storybook already loads
-    // CSS via `import '../dist/tailwind.css'` in preview.tsx, so empty string is fine.
+    // __YV_STYLES__ is normally injected by tsup at build time (see tsup.config.ts).
+    // Storybook uses its own Vite server, so we define it as empty here — CSS is
+    // already loaded via `import '../dist/tailwind.css'` in preview.tsx.
     config.define = { ...config.define, __YV_STYLES__: '""' };
     config.resolve = {
       ...config.resolve,
diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
index e06bea2d..394bca88 100644
--- a/packages/ui/vitest.config.ts
+++ b/packages/ui/vitest.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
     projects: [
       // Unit tests project
       defineProject({
+        // __YV_STYLES__ is normally injected by tsup at build time (see tsup.config.ts).
+        // Tests run against source files directly, so we define it as empty here
+        // to prevent ReferenceError when <YvStyles /> renders during tests.
         define: {
           __YV_STYLES__: '""',
         },

From e83614bac0caede798ba00024ab6abf6ebdc4fca Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Fri, 24 Apr 2026 09:57:02 -0500
Subject: [PATCH 4/9] fix(ui): restore sideEffects CSS allowlist to prevent
 bundler tree-shaking

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/ui/package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index baa35638..1b7a7faf 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -23,7 +23,9 @@
     "README.md",
     "LICENSE"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "build:types": "tsc -p tsconfig.build.json",
     "build:js": "tsup",

From 1087ad9845c518190d43d29998de131fbe8cd4e3 Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Fri, 24 Apr 2026 10:10:11 -0500
Subject: [PATCH 5/9] refactor(ui): move YvStyles from individual components to
 YouVersionProvider wrapper

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../ui/src/components/YouVersionAuthButton.tsx     |  3 ---
 packages/ui/src/components/YouVersionProvider.tsx  | 14 ++++++++++++++
 packages/ui/src/components/bible-card.tsx          |  2 --
 .../ui/src/components/bible-chapter-picker.tsx     |  2 --
 packages/ui/src/components/bible-reader.tsx        |  2 --
 .../ui/src/components/bible-version-picker.tsx     |  2 --
 packages/ui/src/components/verse-of-the-day.tsx    |  2 --
 packages/ui/src/components/verse.tsx               |  5 +----
 packages/ui/src/index.ts                           |  4 +++-
 9 files changed, 18 insertions(+), 18 deletions(-)
 create mode 100644 packages/ui/src/components/YouVersionProvider.tsx

diff --git a/packages/ui/src/components/YouVersionAuthButton.tsx b/packages/ui/src/components/YouVersionAuthButton.tsx
index d32c8063..f41d74b6 100644
--- a/packages/ui/src/components/YouVersionAuthButton.tsx
+++ b/packages/ui/src/components/YouVersionAuthButton.tsx
@@ -5,7 +5,6 @@ import { useYVAuth, useTheme } from '@youversion/platform-react-hooks';
 import { Button } from '../components/ui/button';
 import { YouVersionLogo } from './icons/youversion-logo';
 import { cn } from '../lib/utils';
-import { YvStyles } from '../lib/yv-styles';
 
 interface SignInAuthProps {
   /**
@@ -180,7 +179,6 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
     if (size === 'icon') {
       return (
         <>
-          <YvStyles />
           <Button
             {...props}
             data-yv-sdk
@@ -216,7 +214,6 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
 
     return (
       <>
-        <YvStyles />
         <Button
           {...props}
           data-yv-sdk
diff --git a/packages/ui/src/components/YouVersionProvider.tsx b/packages/ui/src/components/YouVersionProvider.tsx
new file mode 100644
index 00000000..824d5a8f
--- /dev/null
+++ b/packages/ui/src/components/YouVersionProvider.tsx
@@ -0,0 +1,14 @@
+import React, { type ComponentProps } from 'react';
+import { YouVersionProvider as BaseYouVersionProvider } from '@youversion/platform-react-hooks';
+import { YvStyles } from '@/lib/yv-styles';
+
+export function YouVersionProvider(
+  props: ComponentProps<typeof BaseYouVersionProvider>,
+): React.ReactElement {
+  return (
+    <BaseYouVersionProvider {...props}>
+      <YvStyles />
+      {props.children}
+    </BaseYouVersionProvider>
+  );
+}
diff --git a/packages/ui/src/components/bible-card.tsx b/packages/ui/src/components/bible-card.tsx
index 31617eed..52077729 100644
--- a/packages/ui/src/components/bible-card.tsx
+++ b/packages/ui/src/components/bible-card.tsx
@@ -7,7 +7,6 @@ import { useState, useEffect } from 'react';
 import { SOURCE_SERIF_FONT } from '@/lib/verse-html-utils';
 import { LoaderIcon } from './icons/loader';
 import { AnimatedHeight } from './animated-height';
-import { YvStyles } from '@/lib/yv-styles';
 
 function useDelayedLoading(loading: boolean, delay = 250): boolean {
   const [showSpinner, setShowSpinner] = useState(false);
@@ -139,7 +138,6 @@ export function BibleCard({
 
   return (
     <>
-      <YvStyles />
       <section
         data-yv-sdk
         data-yv-theme={theme}
diff --git a/packages/ui/src/components/bible-chapter-picker.tsx b/packages/ui/src/components/bible-chapter-picker.tsx
index 89d24928..e64fa9c6 100644
--- a/packages/ui/src/components/bible-chapter-picker.tsx
+++ b/packages/ui/src/components/bible-chapter-picker.tsx
@@ -16,7 +16,6 @@ import { Button } from './ui/button';
 import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from './ui/popover';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './ui/accordion';
 import { InputGroup, InputGroupInput, InputGroupAddon } from './ui/input-group';
-import { YvStyles } from '@/lib/yv-styles';
 
 type BibleChapterPickerContextType = {
   book: string;
@@ -136,7 +135,6 @@ function Root({
 
   return (
     <>
-      <YvStyles />
       <Popover>
         <BibleChapterPickerContext.Provider
           value={{
diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index 3ab59b65..b1357ad4 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -32,7 +32,6 @@ import { BibleTextView } from './verse';
 import { INTER_FONT, SOURCE_SERIF_FONT, type FontFamily } from '@/lib/verse-html-utils';
 import { ChevronLeftIcon } from './icons/chevron-left';
 import { ChevronRightIcon } from './icons/chevron-right';
-import { YvStyles } from '@/lib/yv-styles';
 
 type BibleReaderContextType = {
   book: string;
@@ -176,7 +175,6 @@ function Root({
 
   return (
     <BibleReaderContext.Provider value={contextValue}>
-      <YvStyles />
       <div
         data-yv-sdk
         data-yv-theme={theme}
diff --git a/packages/ui/src/components/bible-version-picker.tsx b/packages/ui/src/components/bible-version-picker.tsx
index 66eab7e5..2d5ff834 100644
--- a/packages/ui/src/components/bible-version-picker.tsx
+++ b/packages/ui/src/components/bible-version-picker.tsx
@@ -29,7 +29,6 @@ import { InputGroup, InputGroupAddon, InputGroupInput } from './ui/input-group';
 import { Item, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from './ui/item';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
-import { YvStyles } from '@/lib/yv-styles';
 
 export const RECENT_VERSIONS_KEY = 'youversion-platform:picker:recent-versions';
 const MAX_RECENT_VERSIONS = 3;
@@ -319,7 +318,6 @@ function Root({
 
   return (
     <>
-      <YvStyles />
       <BibleVersionPickerContext.Provider value={contextValue}>
         <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
           {children}
diff --git a/packages/ui/src/components/verse-of-the-day.tsx b/packages/ui/src/components/verse-of-the-day.tsx
index 8041e433..78fa3bc2 100644
--- a/packages/ui/src/components/verse-of-the-day.tsx
+++ b/packages/ui/src/components/verse-of-the-day.tsx
@@ -17,7 +17,6 @@ import { Button } from '@/components/ui/button';
 import { BibleTextView } from '@/components/verse';
 import { DEFAULT_LICENSE_FREE_BIBLE_VERSION } from '@youversion/platform-core';
 import { cn } from '@/lib/utils';
-import { YvStyles } from '@/lib/yv-styles';
 
 export type VerseOfTheDayProps = {
   /**
@@ -129,7 +128,6 @@ export function VerseOfTheDay({
 
   return (
     <>
-      <YvStyles />
       <section
         data-yv-sdk
         data-yv-theme={theme}
diff --git a/packages/ui/src/components/verse.tsx b/packages/ui/src/components/verse.tsx
index 01a9e68e..8bfddacb 100644
--- a/packages/ui/src/components/verse.tsx
+++ b/packages/ui/src/components/verse.tsx
@@ -18,7 +18,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { getBibleTextErrorMessage } from '@/lib/bible-text-error';
 import { cn } from '@/lib/utils';
 import { type FontFamily } from '@/lib/verse-html-utils';
-import { YvStyles } from '@/lib/yv-styles';
+
 import { transformBibleHtml } from '@youversion/platform-core/browser';
 
 const LETTERS = 'abcdefghijklmnopqrstuvwxyz';
@@ -450,7 +450,6 @@ export const BibleTextView = forwardRef<HTMLDivElement, BibleTextViewProps>(
     if (currentLoading && !currentPassage) {
       return (
         <>
-          <YvStyles />
           <div
             ref={ref}
             data-yv-sdk
@@ -471,7 +470,6 @@ export const BibleTextView = forwardRef<HTMLDivElement, BibleTextViewProps>(
     if (currentError) {
       return (
         <>
-          <YvStyles />
           <div ref={ref} data-yv-sdk data-yv-theme={currentTheme}>
             <VerseUnavailableMessage message={getBibleTextErrorMessage(currentError)} />
           </div>
@@ -481,7 +479,6 @@ export const BibleTextView = forwardRef<HTMLDivElement, BibleTextViewProps>(
 
     return (
       <>
-        <YvStyles />
         <div
           data-yv-sdk
           data-yv-theme={currentTheme}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index ddcd0b9f..9304ceac 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -15,7 +15,9 @@ export {
 } from '@youversion/platform-core';
 
 export {
-  YouVersionProvider,
+  YouVersionProvider as BaseYouVersionProvider,
   useYVAuth,
   type UseYVAuthReturn,
 } from '@youversion/platform-react-hooks';
+
+export { YouVersionProvider } from './components/YouVersionProvider';

From 83eb2187ba4a0a1908cd1e42fb6f370b2d0eb4eb Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Fri, 24 Apr 2026 10:16:38 -0500
Subject: [PATCH 6/9] docs(ui): update README and AGENTS to reflect
 YouVersionProvider styling model

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 AGENTS.md             |  2 +-
 packages/ui/AGENTS.md |  4 ++--
 packages/ui/README.md | 12 ++++++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 5c0c2fc4..05a34bfe 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -98,7 +98,7 @@ pnpm --filter @youversion/platform-react-ui build
 
 **React 19.1.2 exact pinning**: pnpm overrides lock all React packages to exact version
 
-**Tailwind CSS injection**: Auto-injected as JS constant via tsup define (no build step needed by consumers)
+**Tailwind CSS injection**: Built CSS embedded as JS constant via tsup define, rendered by `YouVersionProvider` using React 19 `<style precedence>` (no build step needed by consumers)
 
 **Changeset workflow**: pnpm changeset → pnpm version-packages → pnpm release
 
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
index e9ff7229..29a1259e 100644
--- a/packages/ui/AGENTS.md
+++ b/packages/ui/AGENTS.md
@@ -42,7 +42,7 @@ src/index.ts           # Entry point (re-exports components, types, hooks)
 - tsup for bundling, tsc for type declarations
 
 ## STYLING
-**React 19 `<style precedence>`**: Each public component renders `<YvStyles />` (from `src/lib/yv-styles.tsx`) which outputs a `<style href="yv-sdk-styles" precedence="yv-sdk">` element. React handles hoisting to `<head>`, deduplication, SSR streaming, and Suspense integration.
+**React 19 `<style precedence>`**: The `YouVersionProvider` wrapper (in `src/components/YouVersionProvider.tsx`) renders `<YvStyles />` once, which outputs a `<style href="yv-sdk-styles" precedence="yv-sdk">` element. React handles hoisting to `<head>`, deduplication, SSR streaming, and Suspense integration. Individual components do NOT render `<YvStyles />` — it's centralized in the provider.
 - CSS embedded as `__YV_STYLES__` constant via tsup define
 - Built Tailwind CSS: `dist/tailwind.css` → embedded as JS string at build time
 - Static CSS also available via `import '@youversion/platform-react-ui/styles.css'` for non-React consumers
@@ -169,6 +169,6 @@ From repo root, `pnpm build` runs Turbo which builds in order:
 3. `@youversion/platform-react-ui` (build:css → build:js → build:types)
 
 ## CRITICAL
-- **No module side effects**: styles are rendered via React 19 `<style precedence>` in each component's render tree
+- **No module side effects**: styles are rendered via React 19 `<style precedence>` in the `YouVersionProvider` wrapper
 - Never skip build:css step (styles required for __YV_STYLES__ constant)
 - Always rebuild after CSS changes
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 7932b0af..7b10e3ae 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -41,6 +41,18 @@ function App() {
 }
 ```
 
+## Styling
+
+All component CSS is automatically injected when you wrap your app with `YouVersionProvider` — no extra imports or build steps needed. Under the hood, it uses React 19's [`<style precedence>`](https://react.dev/reference/react-dom/components/style) to hoist styles into `<head>` with built-in deduplication and SSR/Suspense support.
+
+**Non-React or manual CSS import:**
+
+```tsx
+import '@youversion/platform-react-ui/styles.css';
+```
+
+All component classes are prefixed with `yv:` to avoid collisions with your app's styles. Override design tokens with CSS variables on `[data-yv-sdk]` (see [Custom CSS variables](#custom-css-variables)).
+
 ## Theming
 
 Set the theme via the `YouVersionProvider`'s `theme` prop. Defaults to `'light'`.

From 16a10a0ac3433eb40e0e1706599ad617e140b668 Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Fri, 24 Apr 2026 10:28:53 -0500
Subject: [PATCH 7/9] fix: remove unecessary fragment wrapping component on our
 components

---
 .../src/components/YouVersionAuthButton.tsx   |  76 ++++---
 packages/ui/src/components/bible-card.tsx     |  86 ++++----
 .../src/components/bible-chapter-picker.tsx   | 201 +++++++++---------
 .../src/components/bible-version-picker.tsx   |  12 +-
 .../ui/src/components/verse-of-the-day.tsx    | 172 ++++++++-------
 packages/ui/src/components/verse.tsx          |  82 ++++---
 6 files changed, 303 insertions(+), 326 deletions(-)

diff --git a/packages/ui/src/components/YouVersionAuthButton.tsx b/packages/ui/src/components/YouVersionAuthButton.tsx
index f41d74b6..69688e03 100644
--- a/packages/ui/src/components/YouVersionAuthButton.tsx
+++ b/packages/ui/src/components/YouVersionAuthButton.tsx
@@ -178,48 +178,12 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
 
     if (size === 'icon') {
       return (
-        <>
-          <Button
-            {...props}
-            data-yv-sdk
-            data-yv-theme={theme}
-            className={cn(
-              'yv:shadow-none yv:p-3 yv:h-auto yv:w-fit',
-              variant === 'outline' ? 'yv:border' : 'yv:border-none',
-              theme === 'light' ? 'yv:text-black' : 'yv:text-white',
-              className,
-            )}
-            disabled={buttonLoading ? true : (disabled ?? false)}
-            ref={ref}
-            onClick={(e) => void handleClick(e)}
-            size="icon"
-            style={{
-              ...(radius === 'rectangular'
-                ? ({
-                    '--yv-radius': '0.65rem',
-                  } as React.CSSProperties)
-                : {}),
-              borderColor: theme === 'light' ? 'var(--yv-gray-15)' : 'var(--yv-gray-35)',
-              borderWidth: '1px',
-            }}
-            variant={'default'}
-          >
-            {buttonLoading ? loadingSpinner : null}
-            <YouVersionLogo />
-            <span className="yv:sr-only">{buttonText}</span>
-          </Button>
-        </>
-      );
-    }
-
-    return (
-      <>
         <Button
           {...props}
           data-yv-sdk
           data-yv-theme={theme}
           className={cn(
-            'yv:relative yv:shadow-none yv:w-fit',
+            'yv:shadow-none yv:p-3 yv:h-auto yv:w-fit',
             variant === 'outline' ? 'yv:border' : 'yv:border-none',
             theme === 'light' ? 'yv:text-black' : 'yv:text-white',
             className,
@@ -227,7 +191,7 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
           disabled={buttonLoading ? true : (disabled ?? false)}
           ref={ref}
           onClick={(e) => void handleClick(e)}
-          size="lg"
+          size="icon"
           style={{
             ...(radius === 'rectangular'
               ? ({
@@ -241,9 +205,41 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
         >
           {buttonLoading ? loadingSpinner : null}
           <YouVersionLogo />
-          {buttonText}
+          <span className="yv:sr-only">{buttonText}</span>
         </Button>
-      </>
+      );
+    }
+
+    return (
+      <Button
+        {...props}
+        data-yv-sdk
+        data-yv-theme={theme}
+        className={cn(
+          'yv:relative yv:shadow-none yv:w-fit',
+          variant === 'outline' ? 'yv:border' : 'yv:border-none',
+          theme === 'light' ? 'yv:text-black' : 'yv:text-white',
+          className,
+        )}
+        disabled={buttonLoading ? true : (disabled ?? false)}
+        ref={ref}
+        onClick={(e) => void handleClick(e)}
+        size="lg"
+        style={{
+          ...(radius === 'rectangular'
+            ? ({
+                '--yv-radius': '0.65rem',
+              } as React.CSSProperties)
+            : {}),
+          borderColor: theme === 'light' ? 'var(--yv-gray-15)' : 'var(--yv-gray-35)',
+          borderWidth: '1px',
+        }}
+        variant={'default'}
+      >
+        {buttonLoading ? loadingSpinner : null}
+        <YouVersionLogo />
+        {buttonText}
+      </Button>
     );
   },
 );
diff --git a/packages/ui/src/components/bible-card.tsx b/packages/ui/src/components/bible-card.tsx
index 52077729..fd47f71f 100644
--- a/packages/ui/src/components/bible-card.tsx
+++ b/packages/ui/src/components/bible-card.tsx
@@ -137,52 +137,50 @@ export function BibleCard({
   const showSpinner = useDelayedLoading(isRefetching);
 
   return (
-    <>
-      <section
-        data-yv-sdk
-        data-yv-theme={theme}
-        className="yv:w-full yv:flex yv:flex-col yv:grow yv:bg-card yv:p-6 yv:max-w-md yv:rounded-2xl"
-      >
-        <div className="yv:flex yv:w-full yv:justify-between yv:items-center yv:mb-4">
-          {passage && !passageError ? (
-            <div className="yv:grow yv:flex yv:items-center yv:gap-1.5">
-              <BibleCardHeaderReference passage={passage} version={version} />
-              {showSpinner ? (
-                <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
-              ) : null}
-            </div>
-          ) : passageError ? (
-            <BibleCardHeaderError />
-          ) : (
-            <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
-          )}
-
-          {showVersionPicker && !passageError ? (
-            <BibleCardVersionPicker
-              versionId={versionNum}
-              onVersionChange={setVersionNum}
-              theme={theme}
-            />
-          ) : null}
-        </div>
-
-        <AnimatedHeight>
-          <BibleTextView
-            theme={theme}
-            fontSize={16}
-            fontFamily={SOURCE_SERIF_FONT}
-            reference={reference}
+    <section
+      data-yv-sdk
+      data-yv-theme={theme}
+      className="yv:w-full yv:flex yv:flex-col yv:grow yv:bg-card yv:p-6 yv:max-w-md yv:rounded-2xl"
+    >
+      <div className="yv:flex yv:w-full yv:justify-between yv:items-center yv:mb-4">
+        {passage && !passageError ? (
+          <div className="yv:grow yv:flex yv:items-center yv:gap-1.5">
+            <BibleCardHeaderReference passage={passage} version={version} />
+            {showSpinner ? (
+              <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
+            ) : null}
+          </div>
+        ) : passageError ? (
+          <BibleCardHeaderError />
+        ) : (
+          <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
+        )}
+
+        {showVersionPicker && !passageError ? (
+          <BibleCardVersionPicker
             versionId={versionNum}
-            passageState={{
-              passage,
-              loading: passageLoading,
-              error: passageError,
-            }}
+            onVersionChange={setVersionNum}
+            theme={theme}
           />
-        </AnimatedHeight>
+        ) : null}
+      </div>
 
-        <BibleCardFooter copyright={!passageError ? version?.copyright : null} />
-      </section>
-    </>
+      <AnimatedHeight>
+        <BibleTextView
+          theme={theme}
+          fontSize={16}
+          fontFamily={SOURCE_SERIF_FONT}
+          reference={reference}
+          versionId={versionNum}
+          passageState={{
+            passage,
+            loading: passageLoading,
+            error: passageError,
+          }}
+        />
+      </AnimatedHeight>
+
+      <BibleCardFooter copyright={!passageError ? version?.copyright : null} />
+    </section>
   );
 }
diff --git a/packages/ui/src/components/bible-chapter-picker.tsx b/packages/ui/src/components/bible-chapter-picker.tsx
index e64fa9c6..67066b8a 100644
--- a/packages/ui/src/components/bible-chapter-picker.tsx
+++ b/packages/ui/src/components/bible-chapter-picker.tsx
@@ -134,122 +134,115 @@ function Root({
   };
 
   return (
-    <>
-      <Popover>
-        <BibleChapterPickerContext.Provider
-          value={{
-            book,
-            chapter,
-            setBook,
-            setChapter,
-            versionId,
-            background: theme,
-            scrollToCurrentBook,
-          }}
-        >
-          {children}
+    <Popover>
+      <BibleChapterPickerContext.Provider
+        value={{
+          book,
+          chapter,
+          setBook,
+          setChapter,
+          versionId,
+          background: theme,
+          scrollToCurrentBook,
+        }}
+      >
+        {children}
 
-          {/* data-yv-sdk for styles is needed because the popover gets rendered outside of the providers scope **/}
-          <PopoverContent sideOffset={16} heading="Books" theme={theme} side="top">
-            <Accordion
-              className="yv:relative yv:overflow-y-auto yv:bg-background yv:px-6"
-              type="single"
-              collapsible
-              defaultValue={defaultBook || book || 'GEN'}
-              onValueChange={setExpandedBook}
-            >
-              {filteredBooks && filteredBooks.length > 0 ? (
-                filteredBooks.map((bookItem) => (
-                  <AccordionItem
-                    className="yv:border-b yv:border-border"
-                    key={bookItem.id}
-                    value={bookItem.id}
-                    id={bookItem.id}
-                    ref={(node) => {
-                      if (node) {
-                        bookElementsRef.current[bookItem.id] = node;
-                      } else {
-                        delete bookElementsRef.current[bookItem.id];
-                      }
-                    }}
-                  >
-                    <AccordionTrigger className="yv:rounded-none">
-                      {bookItem.title}
-                    </AccordionTrigger>
-                    <AccordionContent>
-                      {bookItem.chapters && bookItem.chapters.length > 0 ? (
-                        <div className="yv:grid yv:grid-cols-5 yv:gap-2">
-                          {bookItem.intro?.id && bookItem.intro?.passage_id ? (
-                            <PopoverClose
-                              asChild
-                              key={`${bookItem.id}-${bookItem.intro.passage_id}`}
+        {/* data-yv-sdk for styles is needed because the popover gets rendered outside of the providers scope **/}
+        <PopoverContent sideOffset={16} heading="Books" theme={theme} side="top">
+          <Accordion
+            className="yv:relative yv:overflow-y-auto yv:bg-background yv:px-6"
+            type="single"
+            collapsible
+            defaultValue={defaultBook || book || 'GEN'}
+            onValueChange={setExpandedBook}
+          >
+            {filteredBooks && filteredBooks.length > 0 ? (
+              filteredBooks.map((bookItem) => (
+                <AccordionItem
+                  className="yv:border-b yv:border-border"
+                  key={bookItem.id}
+                  value={bookItem.id}
+                  id={bookItem.id}
+                  ref={(node) => {
+                    if (node) {
+                      bookElementsRef.current[bookItem.id] = node;
+                    } else {
+                      delete bookElementsRef.current[bookItem.id];
+                    }
+                  }}
+                >
+                  <AccordionTrigger className="yv:rounded-none">{bookItem.title}</AccordionTrigger>
+                  <AccordionContent>
+                    {bookItem.chapters && bookItem.chapters.length > 0 ? (
+                      <div className="yv:grid yv:grid-cols-5 yv:gap-2">
+                        {bookItem.intro?.id && bookItem.intro?.passage_id ? (
+                          <PopoverClose asChild key={`${bookItem.id}-${bookItem.intro.passage_id}`}>
+                            <Button
+                              variant="secondary"
+                              size="icon"
+                              className="yv:aspect-square yv:w-full yv:h-full yv:flex yv:items-center yv:justify-center yv:rounded-[4px]"
+                              onClick={() =>
+                                handleChapterButtonClick(
+                                  bookItem.id,
+                                  bookItem.intro?.passage_id || '',
+                                )
+                              }
                             >
+                              <InfoIcon />
+                            </Button>
+                          </PopoverClose>
+                        ) : null}
+                        {bookItem.chapters.map((chapterRef) => {
+                          const chapterId = chapterRef.passage_id.split('.').pop() || '';
+                          return (
+                            <PopoverClose asChild key={`${bookItem.id}-${chapterRef.passage_id}`}>
                               <Button
                                 variant="secondary"
                                 size="icon"
                                 className="yv:aspect-square yv:w-full yv:h-full yv:flex yv:items-center yv:justify-center yv:rounded-[4px]"
                                 onClick={() =>
-                                  handleChapterButtonClick(
-                                    bookItem.id,
-                                    bookItem.intro?.passage_id || '',
-                                  )
+                                  handleChapterButtonClick(bookItem.id, chapterRef.passage_id)
                                 }
                               >
-                                <InfoIcon />
+                                {chapterId}
                               </Button>
                             </PopoverClose>
-                          ) : null}
-                          {bookItem.chapters.map((chapterRef) => {
-                            const chapterId = chapterRef.passage_id.split('.').pop() || '';
-                            return (
-                              <PopoverClose asChild key={`${bookItem.id}-${chapterRef.passage_id}`}>
-                                <Button
-                                  variant="secondary"
-                                  size="icon"
-                                  className="yv:aspect-square yv:w-full yv:h-full yv:flex yv:items-center yv:justify-center yv:rounded-[4px]"
-                                  onClick={() =>
-                                    handleChapterButtonClick(bookItem.id, chapterRef.passage_id)
-                                  }
-                                >
-                                  {chapterId}
-                                </Button>
-                              </PopoverClose>
-                            );
-                          })}
-                        </div>
-                      ) : (
-                        <div className="yv:w-full yv:flex yv:items-center yv:justify-center yv:py-4 yv:text-muted-foreground yv:text-sm">
-                          No chapters available
-                        </div>
-                      )}
-                    </AccordionContent>
-                  </AccordionItem>
-                ))
-              ) : (
-                <div className="yv:w-full yv:h-full yv:flex yv:items-center yv:justify-center yv:py-4 yv:text-center yv:text-balance yv:text-muted-foreground yv:text-sm">
-                  We're sorry, there are no Bible results for this search.
-                </div>
-              )}
-            </Accordion>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <div className="yv:w-full yv:flex yv:items-center yv:justify-center yv:py-4 yv:text-muted-foreground yv:text-sm">
+                        No chapters available
+                      </div>
+                    )}
+                  </AccordionContent>
+                </AccordionItem>
+              ))
+            ) : (
+              <div className="yv:w-full yv:h-full yv:flex yv:items-center yv:justify-center yv:py-4 yv:text-center yv:text-balance yv:text-muted-foreground yv:text-sm">
+                We're sorry, there are no Bible results for this search.
+              </div>
+            )}
+          </Accordion>
 
-            <section className="yv:bg-muted yv:border-s yv:border-muted yv:p-4 yv:w-full">
-              <InputGroup className="yv:rounded-3xl yv:bg-background yv:shadow-none yv:border-border">
-                <InputGroupInput
-                  tabIndex={1}
-                  type="text"
-                  placeholder="Search"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                />
-                <InputGroupAddon align="inline-start">
-                  <SearchIcon className="yv:size-5 yv:text-muted-foreground" />
-                </InputGroupAddon>
-              </InputGroup>
-            </section>
-          </PopoverContent>
-        </BibleChapterPickerContext.Provider>
-      </Popover>
-    </>
+          <section className="yv:bg-muted yv:border-s yv:border-muted yv:p-4 yv:w-full">
+            <InputGroup className="yv:rounded-3xl yv:bg-background yv:shadow-none yv:border-border">
+              <InputGroupInput
+                tabIndex={1}
+                type="text"
+                placeholder="Search"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+              <InputGroupAddon align="inline-start">
+                <SearchIcon className="yv:size-5 yv:text-muted-foreground" />
+              </InputGroupAddon>
+            </InputGroup>
+          </section>
+        </PopoverContent>
+      </BibleChapterPickerContext.Provider>
+    </Popover>
   );
 }
 
diff --git a/packages/ui/src/components/bible-version-picker.tsx b/packages/ui/src/components/bible-version-picker.tsx
index 2d5ff834..fce4c227 100644
--- a/packages/ui/src/components/bible-version-picker.tsx
+++ b/packages/ui/src/components/bible-version-picker.tsx
@@ -317,13 +317,11 @@ function Root({
   };
 
   return (
-    <>
-      <BibleVersionPickerContext.Provider value={contextValue}>
-        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-          {children}
-        </Popover>
-      </BibleVersionPickerContext.Provider>
-    </>
+    <BibleVersionPickerContext.Provider value={contextValue}>
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+        {children}
+      </Popover>
+    </BibleVersionPickerContext.Provider>
   );
 }
 
diff --git a/packages/ui/src/components/verse-of-the-day.tsx b/packages/ui/src/components/verse-of-the-day.tsx
index 78fa3bc2..cdbf8e8e 100644
--- a/packages/ui/src/components/verse-of-the-day.tsx
+++ b/packages/ui/src/components/verse-of-the-day.tsx
@@ -127,99 +127,97 @@ export function VerseOfTheDay({
   };
 
   return (
-    <>
-      <section
-        data-yv-sdk
-        data-yv-theme={theme}
-        data-size={size}
-        className={
-          'yv:data-[size=lg]:p-8 yv:data-[size=default]:p-4 yv:*:shrink-0 yv:font-sans yv:flex yv:flex-col yv:gap-3 yv:w-full yv:grow yv:max-w-md yv:p-4 yv:rounded-2xl yv:bg-card'
-        }
-      >
-        <div className="yv:flex yv:items-center yv:gap-2 yv:text-black yv:dark:text-white">
-          {showSunIcon ? (
-            <div
-              data-slot="card-icon"
-              className="yv:col-start-1 yv:row-start-1 yv:self-start yv:justify-self-start"
-            >
-              <Votd className="yv:shrink-0 yv:h-10 yv:w-10" />
-            </div>
-          ) : null}
-          <div className="yv:grow yv:grid">
-            <p
-              className={
-                'trim-both yv:line-clamp-1 yv:text-muted-foreground yv:uppercase yv:text-xs yv:font-medium yv:select-none'
-              }
-            >
-              {t('verseOfTheDay')}
-            </p>
+    <section
+      data-yv-sdk
+      data-yv-theme={theme}
+      data-size={size}
+      className={
+        'yv:data-[size=lg]:p-8 yv:data-[size=default]:p-4 yv:*:shrink-0 yv:font-sans yv:flex yv:flex-col yv:gap-3 yv:w-full yv:grow yv:max-w-md yv:p-4 yv:rounded-2xl yv:bg-card'
+      }
+    >
+      <div className="yv:flex yv:items-center yv:gap-2 yv:text-black yv:dark:text-white">
+        {showSunIcon ? (
+          <div
+            data-slot="card-icon"
+            className="yv:col-start-1 yv:row-start-1 yv:self-start yv:justify-self-start"
+          >
+            <Votd className="yv:shrink-0 yv:h-10 yv:w-10" />
           </div>
-          {showShareButton ? (
-            <div
-              data-slot="card-action"
-              className="yv:col-start-2 yv:row-span-2 yv:row-start-1 yv:self-start yv:justify-self-end"
-            >
-              <Button
-                aria-label="Share"
-                className={cn(size === 'lg' ? 'yv:translate-x-3' : 'yv:translate-x-2')}
-                onClick={() => void handleShareVerse()}
-                disabled={!!(errorPassage || errorVerseOfTheDay)}
-                size="icon"
-                variant="ghost"
-              >
-                <Share className="yv:h-6! yv:w-6!" />
-              </Button>
-            </div>
-          ) : null}
+        ) : null}
+        <div className="yv:grow yv:grid">
+          <p
+            className={
+              'trim-both yv:line-clamp-1 yv:text-muted-foreground yv:uppercase yv:text-xs yv:font-medium yv:select-none'
+            }
+          >
+            {t('verseOfTheDay')}
+          </p>
         </div>
-
-        <AnimatedHeight>
-          {isLoading ? (
-            <div
-              className="yv:flex yv:justify-center yv:py-2"
-              role="status"
-              aria-label="Loading verse"
+        {showShareButton ? (
+          <div
+            data-slot="card-action"
+            className="yv:col-start-2 yv:row-span-2 yv:row-start-1 yv:self-start yv:justify-self-end"
+          >
+            <Button
+              aria-label="Share"
+              className={cn(size === 'lg' ? 'yv:translate-x-3' : 'yv:translate-x-2')}
+              onClick={() => void handleShareVerse()}
+              disabled={!!(errorPassage || errorVerseOfTheDay)}
+              size="icon"
+              variant="ghost"
             >
-              <LoaderIcon
-                className="yv:size-4 yv:animate-spin yv:text-muted-foreground"
-                aria-hidden="true"
-              />
-            </div>
-          ) : (
-            <div className="yv:flex yv:flex-col yv:gap-2">
-              <BibleTextView
-                ref={verseRef}
-                theme={theme}
-                reference={data?.passage_id || ''}
-                versionId={versionId}
-                fontSize={size === 'default' ? 16 : 20}
-                fontFamily={size === 'default' ? 'var(--yv-font-sans)' : 'var(--yv-font-serif)'}
-                passageState={{
-                  passage,
-                  loading: isLoading,
-                  error: errorPassage || errorVerseOfTheDay || null,
-                }}
-              />
-
-              {errorPassage || errorVerseOfTheDay ? null : (
-                <p className="yv:text-muted-foreground yv:font-medium yv:text-sm yv:mt-3">
-                  {referenceText}
-                </p>
-              )}
-            </div>
-          )}
-        </AnimatedHeight>
+              <Share className="yv:h-6! yv:w-6!" />
+            </Button>
+          </div>
+        ) : null}
+      </div>
 
-        {showBibleAppAttribution ? (
+      <AnimatedHeight>
+        {isLoading ? (
           <div
-            className={
-              'yv:grid yv:grid-cols-1 yv:mt-4 yv:justify-between yv:items-center yv:gap-2 yv:w-full'
-            }
+            className="yv:flex yv:justify-center yv:py-2"
+            role="status"
+            aria-label="Loading verse"
           >
-            <BibleAppLogoLockup data-slot="attribution" className="yv:justify-self-end" />
+            <LoaderIcon
+              className="yv:size-4 yv:animate-spin yv:text-muted-foreground"
+              aria-hidden="true"
+            />
           </div>
-        ) : null}
-      </section>
-    </>
+        ) : (
+          <div className="yv:flex yv:flex-col yv:gap-2">
+            <BibleTextView
+              ref={verseRef}
+              theme={theme}
+              reference={data?.passage_id || ''}
+              versionId={versionId}
+              fontSize={size === 'default' ? 16 : 20}
+              fontFamily={size === 'default' ? 'var(--yv-font-sans)' : 'var(--yv-font-serif)'}
+              passageState={{
+                passage,
+                loading: isLoading,
+                error: errorPassage || errorVerseOfTheDay || null,
+              }}
+            />
+
+            {errorPassage || errorVerseOfTheDay ? null : (
+              <p className="yv:text-muted-foreground yv:font-medium yv:text-sm yv:mt-3">
+                {referenceText}
+              </p>
+            )}
+          </div>
+        )}
+      </AnimatedHeight>
+
+      {showBibleAppAttribution ? (
+        <div
+          className={
+            'yv:grid yv:grid-cols-1 yv:mt-4 yv:justify-between yv:items-center yv:gap-2 yv:w-full'
+          }
+        >
+          <BibleAppLogoLockup data-slot="attribution" className="yv:justify-self-end" />
+        </div>
+      ) : null}
+    </section>
   );
 }
diff --git a/packages/ui/src/components/verse.tsx b/packages/ui/src/components/verse.tsx
index 8bfddacb..8bc8863f 100644
--- a/packages/ui/src/components/verse.tsx
+++ b/packages/ui/src/components/verse.tsx
@@ -449,59 +449,53 @@ export const BibleTextView = forwardRef<HTMLDivElement, BibleTextViewProps>(
 
     if (currentLoading && !currentPassage) {
       return (
-        <>
-          <div
-            ref={ref}
-            data-yv-sdk
-            data-yv-theme={currentTheme}
-            role="status"
-            aria-label="Loading passage"
-            className="yv:flex yv:grow yv:items-center yv:justify-center"
-          >
-            <LoaderIcon
-              className="yv:size-4 yv:animate-spin yv:text-muted-foreground"
-              aria-hidden="true"
-            />
-          </div>
-        </>
+        <div
+          ref={ref}
+          data-yv-sdk
+          data-yv-theme={currentTheme}
+          role="status"
+          aria-label="Loading passage"
+          className="yv:flex yv:grow yv:items-center yv:justify-center"
+        >
+          <LoaderIcon
+            className="yv:size-4 yv:animate-spin yv:text-muted-foreground"
+            aria-hidden="true"
+          />
+        </div>
       );
     }
 
     if (currentError) {
       return (
-        <>
-          <div ref={ref} data-yv-sdk data-yv-theme={currentTheme}>
-            <VerseUnavailableMessage message={getBibleTextErrorMessage(currentError)} />
-          </div>
-        </>
+        <div ref={ref} data-yv-sdk data-yv-theme={currentTheme}>
+          <VerseUnavailableMessage message={getBibleTextErrorMessage(currentError)} />
+        </div>
       );
     }
 
     return (
-      <>
-        <div
-          data-yv-sdk
-          data-yv-theme={currentTheme}
-          className={cn(fetchedLoading || currentLoading ? 'yv:animate-pulse' : '')}
-          aria-busy={currentLoading || undefined}
-          style={currentLoading ? { pointerEvents: 'none' } : undefined}
-        >
-          <Verse.Html
-            ref={ref}
-            html={currentPassage?.content || ''}
-            fontFamily={fontFamily}
-            fontSize={fontSize}
-            lineHeight={lineHeight}
-            showVerseNumbers={showVerseNumbers}
-            renderNotes={renderNotes}
-            reference={currentPassage?.reference}
-            theme={currentTheme}
-            selectedVerses={selectedVerses}
-            onVerseSelect={onVerseSelect}
-            highlightedVerses={highlightedVerses}
-          />
-        </div>
-      </>
+      <div
+        data-yv-sdk
+        data-yv-theme={currentTheme}
+        className={cn(fetchedLoading || currentLoading ? 'yv:animate-pulse' : '')}
+        aria-busy={currentLoading || undefined}
+        style={currentLoading ? { pointerEvents: 'none' } : undefined}
+      >
+        <Verse.Html
+          ref={ref}
+          html={currentPassage?.content || ''}
+          fontFamily={fontFamily}
+          fontSize={fontSize}
+          lineHeight={lineHeight}
+          showVerseNumbers={showVerseNumbers}
+          renderNotes={renderNotes}
+          reference={currentPassage?.reference}
+          theme={currentTheme}
+          selectedVerses={selectedVerses}
+          onVerseSelect={onVerseSelect}
+          highlightedVerses={highlightedVerses}
+        />
+      </div>
     );
   },
 );

From 644cdd4d09cd9ebbafc82601c3c55f05b8f31818 Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Fri, 24 Apr 2026 10:32:11 -0500
Subject: [PATCH 8/9] Added changeset

---
 .changeset/replace-inject-styles-with-style-precedence.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/replace-inject-styles-with-style-precedence.md

diff --git a/.changeset/replace-inject-styles-with-style-precedence.md b/.changeset/replace-inject-styles-with-style-precedence.md
new file mode 100644
index 00000000..82e8c2df
--- /dev/null
+++ b/.changeset/replace-inject-styles-with-style-precedence.md
@@ -0,0 +1,7 @@
+---
+'@youversion/platform-core': minor
+'@youversion/platform-react-hooks': minor
+'@youversion/platform-react-ui': minor
+---
+
+Replace module-level injectStyles() side effect with React 19 style precedence hoisting via YouVersionProvider. Styles are now injected once at the provider level instead of per-component. Add static CSS export at @youversion/platform-react-ui/styles.css for non-React consumers.

From f3e48c737b86c130b3cfacd2e71fc614e959ed41 Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Fri, 24 Apr 2026 10:41:50 -0500
Subject: [PATCH 9/9] Update changeset message

---
 .changeset/replace-inject-styles-with-style-precedence.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/replace-inject-styles-with-style-precedence.md b/.changeset/replace-inject-styles-with-style-precedence.md
index 82e8c2df..31d64620 100644
--- a/.changeset/replace-inject-styles-with-style-precedence.md
+++ b/.changeset/replace-inject-styles-with-style-precedence.md
@@ -4,4 +4,4 @@
 '@youversion/platform-react-ui': minor
 ---
 
-Replace module-level injectStyles() side effect with React 19 style precedence hoisting via YouVersionProvider. Styles are now injected once at the provider level instead of per-component. Add static CSS export at @youversion/platform-react-ui/styles.css for non-React consumers.
+Replace module-level injectStyles() side effect with React 19 style precedence hoisting via YouVersionProvider. Add static CSS export at @youversion/platform-react-ui/styles.css for non-React consumers.
