Next Ui Support - Githubissues

PacifiK2460 commented 1 year ago

Has anyone been able to add Next Ui components? I've followed the official guide but the app fails to compile

bm777 commented 1 year ago

Can you share any code here so that we can really assist?

rosshabe commented 1 year ago

Hi I am also having the same issue here. My package.js

 {
  "private": true,
  "name": "my-nextron-app",
  "description": "My application description",
  "version": "1.0.0",
  "author": "Yoshihide Shiono <shiono.yoshihide@gmail.com>",
  "main": "app/background.js",
  "scripts": {
    "dev": "nextron",
    "build": "nextron build",
    "postinstall": "electron-builder install-app-deps"
  },
  "dependencies": {
    "@nextui-org/react": "1.0.0-beta.12",
    "electron-serve": "^1.1.0",
    "electron-store": "^8.1.0",
    "framer-motion": "^10.16.2",
    "next-themes": "^0.2.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "electron": "^21.3.3",
    "electron-builder": "^23.6.0",
    "next": "^12.3.4",
    "nextron": "^8.5.0",
    "postcss": "^8.4.13",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.3"
  }
}

_app.js

 import React from "react";
import "../styles/globals.css";
import {NextUIProvider} from "@nextui-org/react";
import {ThemeProvider as NextThemesProvider} from "next-themes";
const lightTheme = createTheme({
  type: "light",
  theme: {
     colors: {
      primary: "#005CB1",
      secondary: "#f36825",
      extraPrimary: "#0a4196",
     },
  },
});
const darkTheme = createTheme({
  type: "dark",
  theme: {
     colors: {
      primary: "#005CB1",
      secondary: "#f36825"
     },
  },
});

function App({ Component, pageProps }) {
  return (
    <NextThemesProvider
         defaultTheme="system"
         attribute="class"
         value={{
            light: lightTheme.className,
            dark: darkTheme.className,
         }}
      >
    <NextUIProvider>
        <Component {...pageProps} />
    </NextUIProvider>
    </NextThemesProvider>
  )
}
export default App; ```

  _document.js

import React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import { CssBaseline } from '@nextui-org/react';

class MyDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: React.Children.toArray([initialProps.styles]) }; }

render() {
  return (
    <Html lang="en">
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
       rel="stylesheet"
    />
      <Head>{CssBaseline.flush()}</Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

}

export default MyDocument;

saltyshiomix commented 1 year ago

I think NextUI is so greate, so I'll check out how to use with nextron next week :)

itsEricWu commented 2 months ago

+1

saltyshiomix / nextron

Next Ui Support #391