vercel · anthonyshew · Apr 23, 2025 · Apr 14, 2025
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
-import cn from "classnames";
+import { cn } from "@/components/cn";
 import Link from "next/link";
 import { motion } from "framer-motion";
 import { Clients } from "@/app/_clients/clients";

@@ -16,16 +16,16 @@ function Showcase(): JSX.Element {
     <main className="container mx-auto pt-12">
       <div className="mx-auto">
         <div className="py-16 lg:text-center">
-          <h1 className="mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 dark:text-white sm:text-4xl sm:leading-10 md:text-5xl">
+          <h1 className="mt-2 text-3xl font-extrabold leading-8 tracking-tight text-black dark:text-white sm:text-4xl sm:leading-10 md:text-5xl">
             Showcase
           </h1>
-          <p className="mt-4 max-w-3xl font-mono text-xl leading-7 text-gray-900 dark:text-gray-900 lg:mx-auto">
+          <p className="mt-4 max-w-3xl font-mono text-xl leading-7 text-black dark:text-white lg:mx-auto">
             Who is using Turborepo?
           </p>
         </div>
       </div>
 
-      <div className="mb-8 px-0 sm:px-8  grid grid-cols-3 items-center gap-16 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 ">
+      <div className="mb-8 px-0 min-h-screen sm:px-8 grid grid-cols-3 items-center gap-16 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 ">
         <Clients linked />
       </div>
     </main>

@@ -1,5 +1,5 @@
 import React from "react";
-import cn from "classnames";
+import { cn } from "@/components/cn";
 import Image from "next/image";
 import type { TurboUser } from "./users";
 
@@ -12,10 +12,12 @@ export function Logo({
   user,
   theme,
   isLink,
+  className,
 }: {
   user: TurboUser;
   theme: "dark" | "light";
   isLink: boolean;
+  className?: string;
 }): JSX.Element {
   const styles = {
     ...DEFAULT_SIZE,
@@ -32,10 +34,7 @@ export function Logo({
   const logo = (
     <Image
       alt={`${user.caption}'s Logo`}
-      className={cn("mx-8", {
-        "hidden dark:inline": theme !== "dark",
-        "inline dark:hidden": theme === "dark",
-      })}
+      className={cn("mx-8", className)}
       // biome-ignore lint/style/noNonNullAssertion: Ignored using `--suppress`
       height={numericHeight!}
       priority
@@ -52,10 +51,7 @@ export function Logo({
   if (isLink) {
     return (
       <a
-        className={cn("item-center flex justify-center", {
-          "hidden dark:flex": theme !== "dark",
-          "flex dark:hidden": theme === "dark",
-        })}
+        className="item-center flex justify-center"
         href={user.infoLink}
         rel="noopener noreferrer"
         target="_blank"

@@ -1,20 +1,19 @@
-import type { ReactElement, JSX } from "react";
-import React from "react";
-import cn from "classnames";
+"use client";
+
+import type { ReactElement } from "react";
+import React, { useEffect, useState } from "react";
+import { cn } from "@/components/cn";
 import { users } from "./users";
 import { Logo } from "./client-logo";
+import { useTheme } from "next-themes";
 
 interface LogoWrapperProps {
   className: string;
-  children: JSX.Element;
+  children: ReactElement;
   staticWidth?: boolean;
 }
 
-function LogoWrapper({
-  className,
-  children,
-  staticWidth,
-}: LogoWrapperProps): JSX.Element {
+function LogoWrapper({ className, children, staticWidth }: LogoWrapperProps) {
   if (!staticWidth) return children;
   return (
     <div
@@ -33,39 +32,36 @@ export function Clients({
   linked?: boolean;
   staticWidth?: boolean;
   companyList?: string[];
-}): JSX.Element {
-  const showcaseDark: ReactElement[] = [];
-  const showcaseLight: ReactElement[] = [];
+}) {
+  const [mounted, setMounted] = useState(false);
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // avoid hydration errors
+  if (!mounted) return null;
 
-  users
+  return users
     .filter((i) => (companyList ? companyList.includes(i.caption) : true))
-    .forEach((user) => {
-      if (user.pinned) {
-        showcaseDark.push(
-          <LogoWrapper
-            className="flex dark:hidden"
-            key={`${user.caption}-dark`}
-            staticWidth={staticWidth}
-          >
-            <Logo isLink={linked ?? false} theme="dark" user={user} />
-          </LogoWrapper>
-        );
-        showcaseLight.push(
-          <LogoWrapper
-            className="hidden dark:flex"
-            key={`${user.caption}-light`}
-            staticWidth={staticWidth}
-          >
-            <Logo isLink={linked ?? false} theme="light" user={user} />
-          </LogoWrapper>
-        );
-      }
-    });
+    .map((user) => {
+      const isDark = theme === "dark";
+      const imgTheme = isDark ? "light" : "dark";
 
-  return (
-    <>
-      {showcaseDark}
-      {showcaseLight}
-    </>
-  );
+      return (
+        <LogoWrapper
+          className={isDark ? "hidden dark:flex" : "dark:hidden flex"}
+          key={`${user.caption}-${imgTheme}`}
+          staticWidth={staticWidth}
+        >
+          <Logo
+            className={isDark ? "hidden dark:flex" : "dark:hidden flex"}
+            isLink={linked ?? false}
+            theme={imgTheme}
+            user={user}
+          />
+        </LogoWrapper>
+      );
+    });
 }
@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
 import Link from "next/link";
 import type { ReactNode, ReactElement } from "react";
 import { useState } from "react";
-import cn from "classnames";
+import { cn } from "@/components/cn";
 import { VercelLogo } from "./logos";
 import { gitHubRepoUrl } from "@/lib/constants";
 

@@ -3,7 +3,7 @@
 import type { MouseEvent } from "react";
 import { useEffect, useCallback, useState, useRef } from "react";
 import Link from "next/link";
-import classNames from "classnames";
+import { cn } from "@/components/cn";
 import { VercelLogo } from "./logos";
 import { PRODUCT_MENU_ITEMS, PLATFORM_MENU_ITEMS } from "./items";
 import type { MenuItemProps } from "./types";
@@ -17,9 +17,7 @@ function MenuDivider({
 }): JSX.Element {
   return (
     <h3
-      className={classNames(
-        "group flex items-center px-4 py-2 text-xs font-bold text-gray-500 dark:text-gray-600"
-      )}
+      className="group flex items-center px-4 py-2 text-xs font-bold text-gray-500 dark:text-gray-600"
       {...other}
     >
       {children}
@@ -63,7 +61,7 @@ function MenuItem({
     }
   }, [copied, closeMenu]);
 
-  const classes = classNames(
+  const classes = cn(
     className,
     "group flex items-center px-4 py-2 text-sm dark:hover:bg-gray-800 hover:bg-gray-200 w-full rounded-md"
   );
@@ -170,7 +168,7 @@ export function LogoContext(): JSX.Element {
               </MenuItem>
             ))}
             <MenuDivider>Products</MenuDivider>
-            {PRODUCT_MENU_ITEMS({ theme }).map((item) => (
+            {PRODUCT_MENU_ITEMS().map((item) => (
               <MenuItem
                 closeMenu={() => {
                   setOpen(false);

@@ -1,9 +1,9 @@
-import classNames from "classnames";
+import { cn } from "@/components/cn";
 
 export function VercelLogo({ className }: { className?: string }): JSX.Element {
   return (
     <svg
-      className={classNames(className, "fill-black dark:fill-white")}
+      className={cn(className, "fill-black dark:fill-white")}
       fill="none"
       height={22}
       viewBox="0 0 235 203"

@@ -1,4 +1,4 @@
-import cn from "classnames";
+import { cn } from "@/components/cn";
 import type { JSX } from "react";
 import styles from "./turbohero-background.module.css";
 

@@ -1,4 +1,4 @@
-import cn from "classnames";
+import { cn } from "@/components/cn";
 import { TURBO_TEAM } from "./team";
 import type { Author } from "./team";
 import { Avatar } from "./avatar";

@@ -1,4 +1,4 @@
-import cn from "classnames";
+import { cn } from "@/components/cn";
 import type { ReactNode } from "react";
 
 export type BadgeProps = React.ComponentProps<"span"> & {

@@ -1,4 +1,4 @@
-import classNames from "classnames";
+import { cn } from "@/components/cn";
 import {
   File as FumaFile,
   Folder as FumaFolder,
@@ -18,9 +18,10 @@ export function File({
 }): JSX.Element {
   return (
     <FumaFile
-      className={`${classNames({
-        "text-green-700 dark:text-green-900": green,
-      })} ${className}`}
+      className={cn(
+        green ? "text-green-700 dark:text-green-900" : "",
+        className
+      )}
       name={name}
       {...props}
     />
@@ -39,9 +40,10 @@ export function Folder({
 }): JSX.Element {
   return (
     <FumaFolder
-      className={`${classNames({
-        "text-green-700 dark:text-green-900": green,
-      })} ${className}`}
+      className={cn(
+        green ? "text-green-700 dark:text-green-900" : "",
+        className
+      )}
       name={name}
       {...props}
     />

@@ -1,5 +1,5 @@
 import React from "react";
-import cn from "classnames";
+import { cn } from "@/components/cn";
 import type { ImageFigureProps } from "./image-figure";
 import type { ThemedImageProps } from "./themed-image";
 import { ThemedImage } from "./themed-image";
@@ -27,10 +27,8 @@ export function ThemedImageFigure(
       <div
         className={cn(
           "border-box relative inline-block max-w-full overflow-hidden text-[0px]",
-          {
-            "rounded-md": borderRadius,
-            "shadow-lg": shadow,
-          }
+          borderRadius ? "rounded-md" : "",
+          shadow ? "shadow-lg" : ""
         )}
       >
         {}

@@ -1,5 +1,5 @@
 import React from "react";
-import cn from "classnames";
+import { cn } from "@/components/cn";
 import type { ImageProps } from "next/image";
 import Image from "next/image";
 

@@ -34,7 +34,6 @@
     "@vercel/speed-insights": "1.2.0",
     "algoliasearch": "^4.23.3",
     "class-variance-authority": "^0.7.1",
-    "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "fast-glob": "^3.3.2",