I am new to NextJS

npx create-next-app@latest

It asked me some question to setup:

So I am not using TypeScript. I allowed it to use TailwindCSS.
Then npm install and npm run dev was successfully run.

Then I found a UI library for NextJS which I liked it: /

then I run the command to install HeroUI:

npx heroui-cli@latest add

It asked me which component to install and I selected only a button component. Installation of HeroUI was successfully done.

So I created a new comoonent to test HeroUI and imprted it inside app/page.js:
=> components/UITest.js looks like:

import React from "react";
import { Button, ButtonGroup } from "@heroui/button";
const UITest = () => {
  return <Button color="primary">Button</Button>;
};

export default UITest;

I run again npm run dev to see HeroUI button component and I got this view:

You can see the actual styling from documentation:

Note: For your reference, I am sharing you :

=> package.json

{
  "name": "herouitest",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroui/button": "^2.2.16",
    "@heroui/system": "^2.4.12",
    "@heroui/theme": "^2.4.12",
    "framer-motion": "^12.5.0",
    "next": "15.2.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4"
  }
}

=> tailwind.config.js

const {heroui} = require("@heroui/theme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./node_modules/@heroui/theme/dist/components/(button|ripple|spinner).js",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [heroui()],
};

=>app/globals.css

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

So please check, what am I missing, why styling of HeroUI is not working.

I am new to NextJS

npx create-next-app@latest

It asked me some question to setup:

So I am not using TypeScript. I allowed it to use TailwindCSS.
Then npm install and npm run dev was successfully run.

Then I found a UI library for NextJS which I liked it: https://www.heroui/docs/components/

then I run the command to install HeroUI:

npx heroui-cli@latest add

It asked me which component to install and I selected only a button component. Installation of HeroUI was successfully done.

So I created a new comoonent to test HeroUI and imprted it inside app/page.js:
=> components/UITest.js looks like:

import React from "react";
import { Button, ButtonGroup } from "@heroui/button";
const UITest = () => {
  return <Button color="primary">Button</Button>;
};

export default UITest;

I run again npm run dev to see HeroUI button component and I got this view:
https://imgur/a/NRtPI29
You can see the actual styling from documentation:
https://www.heroui/docs/components/button

Note: For your reference, I am sharing you :

=> package.json

{
  "name": "herouitest",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroui/button": "^2.2.16",
    "@heroui/system": "^2.4.12",
    "@heroui/theme": "^2.4.12",
    "framer-motion": "^12.5.0",
    "next": "15.2.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4"
  }
}

=> tailwind.config.js

const {heroui} = require("@heroui/theme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./node_modules/@heroui/theme/dist/components/(button|ripple|spinner).js",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [heroui()],
};

=>app/globals.css

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

So please check, what am I missing, why styling of HeroUI is not working.

• reactjs
• next.js

Share Improve this question Follow edited Mar 24 at 9:52 Hamed Jimoh 1,39388 silver badges2020 bronze badges asked Mar 21 at 11:07 Abhishek kamalAbhishek kamal 48211 gold badge66 silver badges1717 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

It seems like you missed the required setup of adding a provider for HeroUI.

Try adding this at the root of your application:

import * as React from "react";

// 1. import `HeroUIProvider` component
import {HeroUIProvider} from "@heroui/react";

function App() {
  // 2. Wrap HeroUIProvider at the root of your app
  return (
    <HeroUIProvider>
      <YourApplication />
    </HeroUIProvider>
  );
}

You can find this step in the installation docs: https://www.heroui/docs/guide/installation

Please try with pnpm. I had the same issue when I was using Turborepo and I solved that problem by using pnpm.