search

saltyshiomix / nextron

⚡ Next.js + Electron ⚡
https://npm.im/nextron
MIT License
3.69k stars 215 forks source link

Next Ui Support #391

Open PacifiK2460 opened 10 months ago

PacifiK2460 commented 10 months ago

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

bm777 commented 10 months ago

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

rosshabe commented 10 months 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 9 months ago

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