NextUI styles broken? #2058

isaacdarcilla · 2023-11-28T12:33:27Z

isaacdarcilla
Nov 28, 2023

Installed a new one but got broken styles using npx create-next-app -e https://github.com/nextui-org/next-app-template

Template source code: https://github.com/nextui-org/next-app-template

Barely edited anything, but still got broken styles as you can see in the screenshots, the search, button etc. component is broken.

Node: v18.18.2

Expected:

What I got:

tailwind.config.js

import {nextui} from '@nextui-org/theme'

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui({
    themes: {
      light: {
        colors: {
          background: '#FAFAFA'
        }
      },
      dark: {
        colors: {
          background: '#09090b'
        }
      },
    },
  })],
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: false,
    dirs: [
      "app",
      "hooks",
      "config",
      "types",
      "components",
    ]
  },
  typescript: {
    ignoreBuildErrors: false,
  },
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '8000',
        pathname: '/**',
      },
    ],
  },
}

module.exports = nextConfig

root layout.tsx

import "@/styles/globals.css";
import { Metadata, Viewport } from "next";
import { siteConfig } from "@/config/site";
import { fontSans } from "@/config/fonts";
import { Providers } from "./providers";
import { Navbar } from "@/components/navbar";
import { Link } from "@nextui-org/link";
import clsx from "clsx";

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s - ${siteConfig.name}`,
  },
  description: siteConfig.description,
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon-16x16.png",
    apple: "/apple-touch-icon.png",
  },
};

export const viewport: Viewport = {
  width: 1,
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body
        className={clsx(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable,
        )}
      >
        <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
          <div className="relative flex flex-col h-screen">
            <Navbar />
            <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
              {children}
            </main>
            <footer className="w-full flex items-center justify-center py-3">
              <Link
                isExternal
                className="flex items-center gap-1 text-current"
                href="https://nextui-docs-v2.vercel.app?utm_source=next-app-template"
                title="nextui.org homepage"
              >
                <span className="text-default-600">Powered by</span>
                <p className="text-primary">NextUI</p>
              </Link>
            </footer>
          </div>
        </Providers>
      </body>
    </html>
  );
}

provider.tsx

"use client";

import * as React from "react";
import { NextUIProvider } from "@nextui-org/system";
import { useRouter } from "next/navigation";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { ThemeProviderProps } from "next-themes/dist/types";

export interface ProvidersProps {
  children: React.ReactNode;
  themeProps?: ThemeProviderProps;
}

export function Providers({ children, themeProps }: ProvidersProps) {
  const router = useRouter();

  return (
    <NextUIProvider navigate={router.push}>
      <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
    </NextUIProvider>
  );
}

isaacdarcilla · 2023-11-29T07:36:57Z

isaacdarcilla
Nov 29, 2023
Author

Button 🫤

1 reply

o6ris Apr 27, 2024

Hi @isaacdarcilla did you find a solution ? because I have the same issue just after nextui installation components style are broken

jrgarciadev · 2023-11-29T12:49:24Z

jrgarciadev
Nov 29, 2023
Maintainer

Hey @isaacdarcilla which package manager are you using?

1 reply

isaacdarcilla Nov 29, 2023
Author

I'm using NPM.

DriesVanHool · 2024-01-03T04:40:46Z

DriesVanHool
Jan 3, 2024

Hi @jrgarciadev or @isaacdarcilla, was there an update regarding this issue?

I have a similar issue posted here

I'm using the vite setup. You can also see the live example here where e.g. the contact button has variant='flat' but after a Vercel deployment that seems not to take effect. Overall the component props don't seem to work in prod, although the css does look like it's loading correctly. I also tried the production build locally and that seems to work just fine.

3 replies

isaacdarcilla Jan 3, 2024
Author

It worked when using PNPM.

DriesVanHool Jan 3, 2024

I'm using pnpm. This should also be picked up by Vercel, because of my pnpm-lock.yaml file

DriesVanHool Jan 3, 2024

Turns out I had to add the content of my npmrc file in my vercel env variables with key NPM_RC to add public-hoist-pattern[]=@nextui-org/

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NextUI styles broken? #2058

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

NextUI styles broken? #2058

isaacdarcilla Nov 28, 2023

Replies: 3 comments · 5 replies

isaacdarcilla Nov 29, 2023 Author

o6ris Apr 27, 2024

jrgarciadev Nov 29, 2023 Maintainer

isaacdarcilla Nov 29, 2023 Author

DriesVanHool Jan 3, 2024

isaacdarcilla Jan 3, 2024 Author

DriesVanHool Jan 3, 2024

DriesVanHool Jan 3, 2024

isaacdarcilla
Nov 28, 2023

Replies: 3 comments 5 replies

isaacdarcilla
Nov 29, 2023
Author

jrgarciadev
Nov 29, 2023
Maintainer

isaacdarcilla Nov 29, 2023
Author

DriesVanHool
Jan 3, 2024

isaacdarcilla Jan 3, 2024
Author