diff --git a/app/javascript/orangelight/lux_import.js b/app/javascript/orangelight/lux_import.js
index aa38c3e1f..6752a005b 100644
--- a/app/javascript/orangelight/lux_import.js
+++ b/app/javascript/orangelight/lux_import.js
@@ -1,6 +1,13 @@
 import { createApp } from 'vue';
 import 'lux-design-system/dist/style.css';
-import { LuxAlert, LuxLibraryFooter } from 'lux-design-system';
+import {
+  LuxAlert,
+  LuxLibraryFooter,
+  LuxDataTable,
+  LuxWrapper,
+  LuxGridItem,
+  LuxGridContainer,
+} from 'lux-design-system';
 import OrangelightHeader from '../orangelight/vue_components/orangelight_header.vue';
 import OnlineOptions from './vue_components/online_options.vue';
 
@@ -13,6 +20,10 @@ export function luxImport() {
     for (let i = 0; i < elements.length; i++) {
       createMyApp()
         .component('lux-alert', LuxAlert)
+        .component('lux-data-table', LuxDataTable)
+        .component('lux-wrapper', LuxWrapper)
+        .component('lux-grid-item', LuxGridItem)
+        .component('lux-grid-container', LuxGridContainer)
         .component('lux-library-footer', LuxLibraryFooter)
         .component('online-options', OnlineOptions)
         .component('orangelight-header', OrangelightHeader)