diff --git a/examples/with-chakra-ui/README.md b/examples/with-chakra-ui/README.md
new file mode 100644
index 00000000..6924ca3a
--- /dev/null
+++ b/examples/with-chakra-ui/README.md
@@ -0,0 +1,41 @@
+
+
+
+
+
+## Usage
+
+### Create an App
+
+```
+# with npx
+$ npx create-nextron-app my-app --example with-chakra-ui
+
+# with yarn
+$ yarn create nextron-app my-app --example with-chakra-ui
+
+# with pnpm
+$ pnpm dlx create-nextron-app my-app --example with-chakra-ui
+```
+
+### Install Dependencies
+
+```
+$ cd my-app
+
+# using yarn or npm
+$ yarn (or `npm install`)
+
+# using pnpm
+$ pnpm install --shamefully-hoist
+```
+
+### Use it
+
+```
+# development mode
+$ yarn dev (or `npm run dev` or `pnpm run dev`)
+
+# production build
+$ yarn build (or `npm run build` or `pnpm run build`)
+```
diff --git a/examples/with-chakra-ui/electron-builder.yml b/examples/with-chakra-ui/electron-builder.yml
new file mode 100644
index 00000000..1b5a3bbe
--- /dev/null
+++ b/examples/with-chakra-ui/electron-builder.yml
@@ -0,0 +1,12 @@
+appId: com.example.nextron
+productName: My Nextron App
+copyright: Copyright © 2018 Yoshihide Shiono
+directories:
+ output: dist
+ buildResources: resources
+files:
+ - from: .
+ filter:
+ - package.json
+ - app
+publish: null
diff --git a/examples/with-chakra-ui/package.json b/examples/with-chakra-ui/package.json
new file mode 100644
index 00000000..b58d03da
--- /dev/null
+++ b/examples/with-chakra-ui/package.json
@@ -0,0 +1,35 @@
+{
+ "private": true,
+ "name": "my-nextron-app",
+ "description": "My application description",
+ "version": "1.0.0",
+ "author": "Ketan Patel ",
+ "main": "app/background.js",
+ "scripts": {
+ "dev": "nextron",
+ "build": "nextron build",
+ "postinstall": "electron-builder install-app-deps"
+ },
+ "dependencies": {
+ "electron-serve": "^1.1.0",
+ "electron-store": "^8.1.0"
+ },
+ "devDependencies": {
+ "@chakra-ui/icons": "^2.1.1",
+ "@chakra-ui/react": "^2.8.1",
+ "@chakra-ui/theme-tools": "^2.1.1",
+ "@emotion/react": "^11.11.1",
+ "@emotion/styled": "^11.11.0",
+ "@types/node": "^18.0.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "electron": "^21.3.3",
+ "electron-builder": "^23.6.0",
+ "framer-motion": "^6.5.1",
+ "next": "^12.3.4",
+ "nextron": "^8.7.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "typescript": "^4.9.5"
+ }
+}
diff --git a/examples/with-chakra-ui/renderer/components/Container.tsx b/examples/with-chakra-ui/renderer/components/Container.tsx
new file mode 100644
index 00000000..1ee74495
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/components/Container.tsx
@@ -0,0 +1,17 @@
+import { Flex, FlexProps } from '@chakra-ui/react'
+
+export const Container = (props: FlexProps) => (
+
+)
diff --git a/examples/with-chakra-ui/renderer/components/DarkModeSwitch.tsx b/examples/with-chakra-ui/renderer/components/DarkModeSwitch.tsx
new file mode 100644
index 00000000..4e91c3b6
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/components/DarkModeSwitch.tsx
@@ -0,0 +1,18 @@
+import { useColorMode, IconButton } from '@chakra-ui/react'
+import { SunIcon, MoonIcon } from '@chakra-ui/icons'
+
+export const DarkModeSwitch = () => {
+ const { colorMode, toggleColorMode } = useColorMode()
+ const isDark = colorMode === 'dark'
+ return (
+ : }
+ aria-label="Toggle Theme"
+ colorScheme="green"
+ onClick={toggleColorMode}
+ />
+ )
+}
diff --git a/examples/with-chakra-ui/renderer/components/Footer.tsx b/examples/with-chakra-ui/renderer/components/Footer.tsx
new file mode 100644
index 00000000..e0d91487
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/components/Footer.tsx
@@ -0,0 +1,5 @@
+import { Flex, FlexProps } from '@chakra-ui/react'
+
+export const Footer = (props: FlexProps) => (
+
+)
diff --git a/examples/with-chakra-ui/renderer/components/Hero.tsx b/examples/with-chakra-ui/renderer/components/Hero.tsx
new file mode 100644
index 00000000..3ca41f49
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/components/Hero.tsx
@@ -0,0 +1,16 @@
+import { Flex, Heading } from '@chakra-ui/react'
+
+export const Hero = ({ title }: { title: string }) => (
+
+ {title}
+
+)
+
+Hero.defaultProps = {
+ title: 'with-typescript-chakra-ui',
+}
diff --git a/examples/with-chakra-ui/renderer/components/Main.tsx b/examples/with-chakra-ui/renderer/components/Main.tsx
new file mode 100644
index 00000000..c2cda547
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/components/Main.tsx
@@ -0,0 +1,12 @@
+import { Stack, StackProps } from '@chakra-ui/react'
+
+export const Main = (props: StackProps) => (
+
+)
diff --git a/examples/with-chakra-ui/renderer/lib/theme.tsx b/examples/with-chakra-ui/renderer/lib/theme.tsx
new file mode 100644
index 00000000..adcac610
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/lib/theme.tsx
@@ -0,0 +1,39 @@
+import { extendTheme } from '@chakra-ui/react'
+
+const fonts = { mono: `'Menlo', monospace` }
+
+const breakpoints = {
+ sm: '40em',
+ md: '52em',
+ lg: '64em',
+ xl: '80em',
+}
+
+const theme = extendTheme({
+ semanticTokens: {
+ colors: {
+ text: {
+ default: '#16161D',
+ _dark: '#ade3b8',
+ },
+ heroGradientStart: {
+ default: '#7928CA',
+ _dark: '#e3a7f9',
+ },
+ heroGradientEnd: {
+ default: '#FF0080',
+ _dark: '#fbec8f',
+ },
+ },
+ radii: {
+ button: '12px',
+ },
+ },
+ colors: {
+ black: '#16161D',
+ },
+ fonts,
+ breakpoints,
+})
+
+export default theme
diff --git a/examples/with-chakra-ui/renderer/next.config.js b/examples/with-chakra-ui/renderer/next.config.js
new file mode 100644
index 00000000..8fcb4d18
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/next.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+ webpack: (config, { isServer }) => {
+ if (!isServer) {
+ config.target = 'electron-renderer'
+ }
+
+ return config
+ },
+}
diff --git a/examples/with-chakra-ui/renderer/pages/_app.tsx b/examples/with-chakra-ui/renderer/pages/_app.tsx
new file mode 100644
index 00000000..437b5448
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/pages/_app.tsx
@@ -0,0 +1,14 @@
+import { ChakraProvider } from '@chakra-ui/react'
+
+import theme from '../lib/theme'
+import { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+ return (
+
+
+
+ )
+}
+
+export default MyApp
diff --git a/examples/with-chakra-ui/renderer/pages/_document.tsx b/examples/with-chakra-ui/renderer/pages/_document.tsx
new file mode 100644
index 00000000..2b8b5740
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/pages/_document.tsx
@@ -0,0 +1,18 @@
+import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
+import { ColorModeScript } from '@chakra-ui/react'
+
+export default class Document extends NextDocument {
+ render() {
+ return (
+
+
+
+ {/* Make Color mode to persists when you refresh the page. */}
+
+
+
+
+
+ )
+ }
+}
diff --git a/examples/with-chakra-ui/renderer/pages/home.tsx b/examples/with-chakra-ui/renderer/pages/home.tsx
new file mode 100644
index 00000000..d4e9c262
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/pages/home.tsx
@@ -0,0 +1,42 @@
+import React from "react"
+import Head from 'next/head'
+import Image from 'next/image'
+import { Button, Link as ChakraLink } from "@chakra-ui/react"
+
+import { Container } from '../components/Container'
+import { DarkModeSwitch } from '../components/DarkModeSwitch'
+import { Footer } from '../components/Footer'
+import { Hero } from "../components/Hero"
+
+const Home = () => (
+
+
+ Home - Nextron (with-typescript-chakra-ui)
+
+
+
+
+
+
+
+
+
+)
+
+export default Home
diff --git a/examples/with-chakra-ui/renderer/pages/next.tsx b/examples/with-chakra-ui/renderer/pages/next.tsx
new file mode 100644
index 00000000..a034924f
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/pages/next.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import Head from 'next/head'
+import Image from 'next/image'
+import { Button, Link as ChakraLink } from "@chakra-ui/react"
+
+import { Container } from '../components/Container'
+import { DarkModeSwitch } from '../components/DarkModeSwitch'
+import { Footer } from '../components/Footer'
+import { Hero } from '../components/Hero'
+
+const Next = () => {
+ return (
+
+
+ Next - Nextron (with-typescript-chakra-ui)
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Next
\ No newline at end of file
diff --git a/examples/with-chakra-ui/renderer/tsconfig.json b/examples/with-chakra-ui/renderer/tsconfig.json
new file mode 100644
index 00000000..5271c238
--- /dev/null
+++ b/examples/with-chakra-ui/renderer/tsconfig.json
@@ -0,0 +1,5 @@
+{
+ "extends": "../tsconfig.json",
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/with-chakra-ui/tsconfig.json b/examples/with-chakra-ui/tsconfig.json
new file mode 100644
index 00000000..7e2d690e
--- /dev/null
+++ b/examples/with-chakra-ui/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "incremental": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve"
+ },
+ "exclude": ["node_modules", "renderer/next.config.js", "app", "dist"]
+}