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

[alissanguyen]

NextUI Version

^2.3.6

Describe the bug

Tried importing the <Spinner /> 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[bot]]

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

[arindam1997007]

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

Hi. If you still haven't been able to make this work, can you please try this? Update the tailwind.config.ts to add nextui as the plugin, and update @nextui-org/react/ in the content. Something like this

import type { Config } from 'tailwindcss';
+ const { nextui } = require('@nextui-org/react');

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './node_modules/@nextui-org/react/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
+  plugins: [nextui()],
};
export default config;

[wingkwong]

Agree with @arindam1997007. It was due to missing config.