try chakra-ui

www/app/[domain]/chakra-showcase/page.tsx

@@ -0,0 +1,122 @@
+"use client";
+import {
+  Grid,
+  Box,
+  Kbd,
+  Heading,
+  Text,
+  Button,
+  Wrap,
+  WrapItem,
+  Spinner,
+  Menu,
+  MenuList,
+  MenuItem,
+  MenuButton,
+  Circle,
+} from "@chakra-ui/react";
+import { PhoneIcon, ChevronDownIcon } from "@chakra-ui/icons";
+import { Select } from "chakra-react-select";
+import supportedLanguages from "../../supportedLanguages";
+import { useState } from "react";
+
+export default () => {
+  const [language, setLanguage] = useState<{ label: string; value: string }>({
+    label: "No translation",
+    value: "",
+  });
+  const options = supportedLanguages.map((i) => ({
+    label: i.name,
+    value: i.value || "",
+  }));
+  const handleLanguageChange = (option) => setLanguage(option);
+
+  return (
+    <>
+      <div></div>
+      <Grid
+        templateColumns={{
+          sm: "1fr",
+          md: "repeat(2, 1fr)",
+          lg: "repeat(2, 1fr)",
+        }}
+        templateRows={{ sm: "repeat(2, 1fr)", md: "1fr", lg: "1fr" }}
+        gap={{ base: "2", md: "4", lg: "4" }}
+        h="100%"
+      >
+        <Box
+          bg="Background"
+          h="100%"
+          rounded="5px"
+          p={{ base: "2", lg: "4" }}
+          overflowX="scroll"
+        >
+          <Heading as="h1" size="xl" noOfLines={1}>
+            Here are a few components
+          </Heading>
+          <Wrap spacing={4} p="4">
+            <WrapItem>
+              <span>
+                <Kbd>shift</Kbd> + <Kbd>H</Kbd>
+              </span>
+            </WrapItem>
+            <WrapItem>
+              <Circle size="40px" bg="tomato" color="white">
+                <PhoneIcon />
+              </Circle>
+            </WrapItem>
+            <WrapItem>
+              <Button colorScheme="blue">A button</Button>
+            </WrapItem>
+
+            <WrapItem>
+              <Spinner />
+            </WrapItem>
+
+            <WrapItem>
+              <Menu>
+                <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+                  Actions
+                </MenuButton>
+                <MenuList>
+                  <MenuItem>Download</MenuItem>
+                  <MenuItem>Create a Copy</MenuItem>
+                  <MenuItem>Mark as Draft</MenuItem>
+                  <MenuItem>Delete</MenuItem>
+                  <MenuItem>Attend a Workshop</MenuItem>
+                </MenuList>
+              </Menu>
+            </WrapItem>
+          </Wrap>
+          <WrapItem>
+            <Select
+              options={options}
+              onChange={handleLanguageChange}
+              value={language}
+            />
+          </WrapItem>
+        </Box>
+        <Box
+          bg="Background"
+          h="100%"
+          rounded="5px"
+          p={{ base: "2", lg: "4" }}
+          overflowX="scroll"
+        >
+          <Text>
+            All legths can be either a number that maps to default values (eg
+            '2' will become '--var-chakra-space-2', which by default is .5rem),
+            a css string value like "25px" or an object with different values
+            for different screen sizes. See the docs on responsive-styles.
+          </Text>
+          <Text>
+            This is the default theme, but you can ovewrite part or all of it,
+            see the Customize Component styles section of the docs, especially
+            Customizing component styles
+          </Text>
+          <Text>I think the figma section of their docs is promising too</Text>
+        </Box>
+      </Grid>
+    </>
+  );
+};

www/app/[domain]/layout.tsx

@@ -14,6 +14,7 @@ import { getConfig } from "../lib/edgeConfig";
 import { ErrorBoundary } from "@sentry/nextjs";
 import { cookies } from "next/dist/client/components/headers";
 import { SESSION_COOKIE_NAME } from "../lib/fief";
+import { Providers } from "../providers";
 
 const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] });
 
@@ -83,6 +84,7 @@ export default async function RootLayout({ children, params }: LayoutProps) {
             <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
               <ErrorProvider>
                 <ErrorMessage />
+                <Providers>
                   <div
                     id="container"
                     className="items-center h-[100svh] w-[100svw] p-2 md:p-4 grid grid-rows-layout gap-2 md:gap-4"
@@ -154,6 +156,7 @@ export default async function RootLayout({ children, params }: LayoutProps) {
 
                     {children}
                   </div>
+                </Providers>
               </ErrorProvider>
             </ErrorBoundary>
           </DomainContextProvider>

www/app/providers.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { ChakraProvider } from "@chakra-ui/react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <ChakraProvider>{children}</ChakraProvider>;
+}

www/app/supportedLanguages.ts

@@ -8,6 +8,10 @@ type LanguageOption = {
 };
 
 const supportedLanguages: LanguageOption[] = [
+  {
+    value: "",
+    name: "No translation",
+  },
   {
     value: "af",
     name: "Afrikaans",

www/middleware.ts

@@ -27,7 +27,8 @@ export async function middleware(request: NextRequest) {
       if (
         request.nextUrl.pathname == "/" ||
         request.nextUrl.pathname.startsWith("/transcripts") ||
-        request.nextUrl.pathname.startsWith("/browse")
+        request.nextUrl.pathname.startsWith("/browse") ||
+        request.nextUrl.pathname.startsWith("/chakra-showcase")
       ) {
         if (!fiefResponse.headers.get("x-middleware-rewrite")) {
           fiefResponse.headers.set(
@@ -42,7 +43,8 @@ export async function middleware(request: NextRequest) {
     if (
       request.nextUrl.pathname == "/" ||
       request.nextUrl.pathname.startsWith("/transcripts") ||
-      request.nextUrl.pathname.startsWith("/browse")
+      request.nextUrl.pathname.startsWith("/browse") ||
+      request.nextUrl.pathname.startsWith("/chakra-showcase")
     ) {
       return NextResponse.rewrite(
         request.nextUrl.origin + "/" + domain + request.nextUrl.pathname,

www/package.json

@@ -11,6 +11,13 @@
     "openapi": "openapi-generator-cli generate -i http://localhost:1250/openapi.json -g typescript-fetch -o app/api && yarn format"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/menu": "^2.2.1",
+    "@chakra-ui/next-js": "^2.2.0",
+    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react-types": "^2.0.6",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@fief/fief": "^0.13.5",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
@@ -19,7 +26,9 @@
     "@vercel/edge-config": "^0.4.1",
     "autoprefixer": "10.4.14",
     "axios": "^1.6.2",
+    "chakra-react-select": "^4.7.6",
     "fontawesome": "^5.6.3",
+    "framer-motion": "^10.16.16",
     "jest-worker": "^29.6.2",
     "next": "^13.4.9",
     "postcss": "8.4.25",