archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

Added Vite Starter Template for Next UI

Browse Source
This commit is contained in:
Dhananjay-JSR 2022-02-28 01:48:19 +05:30
parent 83a1826adc
commit 00458d8eb5
13 changed files with 238 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/vite-react-typescript/.gitignore vendored Normal file
View File

@ -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?

40
examples/vite-react-typescript/README.md Normal file
View File

@ -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
```

13
examples/vite-react-typescript/index.html Normal file
View File

@ -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>

22
examples/vite-react-typescript/package.json Normal file
View File

@ -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"
}
}

42
examples/vite-react-typescript/src/App.css Normal file
View File

@ -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);
}

36
examples/vite-react-typescript/src/App.tsx Normal file
View File

@ -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

13
examples/vite-react-typescript/src/index.css Normal file
View File

@ -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;
}

BIN
examples/vite-react-typescript/src/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

11
examples/vite-react-typescript/src/main.tsx Normal file
View File

@ -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')
)

1
examples/vite-react-typescript/src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

21
examples/vite-react-typescript/tsconfig.json Normal file
View File

@ -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" }]
}

8
examples/vite-react-typescript/tsconfig.node.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}

7
examples/vite-react-typescript/vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})