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 0c25bf9eab..0bab6e4a08 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
@@ -11,7 +11,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/shadcn-ui/dropdown-menu';
-import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 import { Canon } from '@sillsdev/scripture';
 import { ScriptureReference, getChaptersForBook } from 'platform-bible-utils';
 import {
@@ -29,8 +29,6 @@ type BookTypeLabels = {
 type BookChapterControlProps = {
   scrRef: ScriptureReference;
   handleSubmit: (scrRef: ScriptureReference) => void;
-  /** Text and layout direction */
-  direction?: 'rtl' | 'ltr';
 };
 
 const ALL_BOOK_IDS = Canon.allBookIds;
@@ -104,7 +102,8 @@ function getBookIdFromEnglishName(bookName: string): string | undefined {
   return undefined;
 }
 
-function BookChapterControl({ scrRef, handleSubmit, direction }: BookChapterControlProps) {
+function BookChapterControl({ scrRef, handleSubmit }: BookChapterControlProps) {
+  const dir: Direction = readDirection();
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [selectedBookId, setSelectedBookId] = useState<string>(
     Canon.bookNumberToId(scrRef.bookNum),
@@ -263,13 +262,13 @@ function BookChapterControl({ scrRef, handleSubmit, direction }: BookChapterCont
       }
 
       const upOneChapter =
-        (key === 'ArrowRight' && !direction) ||
-        (key === 'ArrowRight' && direction === 'ltr') ||
-        (key === 'ArrowLeft' && direction === 'rtl');
+        (key === 'ArrowRight' && !dir) ||
+        (key === 'ArrowRight' && dir === 'ltr') ||
+        (key === 'ArrowLeft' && dir === 'rtl');
       const downOneChapter =
-        (key === 'ArrowLeft' && !direction) ||
-        (key === 'ArrowLeft' && direction === 'ltr') ||
-        (key === 'ArrowRight' && direction === 'rtl');
+        (key === 'ArrowLeft' && !dir) ||
+        (key === 'ArrowLeft' && dir === 'ltr') ||
+        (key === 'ArrowRight' && dir === 'rtl');
       let chapterOffSet = 0;
       if (upOneChapter) {
         if (highlightedChapter < fetchEndChapter(highlightedBookId)) {
@@ -355,7 +354,6 @@ function BookChapterControl({ scrRef, handleSubmit, direction }: BookChapterCont
             }}
             handleSubmit={handleInputSubmit}
             placeholder={`${Canon.bookNumberToEnglishName(scrRef.bookNum)} ${scrRef.chapterNum}:${scrRef.verseNum}`}
-            direction={direction}
           />
         </DropdownMenuTrigger>
         <DropdownMenuContent
@@ -363,11 +361,11 @@ function BookChapterControl({ scrRef, handleSubmit, direction }: BookChapterCont
           // Need to get over the floating window z-index 200
           style={{ width: '233px', maxHeight: '500px', zIndex: '250' }}
           onKeyDown={handleKeyDownContent}
-          align={direction === 'ltr' ? 'start' : 'end'}
+          align={dir === 'ltr' ? 'start' : 'end'}
           ref={contentRef}
         >
           {/* work around until DropdownMenuContent supports a dir prop */}
-          <div dir={direction} className={cn({ 'tw-ps-2': direction === 'rtl' })}>
+          <div className="rtl:tw-ps-2">
             <GoToMenuItem
               handleSort={() => console.log('sorting')}
               handleLocationHistory={() => console.log('location history')}
@@ -393,7 +391,6 @@ function BookChapterControl({ scrRef, handleSubmit, direction }: BookChapterCont
                           ref={(element: HTMLDivElement) => {
                             if (selectedBookId === bookId) menuItemRef.current = element;
                           }}
-                          direction={direction}
                         >
                           <ChapterSelect
                             handleSelectChapter={handleSelectChapter}
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 36e4a5daf5..36a7f9527c 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
@@ -2,6 +2,7 @@ import { FocusEventHandler, forwardRef, KeyboardEvent, MouseEventHandler } from
 import { History } from 'lucide-react';
 import { Input } from '@/components/shadcn-ui/input';
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 export type BookChapterInputProps = {
   handleSearch: (searchString: string) => void;
@@ -11,23 +12,15 @@ 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,
-      direction = 'ltr',
-      ...props
-    }: BookChapterInputProps,
+    { handleSearch, handleKeyDown, handleOnClick, handleSubmit, ...props }: BookChapterInputProps,
     ref,
   ) => {
+    const dir: Direction = readDirection();
     return (
       <div className="tw-relative">
         <Input
@@ -49,8 +42,8 @@ const BookChapterInput = forwardRef<HTMLInputElement, BookChapterInputProps>(
         <History
           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' },
+            { 'tw-right-3': dir === 'ltr' },
+            { 'tw-left-3 tw-right-auto': dir === 'rtl' },
           )}
           onClick={() => {
             // eslint-disable-next-line no-console
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 e8b70d3512..72d88a320b 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
@@ -2,6 +2,7 @@ import { Canon } from '@sillsdev/scripture';
 import { PropsWithChildren, KeyboardEvent, forwardRef } from 'react';
 import { DropdownMenuItem } from '@/components/shadcn-ui/dropdown-menu';
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 export type BookType = 'OT' | 'NT' | 'DC';
 
@@ -25,8 +26,6 @@ type BookMenuItemProps = PropsWithChildren<{
    * coordinated to genre
    */
   bookType: BookType;
-  /** Text and layout direction */
-  direction?: 'rtl' | 'ltr';
 }>;
 
 const BookMenuItem = forwardRef<HTMLDivElement, BookMenuItemProps>(
@@ -39,19 +38,22 @@ const BookMenuItem = forwardRef<HTMLDivElement, BookMenuItemProps>(
       handleKeyDown,
       bookType,
       children,
-      direction,
     }: BookMenuItemProps,
     ref,
   ) => {
+    const dir: Direction = readDirection();
     return (
       <DropdownMenuItem
         ref={ref}
         key={bookId}
         textValue={bookId}
-        className={cn('tw-mx-1 tw-px-1 tw-font-normal tw-text-foreground/80', {
-          // Overriding `data-[highlighted]` changes the default gray background that is normally shown on hover
-          'tw-bg-amber-50 tw-text-yellow-900 data-[highlighted]:tw-bg-amber-100': isSelected,
-        })}
+        className={cn(
+          'tw-mx-1 tw-flex-col tw-items-start tw-px-1 tw-font-normal tw-text-foreground/80',
+          {
+            // Overriding `data-[highlighted]` changes the default gray background that is normally shown on hover
+            'tw-bg-amber-50 tw-text-yellow-900 data-[highlighted]:tw-bg-amber-100': isSelected,
+          },
+        )}
         onSelect={(event: Event) => {
           // preventDefault() here prevents the entire dropdown menu from closing when selecting this item
           event.preventDefault();
@@ -62,7 +64,7 @@ const BookMenuItem = forwardRef<HTMLDivElement, BookMenuItemProps>(
         }}
         onFocus={handleHighlightBook}
         onMouseMove={handleHighlightBook}
-        dir={direction}
+        dir={dir}
       >
         <span
           className={cn(
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 59630006e1..bb9ee9d678 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,7 +62,6 @@ export default function BookSelector({
   startChapter,
   handleSelectStartChapter,
   localizedStrings,
-  direction,
 }: BookSelectorProps) {
   const currentBookText = localizeString(localizedStrings, '%webView_bookSelector_currentBook%');
   const chooseText = localizeString(localizedStrings, '%webView_bookSelector_choose%');
@@ -84,7 +83,6 @@ 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%]">
@@ -101,7 +99,6 @@ export default function BookSelector({
               chapterCount={chapterCount}
               startChapter={startChapter}
               endChapter={endChapter}
-              direction={direction}
             />
           </div>
         </div>
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 85554a14d7..cca0bff68e 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
@@ -1,6 +1,7 @@
 import { ColumnDef, SortDirection } from '@/components/advanced/data-table/data-table.component';
 import { Button } from '@/components/shadcn-ui/button';
 import { ToggleGroup, ToggleGroupItem } from '@/components/shadcn-ui/toggle-group';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 import {
   ArrowDownIcon,
   ArrowUpDownIcon,
@@ -157,7 +158,6 @@ export const inventoryStatusColumn = (
   onApprovedItemsChange: (items: string[]) => void,
   unapprovedItems: string[],
   onUnapprovedItemsChange: (items: string[]) => void,
-  direction: 'rtl' | 'ltr' = 'ltr',
 ): ColumnDef<InventoryTableData> => {
   return {
     accessorKey: 'status',
@@ -174,8 +174,9 @@ export const inventoryStatusColumn = (
     cell: ({ row }) => {
       const status: Status = row.getValue('status');
       const item: string = row.getValue('item');
+      const dir: Direction = readDirection();
       return (
-        <ToggleGroup value={status} variant="outline" type="single" dir={direction}>
+        <ToggleGroup value={status} variant="outline" type="single" dir={dir}>
           <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 12622c0b46..a2e6bc3ac4 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
@@ -32,6 +32,7 @@ import {
   Status,
 } from './inventory-utils';
 import { inventoryAdditionalItemColumn } from './inventory-columns';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 /**
  * Object containing all keys used for localization in this component. If you're using this
@@ -245,8 +246,6 @@ 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 */
@@ -262,7 +261,6 @@ export default function Inventory({
   scope,
   onScopeChange,
   columns,
-  direction,
 }: InventoryProps) {
   const allItemsText = localizeString(localizedStrings, '%webView_inventory_all%');
   const approvedItemsText = localizeString(localizedStrings, '%webView_inventory_approved%');
@@ -392,13 +390,15 @@ export default function Inventory({
     return occurrence[0].occurrences;
   }, [selectedItem, showAdditionalItems, reducedTableData]);
 
+  const dir: Direction = readDirection();
+
   return (
     <div className="pr-twp tw-flex tw-h-full tw-flex-col">
       <div className="tw-flex tw-items-stretch">
         <Select
           onValueChange={(value) => handleStatusFilterChange(value)}
           defaultValue={statusFilter}
-          dir={direction}
+          dir={dir}
         >
           <SelectTrigger className="tw-m-1">
             <SelectValue placeholder="Select filter" />
@@ -410,11 +410,7 @@ export default function Inventory({
             <SelectItem value="unknown">{unknownItemsText}</SelectItem>
           </SelectContent>
         </Select>
-        <Select
-          onValueChange={(value) => handleScopeChange(value)}
-          defaultValue={scope}
-          dir={direction}
-        >
+        <Select onValueChange={(value) => handleScopeChange(value)} defaultValue={scope} dir={dir}>
           <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 ad644f7177..3d19459abc 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,8 +28,6 @@ interface MultiSelectComboBoxProps {
   customSelectedText?: string;
   sortSelected?: boolean;
   icon?: ReactNode;
-  /** Text and layout direction */
-  direction?: 'rtl' | 'ltr';
 }
 
 function MultiSelectComboBox({
@@ -42,7 +40,6 @@ function MultiSelectComboBox({
   customSelectedText,
   sortSelected = false,
   icon = undefined,
-  direction = 'ltr',
 }: MultiSelectComboBoxProps) {
   const [open, setOpen] = useState(false);
 
@@ -112,7 +109,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" dir={direction}>
+      <PopoverContent align="start" className="tw-w-full tw-p-0">
         <Command>
           <CommandInput placeholder={`Search ${placeholder.toLowerCase()}...`} />
           <CommandList>
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 c4f74ae548..df9f434d4e 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
@@ -40,6 +40,7 @@ import {
 } from 'platform-bible-utils';
 import { MouseEvent, useEffect, useMemo, useState } from 'react';
 import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 /**
  * Information (e.g., a checking error or some other type of "transient" annotation) about something
@@ -137,9 +138,6 @@ export type ScriptureResultsViewerProps = ScriptureResultsViewerColumnInfo & {
 
   /** Callback function to notify when a row is selected */
   onRowSelected?: (selectedRow: ScriptureSrcItemDetail | undefined) => void;
-
-  /** Text direction ltr or rtl */
-  direction?: 'ltr' | 'rtl';
 };
 
 function getColumns(
@@ -236,7 +234,6 @@ export default function ScriptureResultsViewer({
   typeColumnName,
   detailsColumnName,
   onRowSelected,
-  direction = 'ltr',
 }: ScriptureResultsViewerProps) {
   const [grouping, setGrouping] = useState<GroupingState>([]);
   const [sorting, setSorting] = useState<SortingState>([{ id: scrBookColId, desc: false }]);
@@ -379,7 +376,6 @@ export default function ScriptureResultsViewer({
           onValueChange={(value) => {
             handleSelectChange(value);
           }}
-          dir={direction}
         >
           <SelectTrigger className="tw-mb-1 tw-mt-2">
             <SelectValue />
@@ -428,6 +424,7 @@ export default function ScriptureResultsViewer({
         )}
         <TableBody>
           {table.getRowModel().rows.map((row, rowIndex) => {
+            const dir: Direction = readDirection();
             return (
               <TableRow
                 data-state={row.getIsSelected() ? 'selected' : ''}
@@ -467,7 +464,7 @@ export default function ScriptureResultsViewer({
                             >
                               {row.getIsExpanded() && <ChevronDown />}
                               {!row.getIsExpanded() &&
-                                (direction === 'ltr' ? <ChevronRight /> : <ChevronLeft />)}{' '}
+                                (dir === 'ltr' ? <ChevronRight /> : <ChevronLeft />)}{' '}
                               {flexRender(cell.column.columnDef.cell, cell.getContext())} (
                               {row.subRows.length})
                             </Button>
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 4751fd51f3..af93b91bf9 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
@@ -10,6 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/shadcn-ui/select';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 const DEFAULT_SCROLL_GROUP_LOCALIZED_STRINGS = {
   [getLocalizeKeyForScrollGroupId('undefined')]: 'Ø',
@@ -91,8 +92,6 @@ export type ScrollGroupSelectorProps = {
    * ```
    */
   localizedStrings?: LanguageStrings;
-  /** Text and layout direction */
-  direction?: 'rtl' | 'ltr';
 };
 
 /** Selector component for choosing a scroll group */
@@ -101,7 +100,6 @@ export default function ScrollGroupSelector({
   scrollGroupId,
   onChangeScrollGroupId,
   localizedStrings = {},
-  direction = 'ltr',
 }: ScrollGroupSelectorProps) {
   const localizedStringsDefaulted = {
     ...DEFAULT_SCROLL_GROUP_LOCALIZED_STRINGS,
@@ -117,6 +115,9 @@ export default function ScrollGroupSelector({
       ),
     ),
   };
+
+  const dir: Direction = readDirection();
+
   return (
     <Select
       value={`${scrollGroupId}`}
@@ -125,7 +126,6 @@ export default function ScrollGroupSelector({
           newScrollGroupString === 'undefined' ? undefined : parseInt(newScrollGroupString, 10),
         )
       }
-      dir={direction}
     >
       <SelectTrigger className="pr-twp tw-w-auto">
         <SelectValue
@@ -136,6 +136,7 @@ export default function ScrollGroupSelector({
         />
       </SelectTrigger>
       <SelectContent
+        align={dir === 'rtl' ? 'end' : 'start'}
         // Need to get over the floating web view z-index 200
         style={{ zIndex: 250 }}
       >
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 8921f2b4d4..4bb4aeccb5 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
@@ -28,9 +28,6 @@ export type TabNavigationContentSearchProps = {
 
   /** Optional flag to make the search bar appear full width */
   isSearchBarFullWidth?: boolean;
-
-  /** Text direction ltr or rtl */
-  direction?: 'ltr' | 'rtl';
 };
 
 export default function TabNavigationContentSearch({
@@ -39,7 +36,6 @@ export default function TabNavigationContentSearch({
   searchPlaceholder,
   headerTitle,
   isSearchBarFullWidth = false,
-  direction = 'ltr',
 }: TabNavigationContentSearchProps) {
   return (
     <div className="pr-twp">
@@ -49,10 +45,9 @@ export default function TabNavigationContentSearch({
           isFullWidth={isSearchBarFullWidth}
           onSearch={onSearch}
           placeholder={searchPlaceholder}
-          direction={direction}
         />
       </div>
-      <VerticalTabs dir={direction}>
+      <VerticalTabs>
         <VerticalTabsList>
           {tabList.map((tab) => (
             <VerticalTabsTrigger key={tab.key} value={tab.value}>
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 b66cd45e82..8b00ef5c0e 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
@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
 import ComboBox from '@/components/basics/combo-box.component';
 import { Label } from '@/components/shadcn-ui/label';
+import { useMemo } from 'react';
 
 export type ChapterRangeSelectorProps = {
   startChapter: number;
@@ -9,8 +9,6 @@ export type ChapterRangeSelectorProps = {
   handleSelectEndChapter: (chapter: number) => void;
   isDisabled?: boolean;
   chapterCount: number;
-  /** Text and layout direction */
-  direction?: 'rtl' | 'ltr';
 };
 
 export default function ChapterRangeSelector({
@@ -20,7 +18,6 @@ export default function ChapterRangeSelector({
   handleSelectEndChapter,
   isDisabled = false,
   chapterCount,
-  direction = 'ltr',
 }: ChapterRangeSelectorProps) {
   const chapterOptions = useMemo(
     () => Array.from({ length: chapterCount }, (_, index) => index + 1),
@@ -52,7 +49,6 @@ export default function ChapterRangeSelector({
         options={chapterOptions}
         getOptionLabel={(option) => option.toString()}
         value={startChapter}
-        dir={direction}
       />
 
       <Label htmlFor="end-chapters-combobox">to</Label>
@@ -64,7 +60,6 @@ export default function ChapterRangeSelector({
         options={chapterOptions}
         getOptionLabel={(option) => option.toString()}
         value={endChapter}
-        dir={direction}
       />
     </>
   );
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 5bc0b4f39e..ae1fcebb87 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
@@ -48,14 +48,10 @@ export type ComboBoxProps<T> = {
   buttonVariant?: ButtonProps['variant'];
   /** Control how the popover menu should be aligned. Defaults to start */
   alignDropDown?: 'start' | 'center' | 'end';
-  /** Text direction ltr or rtl */
-  dir?: Direction;
   /** Optional boolean to set if trigger should be disabled */
   isDisabled?: boolean;
 } & PopoverProps;
 
-type Direction = 'ltr' | 'rtl';
-
 function getOptionLabelDefault(option: ComboBoxOption): string {
   if (typeof option === 'string') {
     return option;
@@ -87,7 +83,6 @@ function ComboBox<T extends ComboBoxOption = ComboBoxOption>({
   commandEmptyMessage = 'No option found',
   buttonVariant = 'outline',
   alignDropDown = 'start',
-  dir = 'ltr',
   isDisabled = false,
   ...props
 }: ComboBoxProps<T>) {
@@ -120,10 +115,9 @@ function ComboBox<T extends ComboBoxOption = ComboBoxOption>({
       <PopoverContent
         align={alignDropDown}
         className={cn('tw-w-[200px] tw-p-0', popoverContentClassName)}
-        dir={dir}
       >
         <Command>
-          <CommandInput dir={dir} placeholder={textPlaceholder} className="tw-text-inherit" />
+          <CommandInput placeholder={textPlaceholder} className="tw-text-inherit" />
           <CommandEmpty>{commandEmptyMessage}</CommandEmpty>
           <CommandList>
             {options.map((option) => (
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 5f70ecb08f..de8568b873 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
@@ -1,5 +1,6 @@
 import { Button } from '@/components/shadcn-ui/button';
 import { Input } from '@/components/shadcn-ui/input';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 import { cn } from '@/utils/shadcn-ui.util';
 import { Search, X } from 'lucide-react';
 import { useState } from 'react';
@@ -21,9 +22,6 @@ 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({
@@ -31,7 +29,6 @@ export default function SearchBar({
   placeholder,
   isFullWidth,
   className,
-  direction = 'ltr',
 }: SearchBarProps) {
   const [searchQuery, setSearchQuery] = useState<string>('');
 
@@ -40,13 +37,15 @@ export default function SearchBar({
     onSearch(searchString);
   };
 
+  const dir: Direction = readDirection();
+
   return (
     <div className="tw-relative">
       <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' },
+          { 'tw-right-3': dir === 'rtl' },
+          { 'tw-left-3': dir === 'ltr' },
         )}
       />
       <Input
@@ -61,8 +60,8 @@ export default function SearchBar({
           size="icon"
           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' },
+            { 'tw-left-0': dir === 'rtl' },
+            { 'tw-right-0': dir === 'ltr' },
           )}
         >
           <X
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 1f9ff19021..3dc5dbe646 100644
--- a/lib/platform-bible-react/src/components/basics/spinner.component.tsx
+++ b/lib/platform-bible-react/src/components/basics/spinner.component.tsx
@@ -4,22 +4,11 @@ import { forwardRef } from 'react';
 
 export type SpinnerProps = LucideProps;
 
-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}
-      />
-    );
-  },
-);
+const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(({ className, ...props }, ref) => {
+  return (
+    <LoaderCircle size={35} className={cn('tw-animate-spin', className)} {...props} ref={ref} />
+  );
+});
 
 Spinner.displayName = 'Spinner';
 
diff --git a/lib/platform-bible-react/src/components/basics/tabs-vertical.tsx b/lib/platform-bible-react/src/components/basics/tabs-vertical.tsx
index 442625d119..7d5f74483d 100644
--- a/lib/platform-bible-react/src/components/basics/tabs-vertical.tsx
+++ b/lib/platform-bible-react/src/components/basics/tabs-vertical.tsx
@@ -3,6 +3,7 @@
 'use client';
 
 import { TabsContentProps, TabsListProps, TabsTriggerProps } from '@/components/shadcn-ui/tabs';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 import { cn } from '@/utils/shadcn-ui.util';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import React from 'react';
@@ -19,14 +20,18 @@ export type LeftTabsTriggerProps = TabsTriggerProps & {
 export const VerticalTabs = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Root>,
   VerticalTabsProps
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Root
-    orientation="vertical"
-    ref={ref}
-    className={cn('tw-flex tw-gap-1 tw-rounded-md tw-text-muted-foreground', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const dir: Direction = readDirection();
+  return (
+    <TabsPrimitive.Root
+      orientation="vertical"
+      ref={ref}
+      className={cn('tw-flex tw-gap-1 tw-rounded-md tw-text-muted-foreground', className)}
+      {...props}
+      dir={dir}
+    />
+  );
+});
 
 VerticalTabs.displayName = TabsPrimitive.List.displayName;
 
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/command.tsx b/lib/platform-bible-react/src/components/shadcn-ui/command.tsx
index fe88d5c8ff..38d39f2b89 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/command.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/command.tsx
@@ -5,6 +5,7 @@ import { Search } from 'lucide-react';
 
 import { cn } from '@/utils/shadcn-ui.util';
 import { Dialog, DialogContent } from '@/components/shadcn-ui/dialog';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -38,19 +39,22 @@ function CommandDialog({ children, ...props }: CommandDialogProps) {
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="tw-flex tw-items-center tw-border-b tw-px-3">
-    <Search className="tw-me-2 tw-h-4 tw-w-4 tw-shrink-0 tw-opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        'tw-flex tw-h-11 tw-w-full tw-rounded-md tw-bg-transparent tw-py-3 tw-text-sm tw-outline-none placeholder:tw-text-muted-foreground disabled:tw-cursor-not-allowed disabled:tw-opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  </div>
-));
+>(({ className, ...props }, ref) => {
+  const dir: Direction = readDirection();
+  return (
+    <div className="tw-flex tw-items-center tw-border-b tw-px-3" dir={dir}>
+      <Search className="tw-me-2 tw-h-4 tw-w-4 tw-shrink-0 tw-opacity-50" />
+      <CommandPrimitive.Input
+        ref={ref}
+        className={cn(
+          'tw-flex tw-h-11 tw-w-full tw-rounded-md tw-bg-transparent tw-py-3 tw-text-sm tw-outline-none placeholder:tw-text-muted-foreground disabled:tw-cursor-not-allowed disabled:tw-opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
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 ec044c9a71..fb8b2e2c15 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/dialog.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/dialog.tsx
@@ -3,6 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 
 import { cn } from '@/utils/shadcn-ui.util';
+import { readDirection } from '@/utils/dir-helper.util';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -27,34 +28,46 @@ 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>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'pr-twp tw-fixed tw-left-[50%] tw-top-[50%] tw-z-50 tw-grid tw-w-full tw-max-w-lg tw-translate-x-[-50%] tw-translate-y-[-50%] tw-gap-4 tw-border tw-bg-background tw-p-6 tw-shadow-lg tw-duration-200 data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[state=closed]:tw-slide-out-to-left-1/2 data-[state=closed]:tw-slide-out-to-top-[48%] data-[state=open]:tw-slide-in-from-left-1/2 data-[state=open]:tw-slide-in-from-top-[48%] sm:tw-rounded-lg',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="tw-absolute tw-right-4 tw-top-4 tw-rounded-sm tw-opacity-70 tw-ring-offset-background tw-transition-opacity hover:tw-opacity-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-ring focus:tw-ring-offset-2 disabled:tw-pointer-events-none data-[state=open]:tw-bg-accent data-[state=open]:tw-text-muted-foreground">
-        <X className="tw-h-4 tw-w-4" />
-        <span className="tw-sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+>(({ className, children, ...props }, ref) => {
+  const dir = readDirection();
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'pr-twp tw-fixed tw-left-[50%] tw-top-[50%] tw-z-50 tw-grid tw-w-full tw-max-w-lg tw-translate-x-[-50%] tw-translate-y-[-50%] tw-gap-4 tw-border tw-bg-background tw-p-6 tw-shadow-lg tw-duration-200 data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[state=closed]:tw-slide-out-to-left-1/2 data-[state=closed]:tw-slide-out-to-top-[48%] data-[state=open]:tw-slide-in-from-left-1/2 data-[state=open]:tw-slide-in-from-top-[48%] sm:tw-rounded-lg',
+          className,
+        )}
+        {...props}
+        dir={dir}
+      >
+        {children}
+        <DialogPrimitive.Close
+          className={cn(
+            'tw-absolute tw-top-4 tw-rounded-sm tw-opacity-70 tw-ring-offset-background tw-transition-opacity hover:tw-opacity-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-ring focus:tw-ring-offset-2 disabled:tw-pointer-events-none data-[state=open]:tw-bg-accent data-[state=open]:tw-text-muted-foreground',
+            { 'tw-right-4': dir === 'ltr' },
+            { 'tw-left-4': dir === 'rtl' },
+          )}
+        >
+          <X className="tw-h-4 tw-w-4" />
+          <span className="tw-sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('tw-flex tw-flex-col tw-space-y-1.5 tw-text-center sm:tw-text-left', className)}
+      className={cn(
+        'tw-flex tw-flex-col tw-space-y-1.5 tw-text-center sm:tw-text-start',
+        className,
+      )}
       {...props}
     />
   );
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 3becc90aad..e958090735 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
@@ -3,6 +3,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
 
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 export const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -113,26 +114,27 @@ the scrollbar to appear left in an rtl layout (e.g. see book-chapter-control.com
 export const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   DropdownMenuContentProps
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        /* adding pr-twp because the dropdown content is added to the dom as a sibling to the app root */
-        'pr-twp tw-z-50 tw-min-w-[8rem] tw-overflow-hidden tw-rounded-md tw-border tw-bg-popover tw-p-1 tw-text-popover-foreground tw-shadow-md data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2',
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
+>(({ className, sideOffset = 4, children, ...props }, ref) => {
+  const dir: Direction = readDirection();
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          /* adding pr-twp because the dropdown content is added to the dom as a sibling to the app root */
+          'pr-twp tw-z-50 tw-min-w-[8rem] tw-overflow-hidden tw-rounded-md tw-border tw-bg-popover tw-p-1 tw-text-popover-foreground tw-shadow-md data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2',
+          className,
+        )}
+        {...props}
+      >
+        <div dir={dir}>{children}</div>
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  );
+});
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-/**
- * TODO: fix: direction is not automatically handled by this component, so that shortcuts are
- * display always to the right
- */
 export const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   DropdownMenuItemProps
@@ -140,8 +142,8 @@ export const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      // removed: tw-relative tw-flex focus:tw-text-accent-foreground
-      'tw-cursor-default tw-select-none tw-items-center tw-rounded-sm tw-px-2 tw-py-1.5 tw-text-sm tw-outline-none tw-transition-colors focus:tw-bg-accent data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50',
+      // removed: tw-relative focus:tw-text-accent-foreground
+      'tw-flex tw-cursor-default tw-select-none tw-items-center tw-rounded-sm tw-px-2 tw-py-1.5 tw-text-sm tw-outline-none tw-transition-colors focus:tw-bg-accent data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50',
       inset && 'tw-pl-8',
       className,
     )}
@@ -157,13 +159,13 @@ export const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'tw-relative tw-flex tw-cursor-default tw-select-none tw-items-center tw-rounded-sm tw-py-1.5 tw-pl-8 tw-pr-2 tw-text-sm tw-outline-none tw-transition-colors focus:tw-bg-accent focus:tw-text-accent-foreground data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50',
+      'tw-relative tw-flex tw-cursor-default tw-select-none tw-items-center tw-rounded-sm tw-py-1.5 tw-pe-2 tw-ps-8 tw-text-sm tw-outline-none tw-transition-colors focus:tw-bg-accent focus:tw-text-accent-foreground data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50',
       className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="tw-absolute tw-left-2 tw-flex tw-h-3.5 tw-w-3.5 tw-items-center tw-justify-center">
+    <span className="tw-absolute tw-flex tw-h-3.5 tw-w-3.5 tw-items-center tw-justify-center ltr:tw-left-2 rtl:tw-right-2">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="tw-h-4 tw-w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -180,12 +182,12 @@ export const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'tw-relative tw-flex tw-cursor-default tw-select-none tw-items-center tw-rounded-sm tw-py-1.5 tw-pl-8 tw-pr-2 tw-text-sm tw-outline-none tw-transition-colors focus:tw-bg-accent focus:tw-text-accent-foreground data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50',
+      'tw-relative tw-flex tw-cursor-default tw-select-none tw-items-center tw-rounded-sm tw-py-1.5 tw-pe-2 tw-ps-8 tw-text-sm tw-outline-none tw-transition-colors focus:tw-bg-accent focus:tw-text-accent-foreground data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50',
       className,
     )}
     {...props}
   >
-    <span className="tw-absolute tw-left-2 tw-flex tw-h-3.5 tw-w-3.5 tw-items-center tw-justify-center">
+    <span className="tw-absolute tw-flex tw-h-3.5 tw-w-3.5 tw-items-center tw-justify-center ltr:tw-left-2 rtl:tw-right-2">
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className="tw-h-2 tw-w-2 tw-fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -222,7 +224,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 export function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps) {
   return (
     <span
-      className={cn('tw-ml-auto tw-text-xs tw-tracking-widest tw-opacity-60', className)}
+      className={cn('tw-ms-auto tw-text-xs tw-tracking-widest tw-opacity-60', className)}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
     />
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/popover.tsx b/lib/platform-bible-react/src/components/shadcn-ui/popover.tsx
index da8b7889ba..2cc37d6016 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/popover.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/popover.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import React from 'react';
 
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 import { cn } from '@/utils/shadcn-ui.util';
 
 const Popover = PopoverPrimitive.Root;
@@ -10,20 +11,24 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'pr-twp tw-z-50 tw-w-72 tw-rounded-md tw-border tw-bg-popover tw-p-4 tw-text-popover-foreground tw-shadow-md tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2',
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
+  const dir: Direction = readDirection();
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'pr-twp tw-z-50 tw-w-72 tw-rounded-md tw-border tw-bg-popover tw-p-4 tw-text-popover-foreground tw-shadow-md tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2',
+          className,
+        )}
+        {...props}
+        dir={dir}
+      />
+    </PopoverPrimitive.Portal>
+  );
+});
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+export { Popover, PopoverContent, PopoverTrigger };
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/radio-group.tsx b/lib/platform-bible-react/src/components/shadcn-ui/radio-group.tsx
index e422c24c05..9264f9ce9e 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/radio-group.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/radio-group.tsx
@@ -3,16 +3,19 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { Circle } from 'lucide-react';
 
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
+  const dir: Direction = readDirection();
   return (
     <RadioGroupPrimitive.Root
       className={cn('pr-twp tw-grid tw-gap-2', className)}
       {...props}
       ref={ref}
+      dir={dir}
     />
   );
 });
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/select.tsx b/lib/platform-bible-react/src/components/shadcn-ui/select.tsx
index df803ac947..8c383501bc 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/select.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/select.tsx
@@ -3,6 +3,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 const Select = SelectPrimitive.Root;
 
@@ -13,21 +14,25 @@ const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'tw-flex tw-h-10 tw-w-full tw-items-center tw-justify-between tw-rounded-md tw-border tw-border-input tw-bg-background tw-px-3 tw-py-2 tw-text-sm tw-ring-offset-background placeholder:tw-text-muted-foreground focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-ring focus:tw-ring-offset-2 disabled:tw-cursor-not-allowed disabled:tw-opacity-50 [&>span]:tw-line-clamp-1',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="tw-h-4 tw-w-4 tw-opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
+>(({ className, children, ...props }, ref) => {
+  const dir: Direction = readDirection();
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'tw-flex tw-h-10 tw-w-full tw-items-center tw-justify-between tw-rounded-md tw-border tw-border-input tw-bg-background tw-px-3 tw-py-2 tw-text-sm tw-ring-offset-background placeholder:tw-text-muted-foreground focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-ring focus:tw-ring-offset-2 disabled:tw-cursor-not-allowed disabled:tw-opacity-50 [&>span]:tw-line-clamp-1',
+        className,
+      )}
+      {...props}
+      dir={dir}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="tw-h-4 tw-w-4 tw-opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+});
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
@@ -61,33 +66,36 @@ SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayNam
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'pr-twp tw-relative tw-z-50 tw-max-h-96 tw-min-w-[8rem] tw-overflow-hidden tw-rounded-md tw-border tw-bg-popover tw-text-popover-foreground tw-shadow-md data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2',
-        position === 'popper' &&
-          'data-[side=bottom]:tw-translate-y-1 data-[side=left]:tw--translate-x-1 data-[side=right]:tw-translate-x-1 data-[side=top]:tw--translate-y-1',
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
+>(({ className, children, position = 'popper', ...props }, ref) => {
+  const dir: Direction = readDirection();
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
         className={cn(
-          'tw-p-1',
+          'pr-twp tw-relative tw-z-50 tw-max-h-96 tw-min-w-[8rem] tw-overflow-hidden tw-rounded-md tw-border tw-bg-popover tw-text-popover-foreground tw-shadow-md data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2',
           position === 'popper' &&
-            'tw-h-[var(--radix-select-trigger-height)] tw-w-full tw-min-w-[var(--radix-select-trigger-width)]',
+            'data-[side=bottom]:tw-translate-y-1 data-[side=left]:tw--translate-x-1 data-[side=right]:tw-translate-x-1 data-[side=top]:tw--translate-y-1',
+          className,
         )}
+        position={position}
+        {...props}
       >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'tw-p-1',
+            position === 'popper' &&
+              'tw-h-[var(--radix-select-trigger-height)] tw-w-full tw-min-w-[var(--radix-select-trigger-width)]',
+          )}
+        >
+          <div dir={dir}>{children}</div>
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
@@ -109,12 +117,12 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'tw-relative tw-flex tw-w-full tw-cursor-default tw-select-none tw-items-center tw-rounded-sm tw-py-1.5 tw-pl-8 tw-pr-2 tw-text-sm tw-outline-none focus:tw-bg-accent focus:tw-text-accent-foreground data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50',
+      'tw-relative tw-flex tw-w-full tw-cursor-default tw-select-none tw-items-center tw-rounded-sm tw-py-1.5 tw-pe-2 tw-ps-8 tw-text-sm tw-outline-none focus:tw-bg-accent focus:tw-text-accent-foreground data-[disabled]:tw-pointer-events-none data-[disabled]:tw-opacity-50',
       className,
     )}
     {...props}
   >
-    <span className="tw-absolute tw-left-2 tw-flex tw-h-3.5 tw-w-3.5 tw-items-center tw-justify-center">
+    <span className="tw-absolute tw-start-2 tw-flex tw-h-3.5 tw-w-3.5 tw-items-center tw-justify-center">
       <SelectPrimitive.ItemIndicator>
         <Check className="tw-h-4 tw-w-4" />
       </SelectPrimitive.ItemIndicator>
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/sidebar.tsx b/lib/platform-bible-react/src/components/shadcn-ui/sidebar.tsx
index 2866245553..f2e0900689 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/sidebar.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/sidebar.tsx
@@ -14,6 +14,7 @@ import {
   TooltipTrigger,
 } from '@/components/shadcn-ui/tooltip';
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 /**
  * CUSTOM: Changes from the original code from Shadcn- Removed uses of useIsMobile, Sheet, and
@@ -25,13 +26,15 @@ const SIDEBAR_WIDTH_ICON = '3rem';
 // CUSTOM: Commented this out pending a discussion with UX about keyboard shortcuts
 // const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
+type Side = 'primary' | 'secondary';
+
 type SidebarContextProps = {
   state: 'expanded' | 'collapsed';
   open: boolean;
   setOpen: (open: boolean) => void;
   toggleSidebar: () => void;
   // CUSTOM: this was moved from Sidebar to SidebarProvider to also be able to flip the icon based on the side
-  side: 'left' | 'right';
+  side: Side;
 };
 
 const SidebarContext = React.createContext<SidebarContextProps | undefined>(undefined);
@@ -51,7 +54,7 @@ const SidebarProvider = React.forwardRef<
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    side?: 'left' | 'right';
+    side?: Side;
   }
 >(
   (
@@ -62,7 +65,7 @@ const SidebarProvider = React.forwardRef<
       className,
       style,
       children,
-      side = 'left',
+      side = 'primary',
       ...props
     },
     ref,
@@ -106,15 +109,19 @@ const SidebarProvider = React.forwardRef<
     // This makes it easier to style the sidebar with Tailwind classes.
     const state = isOpen ? 'expanded' : 'collapsed';
 
+    const dir: Direction = readDirection();
+    const oppositeSide: Side = side === 'primary' ? 'secondary' : 'primary';
+    const directionAwareSide = dir === 'ltr' ? side : oppositeSide;
+
     const contextValue = React.useMemo<SidebarContextProps>(
       () => ({
         state,
         open: isOpen,
         setOpen,
         toggleSidebar,
-        side,
+        side: directionAwareSide,
       }),
-      [state, isOpen, setOpen, toggleSidebar, side],
+      [state, isOpen, setOpen, toggleSidebar, directionAwareSide],
     );
 
     return (
@@ -184,7 +191,7 @@ const Sidebar = React.forwardRef<
         className={cn(
           'tw-relative tw-h-svh tw-w-[--sidebar-width] tw-bg-transparent tw-transition-[width] tw-duration-200 tw-ease-linear',
           'group-data-[collapsible=offcanvas]:tw-w-0',
-          'group-data-[side=right]:tw-rotate-180',
+          'group-data-[side=secondary]:tw-rotate-180',
           variant === 'floating' || variant === 'inset'
             ? 'group-data-[collapsible=icon]:tw-w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
             : 'group-data-[collapsible=icon]:tw-w-[--sidebar-width-icon]',
@@ -194,13 +201,13 @@ const Sidebar = React.forwardRef<
         className={cn(
           // CUSTOM: Switched tw-fixed to tw-absolute here to scope the sidebar inside of it's container
           'tw-absolute tw-inset-y-0 tw-z-10 tw-hidden tw-h-svh tw-w-[--sidebar-width] tw-transition-[left,right,width] tw-duration-200 tw-ease-linear md:tw-flex',
-          context.side === 'left'
+          context.side === 'primary'
             ? 'tw-left-0 group-data-[collapsible=offcanvas]:tw-left-[calc(var(--sidebar-width)*-1)]'
             : 'tw-right-0 group-data-[collapsible=offcanvas]:tw-right-[calc(var(--sidebar-width)*-1)]',
           // Adjust the padding for floating and inset variants.
           variant === 'floating' || variant === 'inset'
             ? 'tw-p-2 group-data-[collapsible=icon]:tw-w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-            : 'group-data-[collapsible=icon]:tw-w-[--sidebar-width-icon] group-data-[side=left]:tw-border-r group-data-[side=right]:tw-border-l',
+            : 'group-data-[collapsible=icon]:tw-w-[--sidebar-width-icon] group-data-[side=primary]:tw-border-r group-data-[side=secondary]:tw-border-l',
           className,
         )}
         {...props}
@@ -236,7 +243,7 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      {context.side === 'left' ? <PanelLeft /> : <PanelRight />}
+      {context.side === 'primary' ? <PanelLeft /> : <PanelRight />}
       <span className="tw-sr-only">Toggle Sidebar</span>
     </Button>
   );
@@ -257,12 +264,12 @@ const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'bu
         onClick={toggleSidebar}
         title="Toggle Sidebar"
         className={cn(
-          'tw-absolute tw-inset-y-0 tw-z-20 tw-hidden tw-w-4 tw--translate-x-1/2 tw-transition-all tw-ease-linear after:tw-absolute after:tw-inset-y-0 after:tw-left-1/2 after:tw-w-[2px] hover:after:tw-bg-sidebar-border group-data-[side=left]:tw--right-4 group-data-[side=right]:tw-left-0 sm:tw-flex',
-          '[[data-side=left]_&]:tw-cursor-w-resize [[data-side=right]_&]:tw-cursor-e-resize',
-          '[[data-side=left][data-state=collapsed]_&]:tw-cursor-e-resize [[data-side=right][data-state=collapsed]_&]:tw-cursor-w-resize',
+          'tw-absolute tw-inset-y-0 tw-z-20 tw-hidden tw-w-4 tw--translate-x-1/2 tw-transition-all tw-ease-linear after:tw-absolute after:tw-inset-y-0 after:tw-left-1/2 after:tw-w-[2px] hover:after:tw-bg-sidebar-border group-data-[side=primary]:tw--right-4 group-data-[side=secondary]:tw-left-0 sm:tw-flex',
+          '[[data-side=secondary]_&]:tw-cursor-e-resize [[data-side=secondary]_&]:tw-cursor-w-resize',
+          '[[data-side=primary][data-state=collapsed]_&]:tw-cursor-e-resize [[data-side=secondary][data-state=collapsed]_&]:tw-cursor-w-resize',
           'group-data-[collapsible=offcanvas]:tw-translate-x-0 group-data-[collapsible=offcanvas]:after:tw-left-full group-data-[collapsible=offcanvas]:hover:tw-bg-sidebar',
-          '[[data-side=left][data-collapsible=offcanvas]_&]:tw--right-2',
-          '[[data-side=right][data-collapsible=offcanvas]_&]:tw--left-2',
+          '[[data-side=primary][data-collapsible=offcanvas]_&]:tw--right-2',
+          '[[data-side=secondary][data-collapsible=offcanvas]_&]:tw--left-2',
           className,
         )}
         {...props}
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/slider.tsx b/lib/platform-bible-react/src/components/shadcn-ui/slider.tsx
index e957a3847b..ee819ecf80 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/slider.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/slider.tsx
@@ -2,25 +2,30 @@ import React from 'react';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      'pr-twp tw-relative tw-flex tw-w-full tw-touch-none tw-select-none tw-items-center',
-      className,
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="tw-relative tw-h-2 tw-w-full tw-grow tw-overflow-hidden tw-rounded-full tw-bg-secondary">
-      <SliderPrimitive.Range className="tw-absolute tw-h-full tw-bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="tw-block tw-h-5 tw-w-5 tw-rounded-full tw-border-2 tw-border-primary tw-bg-background tw-ring-offset-background tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-ring focus-visible:tw-ring-offset-2 disabled:tw-pointer-events-none disabled:tw-opacity-50" />
-  </SliderPrimitive.Root>
-));
+>(({ className, ...props }, ref) => {
+  const dir: Direction = readDirection();
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn(
+        'pr-twp tw-relative tw-flex tw-w-full tw-touch-none tw-select-none tw-items-center',
+        className,
+      )}
+      {...props}
+      dir={dir}
+    >
+      <SliderPrimitive.Track className="tw-relative tw-h-2 tw-w-full tw-grow tw-overflow-hidden tw-rounded-full tw-bg-secondary">
+        <SliderPrimitive.Range className="tw-absolute tw-h-full tw-bg-primary" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className="tw-block tw-h-5 tw-w-5 tw-rounded-full tw-border-2 tw-border-primary tw-bg-background tw-ring-offset-background tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-ring focus-visible:tw-ring-offset-2 disabled:tw-pointer-events-none disabled:tw-opacity-50" />
+    </SliderPrimitive.Root>
+  );
+});
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };
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 2c21a5714d..5c9ab4074b 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/switch.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/switch.tsx
@@ -2,34 +2,38 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import React from 'react';
 
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  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',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => {
+  const dir: Direction = readDirection();
+  return (
+    <SwitchPrimitives.Root
       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':
-            direction === 'ltr',
-        },
-        {
-          'data-[state=checked]:tw-translate-x-[-20px] data-[state=unchecked]:tw-translate-x-0':
-            direction === 'rtl',
-        },
+        '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',
+        className,
       )}
-    />
-  </SwitchPrimitives.Root>
-));
+      {...props}
+      ref={ref}
+    >
+      <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':
+              dir === 'ltr',
+          },
+          {
+            'data-[state=checked]:tw-translate-x-[-20px] data-[state=unchecked]:tw-translate-x-0':
+              dir === 'rtl',
+          },
+        )}
+      />
+    </SwitchPrimitives.Root>
+  );
+});
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/tabs.tsx b/lib/platform-bible-react/src/components/shadcn-ui/tabs.tsx
index b9d16ee167..bc1bdd9223 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/tabs.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/tabs.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 export const Tabs = TabsPrimitive.Root;
 
@@ -20,16 +21,20 @@ export type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimiti
 export const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   TabsListProps
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'tw-inline-flex tw-h-10 tw-items-center tw-justify-center tw-rounded-md tw-bg-muted tw-p-1 tw-text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const dir: Direction = readDirection();
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        'tw-inline-flex tw-h-10 tw-items-center tw-justify-center tw-rounded-md tw-bg-muted tw-p-1 tw-text-muted-foreground',
+        className,
+      )}
+      {...props}
+      dir={dir}
+    />
+  );
+});
 TabsList.displayName = TabsPrimitive.List.displayName;
 
 export const TabsTrigger = React.forwardRef<
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/toggle-group.tsx b/lib/platform-bible-react/src/components/shadcn-ui/toggle-group.tsx
index 6993ccbc98..754bdf378f 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/toggle-group.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/toggle-group.tsx
@@ -4,6 +4,7 @@ import { type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/utils/shadcn-ui.util';
 import { toggleVariants } from '@/components/shadcn-ui/toggle';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
   size: 'default',
@@ -14,21 +15,25 @@ const ToggleGroup = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
     VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn('pr-twp tw-flex tw-items-center tw-justify-center tw-gap-1', className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider
-      // Suppress warning produced by imported shadcn code
-      // eslint-disable-next-line react/jsx-no-constructed-context-values
-      value={{ variant, size }}
+>(({ className, variant, size, children, ...props }, ref) => {
+  const dir: Direction = readDirection();
+  return (
+    <ToggleGroupPrimitive.Root
+      ref={ref}
+      className={cn('pr-twp tw-flex tw-items-center tw-justify-center tw-gap-1', className)}
+      {...props}
+      dir={dir}
     >
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
+      <ToggleGroupContext.Provider
+        // Suppress warning produced by imported shadcn code
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        value={{ variant, size }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+});
 
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
diff --git a/lib/platform-bible-react/src/preview/app.component.tsx b/lib/platform-bible-react/src/preview/app.component.tsx
index b79ddc6bab..e08b2596f8 100644
--- a/lib/platform-bible-react/src/preview/app.component.tsx
+++ b/lib/platform-bible-react/src/preview/app.component.tsx
@@ -1,18 +1,28 @@
-import { useState } from 'react';
+import { persistDirection } from '@/utils/dir-helper.util';
+import { useEffect, useState } from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '..';
 import Compositions from './pages/components/advanced.component';
 import Basics from './pages/components/basics.component';
 import Guide from './pages/guide.component';
 import Layouts from './pages/layouts.component';
 import Playground from './pages/playground.component';
+import ContactButtons from './preview-components/contact-buttons.component';
 import { DirToggle, Direction } from './preview-components/direction-toggle.component';
 import { ThemeProvider } from './preview-components/theme-provider.component';
 import { ThemeButton } from './preview-components/theme-toggle.component';
-import ContactButtons from './preview-components/contact-buttons.component';
+
+const initialDirection: Direction = 'ltr';
 
 function App() {
-  const [direction, setDirection] = useState<Direction>('ltr');
-  const changeDirectionHandler = (dir: Direction) => setDirection(dir);
+  const [direction, setDirection] = useState<Direction>(initialDirection);
+  const changeDirectionHandler = (dir: Direction) => {
+    setDirection(dir);
+    persistDirection(dir);
+  };
+
+  useEffect(() => {
+    changeDirectionHandler(initialDirection);
+  }, []);
 
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
@@ -35,13 +45,13 @@ function App() {
           </TabsList>
 
           <TabsContent value="Basics">
-            <Basics direction={direction} />
+            <Basics />
           </TabsContent>
           <TabsContent value="Advanced">
-            <Compositions direction={direction} />
+            <Compositions />
           </TabsContent>
           <TabsContent value="Layouts">
-            <Layouts direction={direction} />
+            <Layouts />
           </TabsContent>
           <TabsContent value="Playground">
             <Playground />
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 1d5ba0315b..e985f6bda1 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
@@ -1,27 +1,26 @@
 import BookChapterControl from '@/components/advanced/book-chapter-control/book-chapter-control.component';
 import DataTable from '@/components/advanced/data-table/data-table.component';
+import ScrollGroupSelector from '@/components/advanced/scroll-group-selector.component';
+import TabNavigationContentSearch from '@/components/advanced/tab-navigation-content-search.component';
 import {
   VerticalTabs,
   VerticalTabsContent,
   VerticalTabsList,
   VerticalTabsTrigger,
 } from '@/components/basics/tabs-vertical';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { defaultScrRef, ScrollGroupId } from 'platform-bible-utils';
 import { useState } from 'react';
-import TabNavigationContentSearch from '@/components/advanced/tab-navigation-content-search.component';
-import ScrollGroupSelector from '@/components/advanced/scroll-group-selector.component';
-import MarketplaceButtonExamples from './advanced/marketplace-buttons.example.component';
-import ScriptureResultsViewerExample from './advanced/scripture-results-viewer.examples.component';
-import { columns, data } from './data-sources/data-table-content';
-import MarketplaceExamples from './advanced/marketplace.example.component';
-import InventoryExample from './advanced/inventory-example.component';
-import SettingsListExamples from './advanced/settings-list.examples.component';
 import BookSelectorExample from './advanced/book-selector-example.component';
+import InventoryExample from './advanced/inventory-example.component';
 import MarkdownRendererExample from './advanced/markdown-renderer-example.component';
+import MarketplaceButtonExamples from './advanced/marketplace-buttons.example.component';
+import MarketplaceExamples from './advanced/marketplace.example.component';
 import MultiSelectComboBoxExample from './advanced/multi-select-combo-box-example';
+import ScriptureResultsViewerExample from './advanced/scripture-results-viewer.examples.component';
+import SettingsListExamples from './advanced/settings-list.examples.component';
+import { columns, data } from './data-sources/data-table-content';
 
-function Compositions({ direction }: HasDirection) {
+function Compositions() {
   const [scrRef, setScrRef] = useState(defaultScrRef);
   const [scrollGroupId, setScrollGroupId] = useState<ScrollGroupId | undefined>(0);
   const [searchValue, setSearchValue] = useState<string>('');
@@ -65,7 +64,7 @@ function Compositions({ direction }: HasDirection) {
       <p className="tw-mb-2 tw-text-muted-foreground">
         A place for components that are composed from basic components
       </p>
-      <VerticalTabs defaultValue="Book Chapter Control" dir={direction}>
+      <VerticalTabs defaultValue="Book Chapter Control">
         <VerticalTabsList>
           <VerticalTabsTrigger value="Book Chapter Control">
             Book Chapter Control
@@ -89,12 +88,12 @@ function Compositions({ direction }: HasDirection) {
         </VerticalTabsList>
 
         <VerticalTabsContent value="Book Chapter Control">
-          <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} direction={direction} />
+          <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
           <div>{JSON.stringify(scrRef)}</div>
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Book Selector">
-          <BookSelectorExample direction={direction} />
+          <BookSelectorExample />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Data Table">
@@ -102,7 +101,7 @@ function Compositions({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Marketplace">
-          <VerticalTabs dir={direction}>
+          <VerticalTabs>
             <VerticalTabsList>
               <VerticalTabsTrigger value="Marketplace Buttons">
                 Marketplace Buttons
@@ -123,11 +122,11 @@ function Compositions({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Multi-select Combo Box">
-          <MultiSelectComboBoxExample direction={direction} />
+          <MultiSelectComboBoxExample />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Inventory">
-          <InventoryExample direction={direction} />
+          <InventoryExample />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Navigation Content Search">
@@ -137,12 +136,11 @@ function Compositions({ direction }: HasDirection) {
             onSearch={handleSearchChange}
             searchPlaceholder="Search..."
             isSearchBarFullWidth
-            direction={direction}
           />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Result List">
-          <ScriptureResultsViewerExample direction={direction} />
+          <ScriptureResultsViewerExample />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Settings List">
@@ -154,7 +152,6 @@ function Compositions({ direction }: HasDirection) {
             availableScrollGroupIds={[undefined, ...Array(5).keys()]}
             scrollGroupId={scrollGroupId}
             onChangeScrollGroupId={setScrollGroupId}
-            direction={direction}
           />
           <div>Scroll Group Id: {`${scrollGroupId}`}</div>
         </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 a0fc94610b..8a1e0fddc3 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,5 +1,4 @@
 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';
 
@@ -9,7 +8,7 @@ const localizedStrings = {
   '%webView_bookSelector_chooseBooks%': 'Choose Books',
 };
 
-function BookSelectorExample({ direction }: HasDirection) {
+function BookSelectorExample() {
   const [startChapter, setStartChapter] = useState<number>(0);
   const [endChapter, setEndChapter] = useState<number>(0);
   const selectedBooksIds = [
@@ -37,7 +36,6 @@ function BookSelectorExample({ direction }: HasDirection) {
       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 e3af2b42cd..14a01017af 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,7 +6,6 @@ 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';
@@ -30,7 +29,6 @@ const createColumns = (
   onApprovedItemsChange: (items: string[]) => void,
   unapprovedItems: string[],
   onUnapprovedItemsChange: (items: string[]) => void,
-  direction: 'ltr' | 'rtl',
 ): ColumnDef<InventoryTableData>[] => [
   inventoryItemColumn('Item'),
   inventoryCountColumn('Count'),
@@ -40,11 +38,10 @@ const createColumns = (
     onApprovedItemsChange,
     unapprovedItems,
     onUnapprovedItemsChange,
-    direction,
   ),
 ];
 
-function InventoryExample({ direction }: HasDirection) {
+function InventoryExample() {
   const [scrRef, setScrRef] = useState(defaultScrRef);
   const [approvedItems, setApprovedItems] = useState<string[]>(['well', 'he']);
   const [unapprovedItems, setUnapprovedItems] = useState<string[]>(['for', 'of']);
@@ -66,12 +63,10 @@ function InventoryExample({ direction }: HasDirection) {
           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'],
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 5c5c2f71d8..a640fcfae9 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,5 +1,4 @@
 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';
 
@@ -124,7 +123,7 @@ const resources = [
   },
 ];
 
-function MultiSelectComboBoxExample({ direction }: HasDirection) {
+function MultiSelectComboBoxExample() {
   const [selectedTypes, setSelectedTypes] = useState<string[]>(types.map((type) => type.value));
 
   const getOptionsCount = (option: MultiSelectComboBoxEntry): number => {
@@ -146,7 +145,6 @@ function MultiSelectComboBoxExample({ direction }: HasDirection) {
               : `${selectedTypes.length} type${selectedTypes.length > 1 ? 's' : ''}`
           }
           icon={<Blocks />}
-          direction={direction}
         />
       </div>
 
diff --git a/lib/platform-bible-react/src/preview/pages/components/advanced/scripture-results-viewer.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/advanced/scripture-results-viewer.examples.component.tsx
index f87204df9e..8ddc0d24e7 100644
--- a/lib/platform-bible-react/src/preview/pages/components/advanced/scripture-results-viewer.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/advanced/scripture-results-viewer.examples.component.tsx
@@ -1,10 +1,9 @@
 import ScriptureResultsViewer from '@/components/advanced/scripture-results-viewer/scripture-results-viewer.component';
 import { Button } from '@/components/shadcn-ui/button';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { useState } from 'react';
 import generateRandomCheckingData from '../data-sources/generate-random-checking-data';
 
-export default function ScriptureResultsViewerExample({ direction }: HasDirection) {
+export default function ScriptureResultsViewerExample() {
   const checks = [
     {
       id: 'preview.repeatedWords',
@@ -80,7 +79,6 @@ export default function ScriptureResultsViewerExample({ direction }: HasDirectio
         scriptureReferenceColumnName="Scripture Reference"
         typeColumnName="Check Type"
         detailsColumnName="Error Details"
-        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 e7621e36b1..2778c29000 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
@@ -4,7 +4,6 @@ import {
   VerticalTabsList,
   VerticalTabsTrigger,
 } from '@/components/basics/tabs-vertical';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import ExampleAlerts from './basics/alert.examples.component';
 import BadgeExamples from './basics/badge.examples.component';
 import ButtonExamples from './basics/button.examples.component';
@@ -13,6 +12,7 @@ import ChapterRangeSelectorExample from './basics/chapter-range-example.componen
 import CheckboxExamples from './basics/checkbox.examples.component';
 import ChecklistExamples from './basics/checklist.examples.component';
 import ComboBoxExamples from './basics/combo-box.examples.component';
+import DialogExamples from './basics/dialog.examples.component';
 import DropdownExamples from './basics/dropdown.examples.component';
 import InputExamples from './basics/input.examples.component';
 import RadioGroupExamples from './basics/radio-group.examples';
@@ -26,13 +26,12 @@ 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) {
+function Basics() {
   return (
     <div>
       <p className="tw-mb-2 tw-text-muted-foreground">A place for the most simple components</p>
-      <VerticalTabs defaultValue="Button" dir={direction}>
+      <VerticalTabs defaultValue="Button">
         <VerticalTabsList>
           <VerticalTabsTrigger value="Alert">Alert</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Badge">Badge</VerticalTabsTrigger>
@@ -73,11 +72,11 @@ function Basics({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Card">
-          <CardExamples direction={direction} />
+          <CardExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Chapter Range Selector">
-          <ChapterRangeSelectorExample direction={direction} />
+          <ChapterRangeSelectorExample />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Checkbox">
@@ -89,11 +88,11 @@ function Basics({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="ComboBox">
-          <ComboBoxExamples direction={direction} />
+          <ComboBoxExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Dialog">
-          <DialogExamples direction={direction} />
+          <DialogExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Input">
@@ -101,25 +100,25 @@ function Basics({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Radio Group">
-          <RadioGroupExamples direction={direction} />
+          <RadioGroupExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Search Bar">
-          <SearchBarExamples direction={direction} />
+          <SearchBarExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Select">
-          <SelectExamples direction={direction} />
+          <SelectExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Sidebar">
           <div className="tw-relative tw-overflow-hidden">
-            <SettingsSidebarExamples direction={direction} />
+            <SettingsSidebarExamples />
           </div>
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Slider">
-          <SliderExamples direction={direction} />
+          <SliderExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Sonner">
@@ -127,19 +126,19 @@ function Basics({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Spinner">
-          <SpinnerExamples direction={direction} />
+          <SpinnerExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Switch">
-          <SwitchExamples direction={direction} />
+          <SwitchExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Dropdown Menu">
-          <DropdownExamples direction={direction} />
+          <DropdownExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Tabs">
-          <TabExamples direction={direction} />
+          <TabExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Table">
@@ -147,7 +146,7 @@ function Basics({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Toggle Group">
-          <ToggleGroupExamples direction={direction} />
+          <ToggleGroupExamples />
         </VerticalTabsContent>
       </VerticalTabs>
     </div>
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/card.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/card.examples.component.tsx
index 3dcad382de..04f795a07a 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/card.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/card.examples.component.tsx
@@ -10,11 +10,10 @@ import {
 import { Input } from '@/components/shadcn-ui/input';
 import { Label } from '@/components/shadcn-ui/label';
 import { Switch } from '@/components/shadcn-ui/switch';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { BellRing, Check } from 'lucide-react';
 import SelectExamples from './select.examples.component';
 
-export default function CardExamples({ direction }: HasDirection) {
+export default function CardExamples() {
   const cardContent = (
     <div className="tw-flex tw-items-center tw-gap-x-4 tw-rounded-md tw-border tw-p-4">
       <BellRing />
@@ -76,7 +75,7 @@ export default function CardExamples({ direction }: HasDirection) {
               </div>
               <div className="tw-flex tw-flex-col tw-space-y-1.5">
                 <Label htmlFor="framework">Framework</Label>
-                <SelectExamples direction={direction} />
+                <SelectExamples />
               </div>
             </div>
           </form>
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 b405412a5f..b45dfdc8d2 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,9 +1,8 @@
 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({ direction }: HasDirection) {
+export default function ChapterRangeSelectorExample() {
   const chapterCount = getChaptersForBook(1);
   const [startChapter, setStartChapter] = useState(1);
   const [endChapter, setEndChapter] = useState(chapterCount);
@@ -22,7 +21,6 @@ export default function ChapterRangeSelectorExample({ direction }: HasDirection)
       handleSelectStartChapter={handleSelectStart}
       handleSelectEndChapter={handleSelectEnd}
       chapterCount={chapterCount}
-      direction={direction}
     />
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/combo-box.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/combo-box.examples.component.tsx
index a5aad0ecb5..70ccc5cb97 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/combo-box.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/combo-box.examples.component.tsx
@@ -1,9 +1,8 @@
 import ComboBox from '@/components/basics/combo-box.component';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 import { BookOpen } from 'lucide-react';
 import { useState } from 'react';
 
-export default function ComboBoxExamples({ direction }: HasDirection) {
+export default function ComboBoxExamples() {
   const [comboBox1Value, setComboBox1Value] = useState<string | undefined>(undefined);
   const [comboBox2Value, setComboBox2Value] = useState<string | undefined>(undefined);
   const [comboBox3Value, setComboBox3Value] = useState<string | undefined>(undefined);
@@ -14,7 +13,6 @@ export default function ComboBoxExamples({ direction }: HasDirection) {
       <div>
         <p>Default Combobox</p>
         <ComboBox
-          dir={direction}
           options={['Option1', 'Option2', 'Option3']}
           textPlaceholder="Text Placeholder"
           buttonPlaceholder="Button Placeholder"
@@ -26,7 +24,6 @@ export default function ComboBoxExamples({ direction }: HasDirection) {
       <div>
         <p>Combobox with long text for options will truncate</p>
         <ComboBox
-          dir={direction}
           options={[
             '08/24/24 05:50PM - Revision author',
             '08/24/24 05:30PM - Revision author',
@@ -42,7 +39,6 @@ export default function ComboBoxExamples({ direction }: HasDirection) {
       <div>
         <p>An icon can be shown on the trigger button</p>
         <ComboBox
-          dir={direction}
           options={[
             '08/24/24 05:50PM - Revision author',
             '08/24/24 05:30PM - Revision author',
@@ -59,7 +55,6 @@ export default function ComboBoxExamples({ direction }: HasDirection) {
       <div>
         <p>Alignment of dropdown menu can be controlled</p>
         <ComboBox
-          dir={direction}
           options={[
             '08/24/24 05:50PM - Revision author',
             '08/24/24 05:30PM - Revision author',
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
index 36b5236089..6c809f47a7 100644
--- 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
@@ -8,15 +8,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/shadcn-ui/dialog';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 
-export default function DialogExamples({ direction }: HasDirection) {
+export default function DialogExamples() {
   return (
     <Dialog>
       <DialogTrigger asChild>
         <Button>Show Dialog</Button>
       </DialogTrigger>
-      <DialogContent className="tw-max-w-sm" dir={direction}>
+      <DialogContent className="tw-max-w-sm">
         <DialogHeader>
           <DialogTitle>Clear filters</DialogTitle>
           <DialogDescription>Clear filters to show all results?</DialogDescription>
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/dropdown.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/dropdown.examples.component.tsx
index 70a61bde24..c3b3bd0067 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/dropdown.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/dropdown.examples.component.tsx
@@ -1,20 +1,23 @@
 import { Button } from '@/components/shadcn-ui/button';
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/shadcn-ui/dropdown-menu';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
+
 import { ChevronDown } from 'lucide-react';
 
-export default function DropdownExamples({ direction }: HasDirection) {
+export default function DropdownExamples() {
   return (
-    <DropdownMenu dir={direction}>
+    <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button>
           Open
@@ -29,7 +32,19 @@ export default function DropdownExamples({ direction }: HasDirection) {
             <span>DropdownMenuItem</span>
             <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
           </DropdownMenuItem>
+          <DropdownMenuCheckboxItem checked>
+            <span>DropdownMenuItem</span>
+            <DropdownMenuShortcut>CTRL+L</DropdownMenuShortcut>
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuItem>
+            <span>This is a very very very very large name</span>
+          </DropdownMenuItem>
         </DropdownMenuGroup>
+        <DropdownMenuRadioGroup value="top">
+          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );
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 567cf27d88..6fa49cd247 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,10 +1,9 @@
 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({ direction }: HasDirection) {
+export default function RadioGroupExamples() {
   return (
-    <RadioGroup defaultValue="comfortable" dir={direction}>
+    <RadioGroup defaultValue="comfortable">
       <div className="tw-flex tw-items-center tw-gap-x-2">
         <RadioGroupItem value="default" id="r1" />
         <Label htmlFor="r1">Default</Label>
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
index eb5c4e7c7a..e16f6adf0d 100644
--- 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
@@ -1,5 +1,5 @@
 import SearchBar from '@/components/basics/search-bar.component';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 // eslint-disable-next-line no-undef
 let timer: NodeJS.Timeout;
@@ -9,11 +9,12 @@ function onSearchDebounced(search: string) {
   timer = setTimeout(() => alert(`you searched for ${search}`), 1000);
 }
 
-export default function SearchBarExamples({ direction }: HasDirection) {
+export default function SearchBarExamples() {
+  const dir: Direction = readDirection();
   return (
     <div className="tw-flex tw-gap-2">
-      <SearchBar onSearch={onSearchDebounced} direction={direction} />{' '}
-      {direction === 'rtl' ? <>&rarr;</> : <>&larr;</>} type here
+      <SearchBar onSearch={onSearchDebounced} /> {dir === 'rtl' ? <>&rarr;</> : <>&larr;</>} type
+      here
     </div>
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/select.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/select.examples.component.tsx
index d5de3e6d22..5de58bbba9 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/select.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/select.examples.component.tsx
@@ -5,11 +5,10 @@ import {
   SelectContent,
   SelectItem,
 } from '@/components/shadcn-ui/select';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 
-export default function SelectExamples({ direction }: HasDirection) {
+export default function SelectExamples() {
   return (
-    <Select dir={direction}>
+    <Select>
       <SelectTrigger id="framework">
         <SelectValue placeholder="Select" />
       </SelectTrigger>
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/sidebar.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/sidebar.examples.component.tsx
index 0be68466ce..ad1efcf2f5 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/sidebar.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/sidebar.examples.component.tsx
@@ -14,11 +14,7 @@ import {
 } from '@/components/shadcn-ui/sidebar';
 import { useState } from 'react';
 
-type SidebarExamplesProps = {
-  direction?: string;
-};
-
-export default function SidebarExamples({ direction }: SidebarExamplesProps) {
+export default function SidebarExamples() {
   const [sidebarSelection, setSidebarSelection] = useState('button');
 
   const sidebarItems: { [title: string]: string } = {
@@ -29,31 +25,61 @@ export default function SidebarExamples({ direction }: SidebarExamplesProps) {
     Settings: 'This is the Settings page',
   };
 
+  const rightSidebarItems: { [title: string]: string } = {
+    Lorem: '',
+    Ipsum: '',
+    Dolor: '',
+    Sit: '',
+    Amed: '',
+  };
+
   return (
-    <SidebarProvider dir={direction} side={direction === 'rtl' ? 'right' : 'left'}>
-      <Sidebar>
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupLabel>Application</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {Object.keys(sidebarItems).map((item) => (
-                  <SidebarMenuItem key={item}>
-                    <SidebarMenuButton onClick={() => setSidebarSelection(item)}>
-                      {item}
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-        <SidebarRail />
-      </Sidebar>
-      <SidebarInset>
-        <SidebarTrigger />
-        {sidebarItems[sidebarSelection]}
-      </SidebarInset>
-    </SidebarProvider>
+    <>
+      <SidebarProvider>
+        <Sidebar>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Application</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {Object.keys(sidebarItems).map((item) => (
+                    <SidebarMenuItem key={item}>
+                      <SidebarMenuButton onClick={() => setSidebarSelection(item)}>
+                        {item}
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset>
+          <SidebarTrigger />
+          {sidebarItems[sidebarSelection]}
+        </SidebarInset>
+      </SidebarProvider>
+
+      <SidebarProvider side="secondary">
+        <Sidebar>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Secondary Sidebar</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {Object.keys(rightSidebarItems).map((item) => (
+                    <SidebarMenuItem key={item}>
+                      <SidebarMenuButton>{item}</SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarRail />
+        </Sidebar>
+      </SidebarProvider>
+    </>
   );
 }
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 ad1075deff..4902ee29e3 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,8 +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({ direction }: HasDirection) {
+export default function SliderExamples() {
   const [sliderValue, setSlider] = useState<number[]>([33]);
   return (
     <>
@@ -13,7 +13,6 @@ export default function SliderExamples({ direction }: HasDirection) {
         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 d8a48a9f23..4134930b61 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,12 +1,11 @@
 import Spinner from '@/components/basics/spinner.component';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 
-export default function SpinnerExamples({ direction }: HasDirection) {
+export default function SpinnerExamples() {
   return (
     <div>
-      <Spinner direction={direction} /> Default
-      <Spinner direction={direction} className="tw-text-red-600" /> Red
-      <Spinner direction={direction} size={10} /> Size 10
+      <Spinner /> Default
+      <Spinner className="tw-text-red-600" /> Red
+      <Spinner 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 d570022f2a..6a6114a1d6 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,15 +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({ direction }: HasDirection) {
+export default function SwitchExamples() {
   const [value, setValue] = useState<boolean>(false);
 
   return (
     <div className="tw-flex tw-flex-col *:tw-m-4">
-      <Switch direction={direction} checked={value} onCheckedChange={setValue} />
-      <Switch direction={direction} disabled />
-      <Switch direction={direction} checked disabled />
+      <Switch checked={value} onCheckedChange={setValue} />
+      <Switch disabled />
+      <Switch checked disabled />
     </div>
   );
 }
diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/tab.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/tab.examples.component.tsx
index 7cf4fd097e..1fa9121b92 100644
--- a/lib/platform-bible-react/src/preview/pages/components/basics/tab.examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/components/basics/tab.examples.component.tsx
@@ -6,12 +6,13 @@ import {
 } from '@/components/basics/tabs-vertical';
 import { Button } from '@/components/shadcn-ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/shadcn-ui/tabs';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
-export default function TabExamples({ direction }: HasDirection) {
+export default function TabExamples() {
+  const dir: Direction = readDirection();
   return (
     <>
-      <Tabs defaultValue="2-youShouldNotSeeThis" dir={direction}>
+      <Tabs defaultValue="2-youShouldNotSeeThis" dir={dir}>
         <TabsList>
           <TabsTrigger value="1">
             <Button>non-text tab trigger</Button>
@@ -24,7 +25,7 @@ export default function TabExamples({ direction }: HasDirection) {
         {/* intentionally left out 3 to see the effect */}
       </Tabs>
       <hr className="tw-my-4" />
-      <VerticalTabs defaultValue="2-youShouldNotSeeThis" dir={direction}>
+      <VerticalTabs defaultValue="2-youShouldNotSeeThis">
         <VerticalTabsList>
           <VerticalTabsTrigger value="1">
             <Button>non-text tab trigger</Button>
@@ -37,7 +38,7 @@ export default function TabExamples({ direction }: HasDirection) {
         <VerticalTabsContent value="2-youShouldNotSeeThis">
           <div>
             Tab 2 Content: Another set of vertical tabs without a default value
-            <VerticalTabs dir={direction}>
+            <VerticalTabs>
               <VerticalTabsList>
                 <VerticalTabsTrigger value="1">Tab 2-1</VerticalTabsTrigger>
                 <VerticalTabsTrigger value="2">Tab 2-2</VerticalTabsTrigger>
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 5dd83f26ba..fed9de89b0 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,15 +1,14 @@
 import { ToggleGroup, ToggleGroupItem } from '@/components/shadcn-ui/toggle-group';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 
-export default function ToggleGroupExamples({ direction }: HasDirection) {
+export default function ToggleGroupExamples() {
   return (
     <div className="*:tw-m-4">
-      <ToggleGroup variant="outline" type="multiple" dir={direction}>
+      <ToggleGroup variant="outline" type="multiple">
         <ToggleGroupItem value="a">A</ToggleGroupItem>
         <ToggleGroupItem value="b">B</ToggleGroupItem>
         <ToggleGroupItem value="c">C</ToggleGroupItem>
       </ToggleGroup>
-      <ToggleGroup type="single" dir={direction}>
+      <ToggleGroup type="single">
         <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/guide.component.tsx b/lib/platform-bible-react/src/preview/pages/guide.component.tsx
index dd67a5c33e..a5e165f4e6 100644
--- a/lib/platform-bible-react/src/preview/pages/guide.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/guide.component.tsx
@@ -17,7 +17,7 @@ function Guide({ direction, onChangeDirection: setDirection }: DirectionProps) {
       <p className="tw-mb-2 tw-text-muted-foreground">
         A place to look up and learn about some concepts
       </p>
-      <VerticalTabs dir={direction} defaultValue="Howto">
+      <VerticalTabs defaultValue="Howto">
         <VerticalTabsList>
           <VerticalTabsTrigger value="Howto">How to use</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Direction">Direction</VerticalTabsTrigger>
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 7c2b4c068d..2569c5f997 100644
--- a/lib/platform-bible-react/src/preview/pages/layouts.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/layouts.component.tsx
@@ -4,18 +4,18 @@ import {
   VerticalTabsList,
   VerticalTabsTrigger,
 } from '@/components/basics/tabs-vertical';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
+
 import WindowOrTabExample from './layouts/window.layout.component';
 import Dashboard5Examples from './layouts/dashboard5.layout.component';
 import ToolbarExamples from './layouts/toolbar.layout.component';
 import DialogExamples from './layouts/dialog.layout.component';
 import GetResourcesExample from './layouts/resource-manager.layout.component';
 
-function Layouts({ direction }: HasDirection) {
+function Layouts() {
   return (
     <div>
       <p className="tw-mb-2 tw-text-muted-foreground">A place to add examples for layouts</p>
-      <VerticalTabs defaultValue="Window" dir={direction}>
+      <VerticalTabs defaultValue="Window">
         <VerticalTabsList>
           <VerticalTabsTrigger value="Window">Window or Tab</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Toolbar">MUI Toolbar</VerticalTabsTrigger>
@@ -27,25 +27,25 @@ function Layouts({ direction }: HasDirection) {
 
         <VerticalTabsContent value="Window">
           <div className="tw-mb-2 tw-flex tw-gap-2">
-            <WindowOrTabExample direction={direction} isFocused />
-            <WindowOrTabExample direction={direction} />
+            <WindowOrTabExample isFocused />
+            <WindowOrTabExample />
           </div>
-          <WindowOrTabExample direction={direction} />
+          <WindowOrTabExample />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Toolbar">
-          <ToolbarExamples direction={direction} />
+          <ToolbarExamples />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Settings">TODO</VerticalTabsContent>
 
         <VerticalTabsContent value="Get Resources">
-          <GetResourcesExample direction={direction} />
+          <GetResourcesExample />
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Shadcn Dashboard 5">
           <div className="tw-h-[405px] tw-rounded-md tw-border">
-            <Dashboard5Examples direction={direction} />
+            <Dashboard5Examples />
           </div>
         </VerticalTabsContent>
 
diff --git a/lib/platform-bible-react/src/preview/pages/layouts/dashboard5.layout.component.tsx b/lib/platform-bible-react/src/preview/pages/layouts/dashboard5.layout.component.tsx
index 9e3a4964d6..497c3af730 100644
--- a/lib/platform-bible-react/src/preview/pages/layouts/dashboard5.layout.component.tsx
+++ b/lib/platform-bible-react/src/preview/pages/layouts/dashboard5.layout.component.tsx
@@ -50,10 +50,11 @@ import {
 } from '@/components/shadcn-ui/table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/shadcn-ui/tabs';
 import { useState } from 'react';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
-export default function Dashboard5Examples({ direction }: HasDirection) {
+export default function Dashboard5Examples() {
   const [progress, setProgress] = useState<number[]>([25]);
+  const dir: Direction = readDirection();
   return (
     <div className="tw-flex tw-h-[100%] tw-w-full tw-rounded-md tw-bg-muted/40">
       <aside className="tw-s-0 tw-inset-y-0 tw-z-10 tw-hidden tw-w-14 tw-flex-col tw-rounded-s-md tw-border-e tw-bg-background sm:tw-flex">
@@ -170,21 +171,21 @@ export default function Dashboard5Examples({ direction }: HasDirection) {
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb> */}
-          <div className="tw-relative tw-ml-auto tw-flex-1 md:tw-grow-0">
-            <Search className="tw-absolute tw-left-2.5 tw-top-2.5 tw-h-4 tw-w-4 tw-text-muted-foreground" />
+          <div className="tw-relative tw-ms-auto tw-flex-1 md:tw-grow-0">
+            <Search className="tw-absolute tw-top-2.5 tw-h-4 tw-w-4 tw-text-muted-foreground ltr:tw-left-2.5 rtl:tw-right-2.5" />
             <Input
               type="search"
               placeholder="Search..."
-              className="tw-w-full tw-rounded-lg tw-bg-background tw-pl-8 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-ring md:tw-w-[200px] lg:tw-w-[336px]"
+              className="tw-w-full tw-rounded-lg tw-bg-background tw-ps-8 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-ring md:tw-w-[200px] lg:tw-w-[336px]"
             />
           </div>
-          <DropdownMenu dir={direction}>
+          <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="outline" size="icon" className="tw-overflow-hidden tw-rounded-full">
                 <User />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
+            <DropdownMenuContent align={dir === 'rtl' ? 'start' : 'end'}>
               <DropdownMenuLabel>My Account</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuItem>Settings</DropdownMenuItem>
@@ -221,7 +222,6 @@ export default function Dashboard5Examples({ direction }: HasDirection) {
                 </CardContent>
                 <CardFooter>
                   <Slider
-                    dir={direction}
                     defaultValue={progress}
                     max={100}
                     step={1}
@@ -242,7 +242,7 @@ export default function Dashboard5Examples({ direction }: HasDirection) {
                 <CardFooter>Progress value={10}</CardFooter>
               </Card>
             </div>
-            <Tabs defaultValue="week" dir={direction}>
+            <Tabs defaultValue="week">
               <div className="tw-flex tw-items-center">
                 <TabsList>
                   <TabsTrigger value="week">Week</TabsTrigger>
@@ -250,14 +250,14 @@ export default function Dashboard5Examples({ direction }: HasDirection) {
                   <TabsTrigger value="year">Year</TabsTrigger>
                 </TabsList>
                 <div className="tw-ms-auto tw-flex tw-items-center tw-gap-2">
-                  <DropdownMenu dir={direction}>
+                  <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button variant="outline" size="sm" className="tw-h-7 tw-gap-1 tw-text-sm">
                         <ListFilter className="tw-h-3.5 tw-w-3.5" />
                         <span className="tw-sr-only sm:tw-not-sr-only">Filter</span>
                       </Button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
+                    <DropdownMenuContent align={dir === 'rtl' ? 'start' : 'end'}>
                       <DropdownMenuLabel>Filter by</DropdownMenuLabel>
                       <DropdownMenuSeparator />
                       <DropdownMenuCheckboxItem checked>Fulfilled</DropdownMenuCheckboxItem>
@@ -271,7 +271,7 @@ export default function Dashboard5Examples({ direction }: HasDirection) {
                   </Button>
                 </div>
               </div>
-              <TabsContent value="week">
+              <TabsContent value="week" dir={dir}>
                 <Card x-chunk="dashboard-05-chunk-3">
                   <CardHeader className="tw-px-7">
                     <CardTitle>Orders</CardTitle>
@@ -425,21 +425,21 @@ export default function Dashboard5Examples({ direction }: HasDirection) {
                   </CardTitle>
                   <CardDescription>Date: November 23, 2023</CardDescription>
                 </div>
-                <div className="tw-ml-auto tw-flex tw-items-center tw-gap-1">
+                <div className="tw-ms-auto tw-flex tw-items-center tw-gap-1">
                   <Button size="sm" variant="outline" className="tw-h-8 tw-gap-1">
                     <Truck className="tw-h-3.5 tw-w-3.5" />
                     <span className="lg:tw-sr-only xl:tw-not-sr-only xl:tw-whitespace-nowrap">
                       Track Order
                     </span>
                   </Button>
-                  <DropdownMenu dir={direction}>
+                  <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button size="icon" variant="outline" className="tw-h-8 tw-w-8">
                         <MoreVertical className="tw-h-3.5 tw-w-3.5" />
                         <a className="tw-sr-only">More</a>
                       </Button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
+                    <DropdownMenuContent align={dir === 'rtl' ? 'start' : 'end'}>
                       <DropdownMenuItem>Edit</DropdownMenuItem>
                       <DropdownMenuItem>Export</DropdownMenuItem>
                       <DropdownMenuSeparator />
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 ca83e220c2..a4ad822d1e 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,7 +23,6 @@ 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;
@@ -165,7 +164,7 @@ const tableData = [
   },
 ];
 
-export default function GetResourcesExample({ direction }: HasDirection) {
+export default function GetResourcesExample() {
   const [selectedTypes, setSelectedTypes] = React.useState<string[]>(
     types.map((type) => type.value),
   );
@@ -242,7 +241,6 @@ export default function GetResourcesExample({ direction }: HasDirection) {
             onSearch={setSearchQuery}
             placeholder="Search by name, language, type..."
             className={cn('tw-px-8', searchQuery && 'tw-border-primary')}
-            direction={direction}
           />
 
           <MultiSelectComboBox
@@ -256,7 +254,6 @@ export default function GetResourcesExample({ direction }: HasDirection) {
                 : `${selectedTypes.length} type${selectedTypes.length > 1 ? 's' : ''}`
             }
             icon={<Blocks />}
-            direction={direction}
           />
 
           <MultiSelectComboBox
@@ -274,7 +271,6 @@ export default function GetResourcesExample({ direction }: HasDirection) {
             }
             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 6c9fcdd961..85d501d85f 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,11 +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({ direction }: HasDirection) {
+export default function ToolbarExamples() {
   const [scrRef] = useState(defaultScrRef);
   const menu: MultiColumnMenu = { columns: {}, groups: {}, items: [] };
   const menuProvider: MultiColumnMenuProvider = () =>
@@ -15,11 +15,11 @@ export default function ToolbarExamples({ direction }: HasDirection) {
   return (
     <div className="tw-flex tw-flex-col tw-gap-4">
       <Toolbar className="toolbar" menuProvider={undefined} commandHandler={() => {}}>
-        <BookChapterControl scrRef={scrRef} handleSubmit={() => {}} direction={direction} />
+        <BookChapterControl scrRef={scrRef} handleSubmit={() => {}} />
       </Toolbar>
 
       <Toolbar className="toolbar" menuProvider={menuProvider} commandHandler={() => {}}>
-        <BookChapterControl scrRef={scrRef} handleSubmit={() => {}} direction={direction} />
+        <BookChapterControl scrRef={scrRef} handleSubmit={() => {}} />
       </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 8489341a73..627e04b36b 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
@@ -11,7 +11,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/shadcn-ui/dropdown-menu';
 import { Tabs, TabsList, TabsTrigger } from '@/components/shadcn-ui/tabs';
-import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
+
 import { defaultScrRef } from 'platform-bible-utils';
 import { useState } from 'react';
 
@@ -19,7 +19,7 @@ export type HasIsFocused = {
   isFocused?: boolean;
 };
 
-export default function WindowOrTabExample({ direction, isFocused }: HasDirection & HasIsFocused) {
+export default function WindowOrTabExample({ isFocused }: HasIsFocused) {
   const [scrRef, setScrRef] = useState(defaultScrRef);
   const highlightClassName = isFocused
     ? 'tw-bg-primary tw-text-primary-foreground'
@@ -28,17 +28,17 @@ 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} direction={direction} />
+          <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
         </div>
         <div className="tw-grow" />
         <div className="tw-m-2 tw-flex">
-          <Tabs defaultValue="a" dir={direction}>
+          <Tabs defaultValue="a">
             <TabsList>
               <TabsTrigger value="a">A</TabsTrigger>
               <TabsTrigger value="b">B</TabsTrigger>
             </TabsList>
           </Tabs>
-          <DropdownMenu dir={direction}>
+          <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost">&#x22ee;</Button>
             </DropdownMenuTrigger>
@@ -74,7 +74,7 @@ export default function WindowOrTabExample({ direction, isFocused }: HasDirectio
                   }}
                 >
                   <span>Scroll with</span>
-                  <Tabs defaultValue="a" dir={direction}>
+                  <Tabs defaultValue="a">
                     <TabsList className="tw-h-7">
                       <TabsTrigger className="tw-h-6 tw-w-0" value="a">
                         A
diff --git a/lib/platform-bible-react/src/utils/dir-helper.util.ts b/lib/platform-bible-react/src/utils/dir-helper.util.ts
new file mode 100644
index 0000000000..e1488c5d5c
--- /dev/null
+++ b/lib/platform-bible-react/src/utils/dir-helper.util.ts
@@ -0,0 +1,18 @@
+/** Text and layout direction */
+export type Direction = 'rtl' | 'ltr';
+
+const STORAGE_KEY: string = 'layoutDirection';
+
+/** Read layout direction from localStorage or return 'ltr' */
+export function readDirection(): Direction {
+  const retrieved = localStorage.getItem(STORAGE_KEY);
+  if (retrieved === 'rtl') {
+    return retrieved;
+  }
+  return 'ltr';
+}
+
+/** Write layout direction to localStorage */
+export function persistDirection(dir: Direction): void {
+  localStorage.setItem(STORAGE_KEY, dir);
+}