[BUG] - <Spinner/> not loading with NextJS application

[alissanguyen]

NextUI Version

^2.3.6

Describe the bug

Tried importing the component into my next app but it is not showing in the ui.

dependencies:
"@nextui-org/react": "^2.3.6",
"@nextui-org/spinner": "^2.0.28",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18"

Still showing the element in the DOM but just not displaying:
<div aria-label="Loading" class="relative inline-flex flex-col gap-2 items-center justify-center"><div class="relative flex w-8 h-8"><i class="absolute w-full h-full rounded-full animate-spinner-ease-spin border-solid border-t-transparent border-l-transparent border-r-transparent border-3 border-b-secondary"></i><i class="absolute w-full h-full rounded-full opacity-75 animate-spinner-linear-spin border-dotted border-t-transparent border-l-transparent border-r-transparent border-3 border-b-secondary"></i></div></div>

page.tsx for demo purpose:

import {Spinner} from "@nextui-org/react";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Spinner size="md" color="secondary" />

    </main>
  );
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a next js app with basic nextjs CLI
2. Import the Spinner component in your page.tsx (or any other route)
3. npm run dev

Expected behavior

I expected to see a spinner displayed but I see an empty page. The component is in the DOM, just not being displayed.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-769 [BUG] - <Spinner/> not loading with NextJS application

[wingkwong]

Not able to reproduce. Probably you've missed some setup (tailwind.config.js, provider etc). You may share a stackblitz link.

[alissanguyen]

@wingkwong I just created this project yesterday with the cli: npx create-next-app@latest --template typescript my-app and everything else is of default configs.

My next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;

Same list of dependencies, here is devDependencies:

  "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
    

globals.css (I did add some extra CSS):

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
  }
}

body {
  min-height: 100vh;
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(rgb(43, 43, 52), rgb(9, 9, 10));
  background-size: cover;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .custom-border {
    @apply border bg-zinc-800/30 p-4 rounded-xl w-auto hover:border-gray-300;
  }

  .Image_Element {
    @apply max-w-[80%] mb-4 rounded-xl;
  }
  .Bubble {
    @apply rounded-xl border-solid box-border p-4 pl-10 break-words transition-all max-w-[75ch] text-lg
  }
}

[alissanguyen]

@wingkwong here is the stackblitz link
https://stackblitz.com/edit/stackblitz-starters-c8k3ez?file=app%2Fglobals.css