Added Vite Starter Template for Next UI

2025-12-08 19:26:11 +00:00 · 2022-02-28 01:48:19 +05:30 · 2022-02-28 01:48:19 +05:30 · 00458d8eb5
commit 00458d8eb5
parent 83a1826adc
13 changed files with 238 additions and 0 deletions
--- a/examples/vite-react-typescript/.gitignore
+++ b/examples/vite-react-typescript/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/examples/vite-react-typescript/README.md
+++ b/examples/vite-react-typescript/README.md
@ -0,0 +1,40 @@
+This is a [Vite React TypeScript](https://reactjs.org/) project bootstrapped with [`create vite`](https://stackblitz.com/edit/vitejs-vite-9rgerc?file=index.html&terminal=dev).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `src/App.tsx`. The page auto-updates as you edit the file.
+
+
+
+## Learn More
+
+To learn more about React.js, take a look at the following resources:
+
+- [React.js Documentation](https://reactjs.org/docs/getting-started.html) - learn about React.js features and API.
+- [Learn Vite](https://vitejs.dev/guide/) - Next Generation Frontend Tooling.
+- [Learn Next UI](https://nextui.org/) - Beautiful, fast and modern React UI library.
+
+You can check out [the Next UI GitHub repository](https://github.com/nextui-org/nextui) - your feedback and contributions are welcome!
+
+## Creating Production Build
+
+Run
+
+```bash
+npm run build
+```
+
+To Serve the Production App Locally 
+
+```bash
+npm install -g serve
+serve -s dist
+```
--- a/examples/vite-react-typescript/index.html
+++ b/examples/vite-react-typescript/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/examples/vite-react-typescript/package.json
+++ b/examples/vite-react-typescript/package.json
@ -0,0 +1,22 @@
+{
+  "name": "next_ui_vite",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@nextui-org/react": "^1.0.2-beta.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "@vitejs/plugin-react": "^1.0.7",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0"
+  }
+}
--- a/examples/vite-react-typescript/src/App.css
+++ b/examples/vite-react-typescript/src/App.css
@ -0,0 +1,42 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 100s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: calc(10px + 2vmin);
+}
--- a/examples/vite-react-typescript/src/App.tsx
+++ b/examples/vite-react-typescript/src/App.tsx
@ -0,0 +1,36 @@
+import { useState } from 'react'
+import logo from './logo.png'
+import './App.css'
+import {Button,Text,Link } from "@nextui-org/react";
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <Text color="secondary"><p>Hello Vite + NextUI!</p></Text>
+        <p>
+          <Button type="button" onClick={() => setCount((count) => count + 1)}>
+            count is: {count}
+          </Button>
+        </p>
+        <Text color="warning">
+        <p>
+          Edit <code>App.tsx</code> and save to test HMR updates.
+        </p>
+        </Text>
+        <p>
+        <Link block color="warning" href="https://reactjs.org">Learn React</Link>
+          {' | '}
+          <Link block color="primary" href="https://vitejs.dev/guide/features.html">Vite Docs</Link>
+          {' | '}
+          <Link block color="error" href="https://nextui.org/">NextUI Docs</Link>
+        </p>
+      </header>
+    </div>
+  )
+}
+
+export default App
--- a/examples/vite-react-typescript/src/index.css
+++ b/examples/vite-react-typescript/src/index.css
@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/examples/vite-react-typescript/src/logo.png
+++ b/examples/vite-react-typescript/src/logo.png
--- a/examples/vite-react-typescript/src/main.tsx
+++ b/examples/vite-react-typescript/src/main.tsx
@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)
--- a/examples/vite-react-typescript/src/vite-env.d.ts
+++ b/examples/vite-react-typescript/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/examples/vite-react-typescript/tsconfig.json
+++ b/examples/vite-react-typescript/tsconfig.json
@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/examples/vite-react-typescript/tsconfig.node.json
+++ b/examples/vite-react-typescript/tsconfig.node.json
@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/examples/vite-react-typescript/vite.config.ts
+++ b/examples/vite-react-typescript/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+})