diff --git a/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-chapter-control.component.tsx b/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-chapter-control.component.tsx
index 2de0da7db4..0c25bf9eab 100644
--- a/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-chapter-control.component.tsx
+++ b/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-chapter-control.component.tsx
@@ -5,12 +5,13 @@ import BookMenuItem, {
 import ChapterSelect from '@/components/advanced/book-chapter-control/chapter-select.component';
 import GoToMenuItem from '@/components/advanced/book-chapter-control/go-to-menu-item.component';
 import {
-  DropdownMenu as ShadDropdownMenu,
-  DropdownMenuContent as ShadDropdownMenuContent,
-  DropdownMenuLabel as ShadDropdownMenuLabel,
-  DropdownMenuSeparator as ShadDropdownMenuSeparator,
-  DropdownMenuTrigger as ShadDropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from '@/components/shadcn-ui/dropdown-menu';
+import { cn } from '@/utils/shadcn-ui.util';
 import { Canon } from '@sillsdev/scripture';
 import { ScriptureReference, getChaptersForBook } from 'platform-bible-utils';
 import {
@@ -28,6 +29,8 @@ type BookTypeLabels = {
 type BookChapterControlProps = {
   scrRef: ScriptureReference;
   handleSubmit: (scrRef: ScriptureReference) => void;
+  /** Text and layout direction */
+  direction?: 'rtl' | 'ltr';
 };
 
 const ALL_BOOK_IDS = Canon.allBookIds;
@@ -101,7 +104,7 @@ function getBookIdFromEnglishName(bookName: string): string | undefined {
   return undefined;
 }
 
-function BookChapterControl({ scrRef, handleSubmit }: BookChapterControlProps) {
+function BookChapterControl({ scrRef, handleSubmit, direction }: BookChapterControlProps) {
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [selectedBookId, setSelectedBookId] = useState<string>(
     Canon.bookNumberToId(scrRef.bookNum),
@@ -259,15 +262,23 @@ function BookChapterControl({ scrRef, handleSubmit }: BookChapterControlProps) {
         return;
       }
 
+      const upOneChapter =
+        (key === 'ArrowRight' && !direction) ||
+        (key === 'ArrowRight' && direction === 'ltr') ||
+        (key === 'ArrowLeft' && direction === 'rtl');
+      const downOneChapter =
+        (key === 'ArrowLeft' && !direction) ||
+        (key === 'ArrowLeft' && direction === 'ltr') ||
+        (key === 'ArrowRight' && direction === 'rtl');
       let chapterOffSet = 0;
-      if (key === 'ArrowRight') {
+      if (upOneChapter) {
         if (highlightedChapter < fetchEndChapter(highlightedBookId)) {
           chapterOffSet = 1;
         } else {
           event.preventDefault();
           return;
         }
-      } else if (key === 'ArrowLeft') {
+      } else if (downOneChapter) {
         if (highlightedChapter > 1) {
           chapterOffSet = -1;
         } else {
@@ -324,8 +335,8 @@ function BookChapterControl({ scrRef, handleSubmit }: BookChapterControlProps) {
 
   return (
     <div className="pr-twp tw-flex">
-      <ShadDropdownMenu modal={false} open={isContentOpen} onOpenChange={controlMenuState}>
-        <ShadDropdownMenuTrigger asChild>
+      <DropdownMenu modal={false} open={isContentOpen} onOpenChange={controlMenuState}>
+        <DropdownMenuTrigger asChild>
           <BookChapterInput
             ref={inputRef}
             value={searchQuery}
@@ -344,65 +355,72 @@ function BookChapterControl({ scrRef, handleSubmit }: BookChapterControlProps) {
             }}
             handleSubmit={handleInputSubmit}
             placeholder={`${Canon.bookNumberToEnglishName(scrRef.bookNum)} ${scrRef.chapterNum}:${scrRef.verseNum}`}
+            direction={direction}
           />
-        </ShadDropdownMenuTrigger>
-        <ShadDropdownMenuContent
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
           className="tw-m-1 tw-overflow-y-auto tw-p-0 tw-font-normal tw-text-foreground/80"
           // Need to get over the floating window z-index 200
           style={{ width: '233px', maxHeight: '500px', zIndex: '250' }}
           onKeyDown={handleKeyDownContent}
-          align="start"
+          align={direction === 'ltr' ? 'start' : 'end'}
           ref={contentRef}
         >
-          <GoToMenuItem
-            handleSort={() => console.log('sorting')}
-            handleLocationHistory={() => console.log('location history')}
-            handleBookmarks={() => console.log('bookmarks')}
-          />
-          {BOOK_TYPE_ARRAY.map(
-            (bookType, bookTypeIndex) =>
-              fetchFilteredBooks(bookType).length > 0 && (
-                <div key={bookType}>
-                  <ShadDropdownMenuLabel className="tw-font-semibold tw-text-foreground/80">
-                    {BOOK_TYPE_LABELS[bookType]}
-                  </ShadDropdownMenuLabel>
+          {/* work around until DropdownMenuContent supports a dir prop */}
+          <div dir={direction} className={cn({ 'tw-ps-2': direction === 'rtl' })}>
+            <GoToMenuItem
+              handleSort={() => console.log('sorting')}
+              handleLocationHistory={() => console.log('location history')}
+              handleBookmarks={() => console.log('bookmarks')}
+            />
+            {BOOK_TYPE_ARRAY.map(
+              (bookType, bookTypeIndex) =>
+                fetchFilteredBooks(bookType).length > 0 && (
+                  <div key={bookType}>
+                    <DropdownMenuLabel className="tw-font-semibold tw-text-foreground/80">
+                      {BOOK_TYPE_LABELS[bookType]}
+                    </DropdownMenuLabel>
 
-                  {fetchFilteredBooks(bookType).map((bookId) => (
-                    <div key={bookId}>
-                      <BookMenuItem
-                        bookId={bookId}
-                        handleSelectBook={() => updateReference(bookId, false)}
-                        isSelected={selectedBookId === bookId}
-                        handleHighlightBook={() => setHighlightedBookId(bookId)}
-                        handleKeyDown={handleKeyDownMenuItem}
-                        bookType={bookType}
-                        ref={(element: HTMLDivElement) => {
-                          if (selectedBookId === bookId) menuItemRef.current = element;
-                        }}
-                      >
-                        <ChapterSelect
-                          handleSelectChapter={handleSelectChapter}
-                          endChapter={fetchEndChapter(bookId)}
-                          // Without this condition- will highlight that chapterNum in every book- not just the selected book
-                          activeChapter={
-                            scrRef.bookNum === Canon.bookIdToNumber(bookId) ? scrRef.chapterNum : 0
-                          }
-                          highlightedChapter={highlightedChapter}
-                          handleHighlightedChapter={(chapterNumber: number): void => {
-                            setHighlightedChapter(chapterNumber);
+                    {fetchFilteredBooks(bookType).map((bookId) => (
+                      <div key={bookId}>
+                        <BookMenuItem
+                          bookId={bookId}
+                          handleSelectBook={() => updateReference(bookId, false)}
+                          isSelected={selectedBookId === bookId}
+                          handleHighlightBook={() => setHighlightedBookId(bookId)}
+                          handleKeyDown={handleKeyDownMenuItem}
+                          bookType={bookType}
+                          ref={(element: HTMLDivElement) => {
+                            if (selectedBookId === bookId) menuItemRef.current = element;
                           }}
-                        />
-                      </BookMenuItem>
-                    </div>
-                  ))}
-                  {BOOK_TYPE_ARRAY.length - 1 !== bookTypeIndex ? (
-                    <ShadDropdownMenuSeparator />
-                  ) : undefined}
-                </div>
-              ),
-          )}
-        </ShadDropdownMenuContent>
-      </ShadDropdownMenu>
+                          direction={direction}
+                        >
+                          <ChapterSelect
+                            handleSelectChapter={handleSelectChapter}
+                            endChapter={fetchEndChapter(bookId)}
+                            // Without this condition- will highlight that chapterNum in every book- not just the selected book
+                            activeChapter={
+                              scrRef.bookNum === Canon.bookIdToNumber(bookId)
+                                ? scrRef.chapterNum
+                                : 0
+                            }
+                            highlightedChapter={highlightedChapter}
+                            handleHighlightedChapter={(chapterNumber: number): void => {
+                              setHighlightedChapter(chapterNumber);
+                            }}
+                          />
+                        </BookMenuItem>
+                      </div>
+                    ))}
+                    {BOOK_TYPE_ARRAY.length - 1 !== bookTypeIndex ? (
+                      <DropdownMenuSeparator />
+                    ) : undefined}
+                  </div>
+                ),
+            )}
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   );
 }
diff --git a/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-chapter-input.component.tsx b/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-chapter-input.component.tsx
index d7c885f3d2..36e4a5daf5 100644
--- a/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-chapter-input.component.tsx
+++ b/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-chapter-input.component.tsx
@@ -1,6 +1,7 @@
 import { FocusEventHandler, forwardRef, KeyboardEvent, MouseEventHandler } from 'react';
 import { History } from 'lucide-react';
-import { Input as ShadInput } from '@/components/shadcn-ui/input';
+import { Input } from '@/components/shadcn-ui/input';
+import { cn } from '@/utils/shadcn-ui.util';
 
 export type BookChapterInputProps = {
   handleSearch: (searchString: string) => void;
@@ -10,20 +11,31 @@ export type BookChapterInputProps = {
   onFocus?: FocusEventHandler<HTMLInputElement>;
   value: string;
   placeholder: string;
+  /** Text and layout direction */
+  direction?: 'rtl' | 'ltr';
 };
 
 // Shadcn Input sets type to "button"- HAVE to prop spread before setting type
 const BookChapterInput = forwardRef<HTMLInputElement, BookChapterInputProps>(
   (
-    { handleSearch, handleKeyDown, handleOnClick, handleSubmit, ...props }: BookChapterInputProps,
+    {
+      handleSearch,
+      handleKeyDown,
+      handleOnClick,
+      handleSubmit,
+      direction = 'ltr',
+      ...props
+    }: BookChapterInputProps,
     ref,
   ) => {
     return (
       <div className="tw-relative">
-        <ShadInput
+        <Input
           {...props}
           type="text"
-          className="tw-box-border tw-gap-2.5 tw-rounded-lg tw-border tw-border-solid tw-bg-background tw-py-2 tw-pl-4 tw-pr-3 tw-font-medium tw-shadow-none tw-outline-none"
+          className={cn(
+            'tw-box-border tw-w-[200px] tw-gap-2.5 tw-rounded-lg tw-border tw-border-solid tw-bg-background tw-py-2 tw-pe-9 tw-ps-4 tw-font-medium tw-shadow-none tw-outline-none',
+          )}
           onChange={(event) => handleSearch(event.target.value)}
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
@@ -35,7 +47,11 @@ const BookChapterInput = forwardRef<HTMLInputElement, BookChapterInputProps>(
           ref={ref}
         />
         <History
-          className="tw-absolute tw-right-3 tw-top-1/2 tw-h-4 tw-w-4 tw--translate-y-1/2 tw-transform tw-cursor-pointer tw-text-muted-foreground"
+          className={cn(
+            'tw-absolute tw-top-1/2 tw-h-4 tw-w-4 tw--translate-y-1/2 tw-transform tw-cursor-pointer tw-text-muted-foreground',
+            { 'tw-right-3': direction === 'ltr' },
+            { 'tw-left-3 tw-right-auto': direction === 'rtl' },
+          )}
           onClick={() => {
             // eslint-disable-next-line no-console
             console.log('back in history');
diff --git a/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-menu-item.component.tsx b/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-menu-item.component.tsx
index 5eecea3f98..e8b70d3512 100644
--- a/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-menu-item.component.tsx
+++ b/lib/platform-bible-react/src/components/advanced/book-chapter-control/book-menu-item.component.tsx
@@ -1,6 +1,6 @@
 import { Canon } from '@sillsdev/scripture';
 import { PropsWithChildren, KeyboardEvent, forwardRef } from 'react';
-import { DropdownMenuItem as ShadDropdownMenuItem } from '@/components/shadcn-ui/dropdown-menu';
+import { DropdownMenuItem } from '@/components/shadcn-ui/dropdown-menu';
 import { cn } from '@/utils/shadcn-ui.util';
 
 export type BookType = 'OT' | 'NT' | 'DC';
@@ -25,6 +25,8 @@ type BookMenuItemProps = PropsWithChildren<{
    * coordinated to genre
    */
   bookType: BookType;
+  /** Text and layout direction */
+  direction?: 'rtl' | 'ltr';
 }>;
 
 const BookMenuItem = forwardRef<HTMLDivElement, BookMenuItemProps>(
@@ -37,11 +39,12 @@ const BookMenuItem = forwardRef<HTMLDivElement, BookMenuItemProps>(
       handleKeyDown,
       bookType,
       children,
+      direction,
     }: BookMenuItemProps,
     ref,
   ) => {
     return (
-      <ShadDropdownMenuItem
+      <DropdownMenuItem
         ref={ref}
         key={bookId}
         textValue={bookId}
@@ -59,22 +62,23 @@ const BookMenuItem = forwardRef<HTMLDivElement, BookMenuItemProps>(
         }}
         onFocus={handleHighlightBook}
         onMouseMove={handleHighlightBook}
+        dir={direction}
       >
         <span
           className={cn(
-            'tw-border-b-0 tw-border-l-2 tw-border-r-0 tw-border-t-0 tw-border-solid tw-px-2',
+            'tw-border-b-0 tw-border-e-0 tw-border-s-2 tw-border-t-0 tw-border-solid tw-px-2',
             {
               'tw-font-bold': isSelected,
-              'tw-border-l-red-200': bookType.toLowerCase() === 'ot',
-              'tw-border-l-purple-200': bookType.toLowerCase() === 'nt',
-              'tw-border-l-indigo-200': bookType.toLowerCase() === 'dc',
+              'tw-border-s-red-200': bookType.toLowerCase() === 'ot',
+              'tw-border-s-purple-200': bookType.toLowerCase() === 'nt',
+              'tw-border-s-indigo-200': bookType.toLowerCase() === 'dc',
             },
           )}
         >
           {Canon.bookIdToEnglishName(bookId)}
         </span>
         {isSelected && <div>{children}</div>}
-      </ShadDropdownMenuItem>
+      </DropdownMenuItem>
     );
   },
 );
diff --git a/lib/platform-bible-react/src/components/advanced/book-chapter-control/go-to-menu-item.component.tsx b/lib/platform-bible-react/src/components/advanced/book-chapter-control/go-to-menu-item.component.tsx
index 29b95460aa..8ed2dc23ec 100644
--- a/lib/platform-bible-react/src/components/advanced/book-chapter-control/go-to-menu-item.component.tsx
+++ b/lib/platform-bible-react/src/components/advanced/book-chapter-control/go-to-menu-item.component.tsx
@@ -1,4 +1,4 @@
-import { DropdownMenuLabel as ShadDropdownMenuLabel } from '@/components/shadcn-ui/dropdown-menu';
+import { DropdownMenuLabel } from '@/components/shadcn-ui/dropdown-menu';
 import { Bookmark, Clock, ArrowDownWideNarrow } from 'lucide-react';
 
 export type GoToMenuItemProps = {
@@ -9,7 +9,7 @@ export type GoToMenuItemProps = {
 
 function GoToMenuItem({ handleSort, handleLocationHistory, handleBookmarks }: GoToMenuItemProps) {
   return (
-    <ShadDropdownMenuLabel className="tw-flex tw-justify-between">
+    <DropdownMenuLabel className="tw-flex tw-justify-between">
       <p className="tw-inline-block tw-align-middle">Go To</p>
       <div className="tw-flex tw-items-center">
         <ArrowDownWideNarrow
@@ -25,7 +25,7 @@ function GoToMenuItem({ handleSort, handleLocationHistory, handleBookmarks }: Go
           className="tw-m-2 tw-h-4 tw-w-4 tw-cursor-pointer tw-gap-2"
         />
       </div>
-    </ShadDropdownMenuLabel>
+    </DropdownMenuLabel>
   );
 }
 
diff --git a/lib/platform-bible-react/src/components/advanced/book-selector.component.tsx b/lib/platform-bible-react/src/components/advanced/book-selector.component.tsx
index cabd4c47fe..59630006e1 100644
--- a/lib/platform-bible-react/src/components/advanced/book-selector.component.tsx
+++ b/lib/platform-bible-react/src/components/advanced/book-selector.component.tsx
@@ -62,6 +62,7 @@ export default function BookSelector({
   startChapter,
   handleSelectStartChapter,
   localizedStrings,
+  direction,
 }: BookSelectorProps) {
   const currentBookText = localizeString(localizedStrings, '%webView_bookSelector_currentBook%');
   const chooseText = localizeString(localizedStrings, '%webView_bookSelector_choose%');
@@ -83,12 +84,13 @@ export default function BookSelector({
       // value is always a string but we need it to be BookSelectionMode
       // eslint-disable-next-line no-type-assertion/no-type-assertion
       onValueChange={(value: string) => onSelectionModeChange(value as BookSelectionMode)}
+      dir={direction}
     >
       <div className="tw-flex tw-w-full tw-flex-col tw-gap-4">
         <div className="tw-grid tw-grid-cols-[25%,25%,50%]">
           <div className="tw-flex tw-items-center">
             <RadioGroupItem value={BookSelectionMode.CURRENT_BOOK} />
-            <Label className="tw-ml-1">{currentBookText}</Label>
+            <Label className="tw-ms-1">{currentBookText}</Label>
           </div>
           <Label className="tw-flex tw-items-center">{currentBookName}</Label>
           <div className="tw-flex tw-items-center tw-justify-end">
@@ -99,13 +101,14 @@ export default function BookSelector({
               chapterCount={chapterCount}
               startChapter={startChapter}
               endChapter={endChapter}
+              direction={direction}
             />
           </div>
         </div>
         <div className="tw-grid tw-grid-cols-[25%,50%,25%]">
           <div className="tw-flex tw-items-center">
             <RadioGroupItem value={BookSelectionMode.CHOOSE_BOOKS} />
-            <Label className="tw-ml-1">{chooseBooksText}</Label>
+            <Label className="tw-ms-1">{chooseBooksText}</Label>
           </div>
           <Label className="tw-flex tw-items-center">
             {selectedBookIds.map((bookId: string) => Canon.bookIdToEnglishName(bookId)).join(', ')}
diff --git a/lib/platform-bible-react/src/components/advanced/inventory/inventory-columns.tsx b/lib/platform-bible-react/src/components/advanced/inventory/inventory-columns.tsx
index 04c5338503..85554a14d7 100644
--- a/lib/platform-bible-react/src/components/advanced/inventory/inventory-columns.tsx
+++ b/lib/platform-bible-react/src/components/advanced/inventory/inventory-columns.tsx
@@ -157,6 +157,7 @@ export const inventoryStatusColumn = (
   onApprovedItemsChange: (items: string[]) => void,
   unapprovedItems: string[],
   onUnapprovedItemsChange: (items: string[]) => void,
+  direction: 'rtl' | 'ltr' = 'ltr',
 ): ColumnDef<InventoryTableData> => {
   return {
     accessorKey: 'status',
@@ -174,7 +175,7 @@ export const inventoryStatusColumn = (
       const status: Status = row.getValue('status');
       const item: string = row.getValue('item');
       return (
-        <ToggleGroup value={status} variant="outline" type="single">
+        <ToggleGroup value={status} variant="outline" type="single" dir={direction}>
           <ToggleGroupItem
             onClick={() =>
               statusChangeHandler(
diff --git a/lib/platform-bible-react/src/components/advanced/inventory/inventory.component.tsx b/lib/platform-bible-react/src/components/advanced/inventory/inventory.component.tsx
index 989bbc8e5e..12622c0b46 100644
--- a/lib/platform-bible-react/src/components/advanced/inventory/inventory.component.tsx
+++ b/lib/platform-bible-react/src/components/advanced/inventory/inventory.component.tsx
@@ -245,6 +245,8 @@ type InventoryProps = {
    * other columns you can add these yourself
    */
   columns: ColumnDef<InventoryTableData>[];
+  /** Text and layout direction */
+  direction?: 'rtl' | 'ltr';
 };
 
 /** Inventory component that is used to view and control the status of provided project settings */
@@ -260,6 +262,7 @@ export default function Inventory({
   scope,
   onScopeChange,
   columns,
+  direction,
 }: InventoryProps) {
   const allItemsText = localizeString(localizedStrings, '%webView_inventory_all%');
   const approvedItemsText = localizeString(localizedStrings, '%webView_inventory_approved%');
@@ -395,6 +398,7 @@ export default function Inventory({
         <Select
           onValueChange={(value) => handleStatusFilterChange(value)}
           defaultValue={statusFilter}
+          dir={direction}
         >
           <SelectTrigger className="tw-m-1">
             <SelectValue placeholder="Select filter" />
@@ -406,7 +410,11 @@ export default function Inventory({
             <SelectItem value="unknown">{unknownItemsText}</SelectItem>
           </SelectContent>
         </Select>
-        <Select onValueChange={(value) => handleScopeChange(value)} defaultValue={scope}>
+        <Select
+          onValueChange={(value) => handleScopeChange(value)}
+          defaultValue={scope}
+          dir={direction}
+        >
           <SelectTrigger className="tw-m-1">
             <SelectValue placeholder="Select scope" />
           </SelectTrigger>
diff --git a/lib/platform-bible-react/src/components/advanced/multi-select-combo-box.tsx b/lib/platform-bible-react/src/components/advanced/multi-select-combo-box.tsx
index 553277e933..13e1448e65 100644
--- a/lib/platform-bible-react/src/components/advanced/multi-select-combo-box.tsx
+++ b/lib/platform-bible-react/src/components/advanced/multi-select-combo-box.tsx
@@ -28,6 +28,8 @@ interface MultiSelectComboBoxProps {
   customSelectedText?: string;
   sortSelected?: boolean;
   icon?: ReactNode;
+  /** Text and layout direction */
+  direction?: 'rtl' | 'ltr';
 }
 
 function MultiSelectComboBox({
@@ -40,6 +42,7 @@ function MultiSelectComboBox({
   customSelectedText,
   sortSelected = false,
   icon = undefined,
+  direction = 'ltr',
 }: MultiSelectComboBoxProps) {
   const [open, setOpen] = useState(false);
 
@@ -107,7 +110,7 @@ function MultiSelectComboBox({
           <ChevronsUpDown className="tw-ml-2 tw-h-4 tw-w-4 tw-shrink-0 tw-opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="start" className="tw-w-full tw-p-0">
+      <PopoverContent align="start" className="tw-w-full tw-p-0" dir={direction}>
         <Command>
           <CommandInput placeholder={`Search ${placeholder.toLowerCase()}...`} />
           <CommandList>
@@ -137,7 +140,7 @@ function MultiSelectComboBox({
                     </div>
                     <div className="tw-flex-grow">{option.label}</div>
                     {getEntriesCount && (
-                      <div className="tw-w-10 tw-text-right tw-text-muted-foreground">{count}</div>
+                      <div className="tw-w-10 tw-text-end tw-text-muted-foreground">{count}</div>
                     )}
                   </CommandItem>
                 );
diff --git a/lib/platform-bible-react/src/components/advanced/scripture-results-viewer/scripture-results-viewer.component.tsx b/lib/platform-bible-react/src/components/advanced/scripture-results-viewer/scripture-results-viewer.component.tsx
index 8bd58c76a5..c4f74ae548 100644
--- a/lib/platform-bible-react/src/components/advanced/scripture-results-viewer/scripture-results-viewer.component.tsx
+++ b/lib/platform-bible-react/src/components/advanced/scripture-results-viewer/scripture-results-viewer.component.tsx
@@ -379,6 +379,7 @@ export default function ScriptureResultsViewer({
           onValueChange={(value) => {
             handleSelectChange(value);
           }}
+          dir={direction}
         >
           <SelectTrigger className="tw-mb-1 tw-mt-2">
             <SelectValue />
diff --git a/lib/platform-bible-react/src/components/advanced/scroll-group-selector.component.tsx b/lib/platform-bible-react/src/components/advanced/scroll-group-selector.component.tsx
index 5afef5b7f0..4751fd51f3 100644
--- a/lib/platform-bible-react/src/components/advanced/scroll-group-selector.component.tsx
+++ b/lib/platform-bible-react/src/components/advanced/scroll-group-selector.component.tsx
@@ -91,6 +91,8 @@ export type ScrollGroupSelectorProps = {
    * ```
    */
   localizedStrings?: LanguageStrings;
+  /** Text and layout direction */
+  direction?: 'rtl' | 'ltr';
 };
 
 /** Selector component for choosing a scroll group */
@@ -99,6 +101,7 @@ export default function ScrollGroupSelector({
   scrollGroupId,
   onChangeScrollGroupId,
   localizedStrings = {},
+  direction = 'ltr',
 }: ScrollGroupSelectorProps) {
   const localizedStringsDefaulted = {
     ...DEFAULT_SCROLL_GROUP_LOCALIZED_STRINGS,
@@ -122,6 +125,7 @@ export default function ScrollGroupSelector({
           newScrollGroupString === 'undefined' ? undefined : parseInt(newScrollGroupString, 10),
         )
       }
+      dir={direction}
     >
       <SelectTrigger className="pr-twp tw-w-auto">
         <SelectValue
diff --git a/lib/platform-bible-react/src/components/advanced/tab-navigation-content-search.component.tsx b/lib/platform-bible-react/src/components/advanced/tab-navigation-content-search.component.tsx
index eac8722f7a..8921f2b4d4 100644
--- a/lib/platform-bible-react/src/components/advanced/tab-navigation-content-search.component.tsx
+++ b/lib/platform-bible-react/src/components/advanced/tab-navigation-content-search.component.tsx
@@ -49,6 +49,7 @@ export default function TabNavigationContentSearch({
           isFullWidth={isSearchBarFullWidth}
           onSearch={onSearch}
           placeholder={searchPlaceholder}
+          direction={direction}
         />
       </div>
       <VerticalTabs dir={direction}>
diff --git a/lib/platform-bible-react/src/components/basics/chapter-range-selector.component.tsx b/lib/platform-bible-react/src/components/basics/chapter-range-selector.component.tsx
index 2f21e8952f..b66cd45e82 100644
--- a/lib/platform-bible-react/src/components/basics/chapter-range-selector.component.tsx
+++ b/lib/platform-bible-react/src/components/basics/chapter-range-selector.component.tsx
@@ -9,6 +9,8 @@ export type ChapterRangeSelectorProps = {
   handleSelectEndChapter: (chapter: number) => void;
   isDisabled?: boolean;
   chapterCount: number;
+  /** Text and layout direction */
+  direction?: 'rtl' | 'ltr';
 };
 
 export default function ChapterRangeSelector({
@@ -18,6 +20,7 @@ export default function ChapterRangeSelector({
   handleSelectEndChapter,
   isDisabled = false,
   chapterCount,
+  direction = 'ltr',
 }: ChapterRangeSelectorProps) {
   const chapterOptions = useMemo(
     () => Array.from({ length: chapterCount }, (_, index) => index + 1),
@@ -44,22 +47,24 @@ export default function ChapterRangeSelector({
       <ComboBox
         isDisabled={isDisabled}
         onChange={onChangeStartChapter}
-        buttonClassName="tw-ml-2 tw-mr-2 tw-w-20"
+        buttonClassName="tw-me-2 tw-ms-2 tw-w-20"
         key="start chapter"
         options={chapterOptions}
         getOptionLabel={(option) => option.toString()}
         value={startChapter}
+        dir={direction}
       />
 
       <Label htmlFor="end-chapters-combobox">to</Label>
       <ComboBox
         isDisabled={isDisabled}
         onChange={onChangeEndChapter}
-        buttonClassName="tw-ml-2 tw-w-20"
+        buttonClassName="tw-ms-2 tw-w-20"
         key="end chapter"
         options={chapterOptions}
         getOptionLabel={(option) => option.toString()}
         value={endChapter}
+        dir={direction}
       />
     </>
   );
diff --git a/lib/platform-bible-react/src/components/basics/checklist.component.tsx b/lib/platform-bible-react/src/components/basics/checklist.component.tsx
index 0b52e37803..25b9131779 100644
--- a/lib/platform-bible-react/src/components/basics/checklist.component.tsx
+++ b/lib/platform-bible-react/src/components/basics/checklist.component.tsx
@@ -41,7 +41,7 @@ export default function Checklist({
       {listItems.map((item) => (
         <div key={item} className="tw-m-2 tw-flex tw-items-center">
           <Checkbox
-            className="tw-mr-2 tw-align-middle"
+            className="tw-me-2 tw-align-middle"
             checked={selectedListItems.includes(item)}
             onCheckedChange={(value: boolean) => handleSelectListItem(item, value)}
           />
diff --git a/lib/platform-bible-react/src/components/basics/combo-box.component.tsx b/lib/platform-bible-react/src/components/basics/combo-box.component.tsx
index 6a53827420..5bc0b4f39e 100644
--- a/lib/platform-bible-react/src/components/basics/combo-box.component.tsx
+++ b/lib/platform-bible-react/src/components/basics/combo-box.component.tsx
@@ -108,7 +108,7 @@ function ComboBox<T extends ComboBoxOption = ComboBoxOption>({
           disabled={isDisabled}
         >
           <div className="tw-flex tw-flex-1 tw-items-center tw-overflow-hidden">
-            {icon && <div className="tw-pr-2">{icon}</div>}
+            {icon && <div className="tw-pe-2">{icon}</div>}
             <span className="tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap">
               {value ? getOptionLabel(value) : buttonPlaceholder}
             </span>
diff --git a/lib/platform-bible-react/src/components/basics/search-bar.component.tsx b/lib/platform-bible-react/src/components/basics/search-bar.component.tsx
index f97d8f2d0c..d6f2b87d47 100644
--- a/lib/platform-bible-react/src/components/basics/search-bar.component.tsx
+++ b/lib/platform-bible-react/src/components/basics/search-bar.component.tsx
@@ -21,6 +21,9 @@ export type SearchBarProps = {
 
   /** Additional css classes to help with unique styling of the search bar */
   className?: string;
+
+  /** Text and layout direction */
+  direction?: 'rtl' | 'ltr';
 };
 
 export default function SearchBar({
@@ -28,6 +31,7 @@ export default function SearchBar({
   placeholder,
   isFullWidth,
   className,
+  direction = 'ltr',
 }: SearchBarProps) {
   const [searchQuery, setSearchQuery] = useState<string>('');
 
@@ -38,12 +42,17 @@ export default function SearchBar({
 
   return (
     <div className="tw-relative">
-      <Search className="tw-absolute tw-left-3 tw-top-1/2 tw-h-4 tw-w-4 tw--translate-y-1/2 tw-transform tw-opacity-50" />
+      <Search
+        className={cn(
+          'tw-absolute tw-top-1/2 tw-h-4 tw-w-4 tw--translate-y-1/2 tw-transform tw-opacity-50',
+          { 'tw-right-3': direction === 'rtl' },
+          { 'tw-left-3': direction === 'ltr' },
+        )}
+      />
       <Input
         className={cn(
-          'tw-flex tw-h-10 tw-w-full tw-text-ellipsis tw-rounded-md tw-border tw-border-input tw-bg-background tw-py-2 tw-pe-3 tw-ps-9 tw-text-sm tw-ring-offset-background file:tw-border-0 file:tw-bg-transparent file:tw-text-sm file:tw-font-medium placeholder:tw-text-muted-foreground focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-[color:hsl(240,5%,64.9%)] focus-visible:tw-ring-offset-2 disabled:tw-cursor-not-allowed disabled:tw-opacity-50',
+          'tw-flex tw-h-10 tw-w-full tw-text-ellipsis tw-rounded-md tw-border tw-border-input tw-bg-background tw-py-2 tw-pe-3 tw-pe-9 tw-ps-9 tw-text-sm tw-ring-offset-background file:tw-border-0 file:tw-bg-transparent file:tw-text-sm file:tw-font-medium placeholder:tw-text-muted-foreground focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-[color:hsl(240,5%,64.9%)] focus-visible:tw-ring-offset-2 disabled:tw-cursor-not-allowed disabled:tw-opacity-50',
           { 'tw-w-full': isFullWidth },
-          { 'tw-pe-9': searchQuery },
           className,
         )}
         placeholder={placeholder}
@@ -54,7 +63,11 @@ export default function SearchBar({
         <Button
           variant="ghost"
           size="icon"
-          className="tw-absolute tw-right-0 tw-top-1/2 tw-h-7 tw--translate-y-1/2 tw-transform hover:tw-bg-transparent"
+          className={cn(
+            'tw-absolute tw-top-1/2 tw-h-7 tw--translate-y-1/2 tw-transform hover:tw-bg-transparent',
+            { 'tw-left-0': direction === 'rtl' },
+            { 'tw-right-0': direction === 'ltr' },
+          )}
         >
           <X
             className="tw-h-4 tw-w-4"
diff --git a/lib/platform-bible-react/src/components/basics/spinner.component.tsx b/lib/platform-bible-react/src/components/basics/spinner.component.tsx
index 3dc5dbe646..1f9ff19021 100644
--- a/lib/platform-bible-react/src/components/basics/spinner.component.tsx
+++ b/lib/platform-bible-react/src/components/basics/spinner.component.tsx
@@ -4,11 +4,22 @@ import { forwardRef } from 'react';
 
 export type SpinnerProps = LucideProps;
 
-const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(({ className, ...props }, ref) => {
-  return (
-    <LoaderCircle size={35} className={cn('tw-animate-spin', className)} {...props} ref={ref} />
-  );
-});
+const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
+  ({ className, direction, ...props }, ref) => {
+    return (
+      <LoaderCircle
+        size={35}
+        className={cn(
+          'tw-animate-spin',
+          { 'tw-direction-reverse': direction === 'rtl' },
+          className,
+        )}
+        {...props}
+        ref={ref}
+      />
+    );
+  },
+);
 
 Spinner.displayName = 'Spinner';
 
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/dialog.tsx b/lib/platform-bible-react/src/components/shadcn-ui/dialog.tsx
index 56a61f4a4f..ec044c9a71 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/dialog.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/dialog.tsx
@@ -27,6 +27,7 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+/* TODO: bug in shadcn dialog: header and x icon do not make use of the dir prop */
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
@@ -50,7 +51,6 @@ const DialogContent = React.forwardRef<
   </DialogPortal>
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-
 function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/dropdown-menu.tsx b/lib/platform-bible-react/src/components/shadcn-ui/dropdown-menu.tsx
index 23f63c27a5..3becc90aad 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/dropdown-menu.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/dropdown-menu.tsx
@@ -107,6 +107,9 @@ export const DropdownMenuSubContent = React.forwardRef<
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
+/* TODO: bug in shadcn component: DropdownMenuContent does not support a dir prop.
+For the content we can work around this by adding a div with dir, but that would not cause
+the scrollbar to appear left in an rtl layout (e.g. see book-chapter-control.component) */
 export const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   DropdownMenuContentProps
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/switch.tsx b/lib/platform-bible-react/src/components/shadcn-ui/switch.tsx
index b4777a02b6..2c21a5714d 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/switch.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/switch.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
+import React from 'react';
 
 import { cn } from '@/utils/shadcn-ui.util';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & { direction?: 'ltr' | 'rtl' }
+>(({ className, direction, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
       'tw-peer pr-twp tw-inline-flex tw-h-6 tw-w-11 tw-shrink-0 tw-cursor-pointer tw-items-center tw-rounded-full tw-border-2 tw-border-transparent tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-ring focus-visible:tw-ring-offset-2 focus-visible:tw-ring-offset-background disabled:tw-cursor-not-allowed disabled:tw-opacity-50 data-[state=checked]:tw-bg-primary data-[state=unchecked]:tw-bg-input',
@@ -17,7 +17,15 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pr-twp tw-pointer-events-none tw-block tw-h-5 tw-w-5 tw-rounded-full tw-bg-background tw-shadow-lg tw-ring-0 tw-transition-transform data-[state=checked]:tw-translate-x-5 data-[state=unchecked]:tw-translate-x-0',
+        'pr-twp tw-pointer-events-none tw-block tw-h-5 tw-w-5 tw-rounded-full tw-bg-background tw-shadow-lg tw-ring-0 tw-transition-transform',
+        {
+          'data-[state=checked]:tw-translate-x-5 data-[state=unchecked]:tw-translate-x-0':
+            direction === 'ltr',
+        },
+        {
+          'data-[state=checked]:tw-translate-x-[-20px] data-[state=unchecked]:tw-translate-x-0':
+            direction === 'rtl',
+        },
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx b/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx
index feb47df92f..1d5ba0315b 100644
--- a/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/advanced.component.tsx
@@ -89,21 +89,12 @@ function Compositions({ direction }: HasDirection) {
         </VerticalTabsList>
 
         <VerticalTabsContent value="Book Chapter Control">
-          <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
+          <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} direction={direction} />
           <div>{JSON.stringify(scrRef)}</div>
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Book Selector">
-          <BookSelectorExample />
-        </VerticalTabsContent>
-
-        <VerticalTabsContent value="Scroll Group Selector">
-          <ScrollGroupSelector
-            availableScrollGroupIds={[undefined, ...Array(5).keys()]}
-            scrollGroupId={scrollGroupId}
-            onChangeScrollGroupId={setScrollGroupId}
-          />
-          <div>Scroll Group Id: {`${scrollGroupId}`}</div>
+          <BookSelectorExample direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Data Table">
@@ -132,15 +123,11 @@ function Compositions({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Multi-select Combo Box">
-          <MultiSelectComboBoxExample />
-        </VerticalTabsContent>
-
-        <VerticalTabsContent value="Result List">
-          <ScriptureResultsViewerExample direction={direction} />
+          <MultiSelectComboBoxExample direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Inventory">
-          <InventoryExample />
+          <InventoryExample direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Navigation Content Search">
@@ -154,10 +141,24 @@ function Compositions({ direction }: HasDirection) {
           />
         </VerticalTabsContent>
 
+        <VerticalTabsContent value="Result List">
+          <ScriptureResultsViewerExample direction={direction} />
+        </VerticalTabsContent>
+
         <VerticalTabsContent value="Settings List">
           <SettingsListExamples />
         </VerticalTabsContent>
 
+        <VerticalTabsContent value="Scroll Group Selector">
+          <ScrollGroupSelector
+            availableScrollGroupIds={[undefined, ...Array(5).keys()]}
+            scrollGroupId={scrollGroupId}
+            onChangeScrollGroupId={setScrollGroupId}
+            direction={direction}
+          />
+          <div>Scroll Group Id: {`${scrollGroupId}`}</div>
+        </VerticalTabsContent>
+
         <VerticalTabsContent value="Markdown Renderer">
           <MarkdownRendererExample />
         </VerticalTabsContent>
diff --git a/lib/platform-bible-react/src/preview/pages/components/advanced/book-selector-example.component.tsx b/lib/platform-bible-react/src/preview/pages/components/advanced/book-selector-example.component.tsx
index 8a1e0fddc3..a0fc94610b 100644
--- a/lib/platform-bible-react/src/preview/pages/components/advanced/book-selector-example.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/advanced/book-selector-example.component.tsx
@@ -1,4 +1,5 @@
 import BookSelector, { BookSelectionMode } from '@/components/advanced/book-selector.component';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { Canon } from '@sillsdev/scripture';
 import { useState } from 'react';
 
@@ -8,7 +9,7 @@ const localizedStrings = {
   '%webView_bookSelector_chooseBooks%': 'Choose Books',
 };
 
-function BookSelectorExample() {
+function BookSelectorExample({ direction }: HasDirection) {
   const [startChapter, setStartChapter] = useState<number>(0);
   const [endChapter, setEndChapter] = useState<number>(0);
   const selectedBooksIds = [
@@ -36,6 +37,7 @@ function BookSelectorExample() {
       onSelectBooks={handleSelectBooks}
       selectedBookIds={selectedBooksIds}
       localizedStrings={localizedStrings}
+      direction={direction}
     />
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/components/advanced/inventory-example.component.tsx b/lib/platform-bible-react/src/preview/pages/components/advanced/inventory-example.component.tsx
index 4ed2d3f5c9..e3af2b42cd 100644
--- a/lib/platform-bible-react/src/preview/pages/components/advanced/inventory-example.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/advanced/inventory-example.component.tsx
@@ -6,6 +6,7 @@ import {
 } from '@/components/advanced/inventory/inventory-columns';
 import { InventoryTableData } from '@/components/advanced/inventory/inventory-utils';
 import Inventory, { Scope } from '@/components/advanced/inventory/inventory.component';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { defaultScrRef } from 'platform-bible-utils';
 import { useState } from 'react';
 import scriptureSnippet from './scripture-snippet';
@@ -29,6 +30,7 @@ const createColumns = (
   onApprovedItemsChange: (items: string[]) => void,
   unapprovedItems: string[],
   onUnapprovedItemsChange: (items: string[]) => void,
+  direction: 'ltr' | 'rtl',
 ): ColumnDef<InventoryTableData>[] => [
   inventoryItemColumn('Item'),
   inventoryCountColumn('Count'),
@@ -38,10 +40,11 @@ const createColumns = (
     onApprovedItemsChange,
     unapprovedItems,
     onUnapprovedItemsChange,
+    direction,
   ),
 ];
 
-function InventoryExample() {
+function InventoryExample({ direction }: HasDirection) {
   const [scrRef, setScrRef] = useState(defaultScrRef);
   const [approvedItems, setApprovedItems] = useState<string[]>(['well', 'he']);
   const [unapprovedItems, setUnapprovedItems] = useState<string[]>(['for', 'of']);
@@ -63,10 +66,16 @@ function InventoryExample() {
           setApprovedItems,
           unapprovedItems,
           setUnapprovedItems,
+          direction,
         )}
         // Matches a sequence of letters surrounded by word boundaries followed by that exact same
         // sequence of letters surrounded by word boundaries
         extractItems={/\b(\p{L}+)\b(?=\s\b\1\b)/gu}
+        direction={direction}
+        additionalItemsLabels={{
+          checkboxText: 'additional header',
+          tableHeaders: ['additional header'],
+        }}
       />
       Approved items:
       <ul>
diff --git a/lib/platform-bible-react/src/preview/pages/components/advanced/marketplace-buttons.example.component.tsx b/lib/platform-bible-react/src/preview/pages/components/advanced/marketplace-buttons.example.component.tsx
index 71e7238e55..07f12af35d 100644
--- a/lib/platform-bible-react/src/preview/pages/components/advanced/marketplace-buttons.example.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/advanced/marketplace-buttons.example.component.tsx
@@ -32,37 +32,37 @@ export default function MarketplaceButtonExamples() {
     ],
   };
   return (
-    <>
+    <div>
       <p>
         Note: These buttons are currently styled with fixed colors and are therefore not theme-able
       </p>
       <br />
       FilterButton Button:
-      <div className="tw-space-x-2">
+      <div className="tw-flex tw-gap-x-2">
         <FilterDropdown groups={[filterGroup, sortGroup]} />
       </div>
       InstallButton Button:
-      <div className="tw-space-x-2">
+      <div className="tw-flex tw-gap-x-2">
         <InstallButton isInstalling={false} handleClick={() => {}} buttonText="Get" />
         <InstallButton isInstalling handleClick={() => {}} buttonText="Get" />
         <InstallButton isInstalling={false} handleClick={() => {}} />
         <InstallButton isInstalling handleClick={() => {}} />
       </div>
       DisableButton Button:
-      <div className="tw-space-x-2">
+      <div className="tw-flex tw-gap-x-2">
         <DisableButton isDisabling={false} handleClick={() => {}} />
         <DisableButton isDisabling handleClick={() => {}} />
       </div>
       EnableButton Button:
-      <div className="tw-space-x-2">
+      <div className="tw-flex tw-gap-x-2">
         <EnableButton isEnabling={false} handleClick={() => {}} />
         <EnableButton isEnabling handleClick={() => {}} />
       </div>
       UpdateButton Button:
-      <div className="tw-space-x-2">
+      <div className="tw-flex tw-gap-x-2">
         <UpdateButton isUpdating={false} handleClick={() => {}} />
         <UpdateButton isUpdating handleClick={() => {}} />
       </div>
-    </>
+    </div>
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/components/advanced/multi-select-combo-box-example.tsx b/lib/platform-bible-react/src/preview/pages/components/advanced/multi-select-combo-box-example.tsx
index a640fcfae9..5c5c2f71d8 100644
--- a/lib/platform-bible-react/src/preview/pages/components/advanced/multi-select-combo-box-example.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/advanced/multi-select-combo-box-example.tsx
@@ -1,4 +1,5 @@
 import MultiSelectComboBox from '@/components/advanced/multi-select-combo-box';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { Blocks } from 'lucide-react';
 import { useState } from 'react';
 
@@ -123,7 +124,7 @@ const resources = [
   },
 ];
 
-function MultiSelectComboBoxExample() {
+function MultiSelectComboBoxExample({ direction }: HasDirection) {
   const [selectedTypes, setSelectedTypes] = useState<string[]>(types.map((type) => type.value));
 
   const getOptionsCount = (option: MultiSelectComboBoxEntry): number => {
@@ -145,6 +146,7 @@ function MultiSelectComboBoxExample() {
               : `${selectedTypes.length} type${selectedTypes.length > 1 ? 's' : ''}`
           }
           icon={<Blocks />}
+          direction={direction}
         />
       </div>
 
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics.component.tsx
index 912b54f60a..c82b1d37ce 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics.component.tsx
@@ -1,4 +1,3 @@
-import SearchBar from '@/components/basics/search-bar.component';
 import {
   VerticalTabs,
   VerticalTabsContent,
@@ -17,6 +16,7 @@ import ComboBoxExamples from './basics/combo-box.examples.component';
 import DropdownExamples from './basics/dropdown.examples.component';
 import InputExamples from './basics/input.examples.component';
 import RadioGroupExamples from './basics/radio-group.examples';
+import SearchBarExamples from './basics/search.examples.component';
 import SelectExamples from './basics/select.examples.component';
 import SettingsSidebarExamples from './basics/sidebar.examples.component';
 import SliderExamples from './basics/slider.examples.component';
@@ -26,6 +26,7 @@ import SwitchExamples from './basics/switch.examples.component';
 import TabExamples from './basics/tab.examples.component';
 import TableExamples from './basics/table.examples.component';
 import ToggleGroupExamples from './basics/toggle-group.examples.component';
+import DialogExamples from './basics/dialog.examples.component';
 
 function Basics({ direction }: HasDirection) {
   return (
@@ -43,6 +44,7 @@ function Basics({ direction }: HasDirection) {
           <VerticalTabsTrigger value="Checkbox">Checkbox</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Checklist">Checklist</VerticalTabsTrigger>
           <VerticalTabsTrigger value="ComboBox">Combo Box</VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Dialog">Dialog</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Dropdown Menu">Dropdown Menu</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Input">Input</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Radio Group">Radio Group</VerticalTabsTrigger>
@@ -75,7 +77,7 @@ function Basics({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Chapter Range Selector">
-          <ChapterRangeSelectorExample />
+          <ChapterRangeSelectorExample direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Checkbox">
@@ -90,19 +92,20 @@ function Basics({ direction }: HasDirection) {
           <ComboBoxExamples direction={direction} />
         </VerticalTabsContent>
 
+        <VerticalTabsContent value="Dialog">
+          <DialogExamples direction={direction} />
+        </VerticalTabsContent>
+
         <VerticalTabsContent value="Input">
           <InputExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Radio Group">
-          <RadioGroupExamples />
+          <RadioGroupExamples direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Search Bar">
-          <div className="tw-flex tw-gap-2">
-            <SearchBar onSearch={(search) => alert(`you searched for ${search}`)} />{' '}
-            {direction === 'rtl' ? <>&rarr;</> : <>&larr;</>} type here
-          </div>
+          <SearchBarExamples direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Select">
@@ -116,7 +119,7 @@ function Basics({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Slider">
-          <SliderExamples />
+          <SliderExamples direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Sonner">
@@ -124,11 +127,11 @@ function Basics({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Spinner">
-          <SpinnerExamples />
+          <SpinnerExamples direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Switch">
-          <SwitchExamples />
+          <SwitchExamples direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Dropdown Menu">
@@ -144,7 +147,7 @@ function Basics({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Toggle Group">
-          <ToggleGroupExamples />
+          <ToggleGroupExamples direction={direction} />
         </VerticalTabsContent>
       </VerticalTabs>
     </div>
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/chapter-range-example.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/chapter-range-example.component.tsx
index b45dfdc8d2..b405412a5f 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/chapter-range-example.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/chapter-range-example.component.tsx
@@ -1,8 +1,9 @@
 import ChapterRangeSelector from '@/components/basics/chapter-range-selector.component';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { getChaptersForBook } from 'platform-bible-utils';
 import { useState } from 'react';
 
-export default function ChapterRangeSelectorExample() {
+export default function ChapterRangeSelectorExample({ direction }: HasDirection) {
   const chapterCount = getChaptersForBook(1);
   const [startChapter, setStartChapter] = useState(1);
   const [endChapter, setEndChapter] = useState(chapterCount);
@@ -21,6 +22,7 @@ export default function ChapterRangeSelectorExample() {
       handleSelectStartChapter={handleSelectStart}
       handleSelectEndChapter={handleSelectEnd}
       chapterCount={chapterCount}
+      direction={direction}
     />
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/dialog.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/dialog.examples.component.tsx
new file mode 100644
index 0000000000..36b5236089
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/dialog.examples.component.tsx
@@ -0,0 +1,30 @@
+import { Button } from '@/components/shadcn-ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/shadcn-ui/dialog';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
+
+export default function DialogExamples({ direction }: HasDirection) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Show Dialog</Button>
+      </DialogTrigger>
+      <DialogContent className="tw-max-w-sm" dir={direction}>
+        <DialogHeader>
+          <DialogTitle>Clear filters</DialogTitle>
+          <DialogDescription>Clear filters to show all results?</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button>Show all results</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/radio-group.examples.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/radio-group.examples.tsx
index 1e227b71c1..567cf27d88 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/radio-group.examples.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/radio-group.examples.tsx
@@ -1,18 +1,19 @@
 import { Label } from '@/components/shadcn-ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/shadcn-ui/radio-group';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 
-export default function RadioGroupExamples() {
+export default function RadioGroupExamples({ direction }: HasDirection) {
   return (
-    <RadioGroup defaultValue="comfortable">
-      <div className="tw-flex tw-items-center tw-space-x-2">
+    <RadioGroup defaultValue="comfortable" dir={direction}>
+      <div className="tw-flex tw-items-center tw-gap-x-2">
         <RadioGroupItem value="default" id="r1" />
         <Label htmlFor="r1">Default</Label>
       </div>
-      <div className="tw-flex tw-items-center tw-space-x-2">
+      <div className="tw-flex tw-items-center tw-gap-x-2">
         <RadioGroupItem value="comfortable" id="r2" />
         <Label htmlFor="r2">Comfortable</Label>
       </div>
-      <div className="tw-flex tw-items-center tw-space-x-2">
+      <div className="tw-flex tw-items-center tw-gap-x-2">
         <RadioGroupItem value="compact" id="r3" />
         <Label htmlFor="r3">Compact</Label>
       </div>
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/search.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/search.examples.component.tsx
new file mode 100644
index 0000000000..eb5c4e7c7a
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/search.examples.component.tsx
@@ -0,0 +1,19 @@
+import SearchBar from '@/components/basics/search-bar.component';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
+
+// eslint-disable-next-line no-undef
+let timer: NodeJS.Timeout;
+
+function onSearchDebounced(search: string) {
+  clearTimeout(timer);
+  timer = setTimeout(() => alert(`you searched for ${search}`), 1000);
+}
+
+export default function SearchBarExamples({ direction }: HasDirection) {
+  return (
+    <div className="tw-flex tw-gap-2">
+      <SearchBar onSearch={onSearchDebounced} direction={direction} />{' '}
+      {direction === 'rtl' ? <>&rarr;</> : <>&larr;</>} type here
+    </div>
+  );
+}
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/slider.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/slider.examples.component.tsx
index 47bf0480f6..ad1075deff 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/slider.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/slider.examples.component.tsx
@@ -1,7 +1,8 @@
 import { Slider } from '@/components/shadcn-ui/slider';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { useState } from 'react';
 
-export default function SliderExamples() {
+export default function SliderExamples({ direction }: HasDirection) {
   const [sliderValue, setSlider] = useState<number[]>([33]);
   return (
     <>
@@ -12,6 +13,7 @@ export default function SliderExamples() {
         step={1}
         value={sliderValue}
         onValueChange={setSlider}
+        dir={direction}
       />
       {sliderValue}
 
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/spinner.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/spinner.examples.component.tsx
index 4134930b61..d8a48a9f23 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/spinner.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/spinner.examples.component.tsx
@@ -1,11 +1,12 @@
 import Spinner from '@/components/basics/spinner.component';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 
-export default function SpinnerExamples() {
+export default function SpinnerExamples({ direction }: HasDirection) {
   return (
     <div>
-      <Spinner /> Default
-      <Spinner className="tw-text-red-600" /> Red
-      <Spinner size={10} /> Size 10
+      <Spinner direction={direction} /> Default
+      <Spinner direction={direction} className="tw-text-red-600" /> Red
+      <Spinner direction={direction} size={10} /> Size 10
     </div>
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/switch.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/switch.examples.component.tsx
index 5871f8fae6..d570022f2a 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/switch.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/switch.examples.component.tsx
@@ -1,14 +1,15 @@
 import { Switch } from '@/components/shadcn-ui/switch';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { useState } from 'react';
 
-export default function SwitchExamples() {
+export default function SwitchExamples({ direction }: HasDirection) {
   const [value, setValue] = useState<boolean>(false);
 
   return (
     <div className="tw-flex tw-flex-col *:tw-m-4">
-      <Switch checked={value} onCheckedChange={setValue} />
-      <Switch disabled />
-      <Switch checked disabled />
+      <Switch direction={direction} checked={value} onCheckedChange={setValue} />
+      <Switch direction={direction} disabled />
+      <Switch direction={direction} checked disabled />
     </div>
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/toggle-group.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/toggle-group.examples.component.tsx
index fed9de89b0..5dd83f26ba 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/toggle-group.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/toggle-group.examples.component.tsx
@@ -1,14 +1,15 @@
 import { ToggleGroup, ToggleGroupItem } from '@/components/shadcn-ui/toggle-group';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 
-export default function ToggleGroupExamples() {
+export default function ToggleGroupExamples({ direction }: HasDirection) {
   return (
     <div className="*:tw-m-4">
-      <ToggleGroup variant="outline" type="multiple">
+      <ToggleGroup variant="outline" type="multiple" dir={direction}>
         <ToggleGroupItem value="a">A</ToggleGroupItem>
         <ToggleGroupItem value="b">B</ToggleGroupItem>
         <ToggleGroupItem value="c">C</ToggleGroupItem>
       </ToggleGroup>
-      <ToggleGroup type="single">
+      <ToggleGroup type="single" dir={direction}>
         <ToggleGroupItem value="a">A</ToggleGroupItem>
         <ToggleGroupItem value="b">B</ToggleGroupItem>
         <ToggleGroupItem value="c">C</ToggleGroupItem>
diff --git a/lib/platform-bible-react/src/preview/pages/layouts.component.tsx b/lib/platform-bible-react/src/preview/pages/layouts.component.tsx
index 1715599c3b..7c2b4c068d 100644
--- a/lib/platform-bible-react/src/preview/pages/layouts.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/layouts.component.tsx
@@ -34,13 +34,13 @@ function Layouts({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Toolbar">
-          <ToolbarExamples />
+          <ToolbarExamples direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Settings">TODO</VerticalTabsContent>
 
         <VerticalTabsContent value="Get Resources">
-          <GetResourcesExample />
+          <GetResourcesExample direction={direction} />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Shadcn Dashboard 5">
diff --git a/lib/platform-bible-react/src/preview/pages/layouts/resource-manager.layout.component.tsx b/lib/platform-bible-react/src/preview/pages/layouts/resource-manager.layout.component.tsx
index 1c76d427ff..ca83e220c2 100644
--- a/lib/platform-bible-react/src/preview/pages/layouts/resource-manager.layout.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/layouts/resource-manager.layout.component.tsx
@@ -23,6 +23,7 @@ import {
 import { cn } from '@/utils/shadcn-ui.util';
 import { DialogTitle } from '@radix-ui/react-dialog';
 import MultiSelectComboBox from '@/components/advanced/multi-select-combo-box';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 
 type MultiSelectComboBoxEntry = {
   value: string;
@@ -164,7 +165,7 @@ const tableData = [
   },
 ];
 
-export default function GetResourcesExample() {
+export default function GetResourcesExample({ direction }: HasDirection) {
   const [selectedTypes, setSelectedTypes] = React.useState<string[]>(
     types.map((type) => type.value),
   );
@@ -240,7 +241,8 @@ export default function GetResourcesExample() {
           <SearchBar
             onSearch={setSearchQuery}
             placeholder="Search by name, language, type..."
-            className={cn('tw-pl-8 tw-pr-8', searchQuery && 'tw-border-primary')}
+            className={cn('tw-px-8', searchQuery && 'tw-border-primary')}
+            direction={direction}
           />
 
           <MultiSelectComboBox
@@ -254,6 +256,7 @@ export default function GetResourcesExample() {
                 : `${selectedTypes.length} type${selectedTypes.length > 1 ? 's' : ''}`
             }
             icon={<Blocks />}
+            direction={direction}
           />
 
           <MultiSelectComboBox
@@ -271,6 +274,7 @@ export default function GetResourcesExample() {
             }
             sortSelected
             icon={<Languages />}
+            direction={direction}
           />
         </div>
 
diff --git a/lib/platform-bible-react/src/preview/pages/layouts/toolbar.layout.component.tsx b/lib/platform-bible-react/src/preview/pages/layouts/toolbar.layout.component.tsx
index 39b3513134..6c9fcdd961 100644
--- a/lib/platform-bible-react/src/preview/pages/layouts/toolbar.layout.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/layouts/toolbar.layout.component.tsx
@@ -1,10 +1,11 @@
 import BookChapterControl from '@/components/advanced/book-chapter-control/book-chapter-control.component';
 import { MultiColumnMenuProvider } from '@/components/mui/hamburger-menu-button.component';
 import Toolbar from '@/components/mui/toolbar.component';
+import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { defaultScrRef, Localized, MultiColumnMenu } from 'platform-bible-utils';
 import { useState } from 'react';
 
-export default function ToolbarExamples() {
+export default function ToolbarExamples({ direction }: HasDirection) {
   const [scrRef] = useState(defaultScrRef);
   const menu: MultiColumnMenu = { columns: {}, groups: {}, items: [] };
   const menuProvider: MultiColumnMenuProvider = () =>
@@ -14,11 +15,11 @@ export default function ToolbarExamples() {
   return (
     <div className="tw-flex tw-flex-col tw-gap-4">
       <Toolbar className="toolbar" menuProvider={undefined} commandHandler={() => {}}>
-        <BookChapterControl scrRef={scrRef} handleSubmit={() => {}} />
+        <BookChapterControl scrRef={scrRef} handleSubmit={() => {}} direction={direction} />
       </Toolbar>
 
       <Toolbar className="toolbar" menuProvider={menuProvider} commandHandler={() => {}}>
-        <BookChapterControl scrRef={scrRef} handleSubmit={() => {}} />
+        <BookChapterControl scrRef={scrRef} handleSubmit={() => {}} direction={direction} />
       </Toolbar>
     </div>
   );
diff --git a/lib/platform-bible-react/src/preview/pages/layouts/window.layout.component.tsx b/lib/platform-bible-react/src/preview/pages/layouts/window.layout.component.tsx
index 54a102fa28..8489341a73 100644
--- a/lib/platform-bible-react/src/preview/pages/layouts/window.layout.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/layouts/window.layout.component.tsx
@@ -28,7 +28,7 @@ export default function WindowOrTabExample({ direction, isFocused }: HasDirectio
     <div className="tw-rounded-md tw-border">
       <div className="tw-flex tw-flex-row tw-rounded-se-md tw-bg-muted/50">
         <div className="tw-m-2">
-          <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
+          <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} direction={direction} />
         </div>
         <div className="tw-grow" />
         <div className="tw-m-2 tw-flex">