├── .gitattributes ├── .gitignore ├── LICENSE.md ├── README.md ├── astro-basic-ts ├── .vscode │ ├── extensions.json │ └── launch.json ├── astro.config.mjs ├── package.json ├── public │ └── favicon.svg ├── src │ ├── components │ │ └── MyButton.tsx │ ├── env.d.ts │ ├── layouts │ │ └── Layout.astro │ └── pages │ │ ├── index.astro │ │ └── primereact.astro └── tsconfig.json ├── cra-basic-ts ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── cra-basic ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── index.css │ ├── index.js │ ├── reportWebVitals.js │ └── setupTests.js ├── nextjs-app-router-styled-tailwind ├── .eslintrc.json ├── .gitignore ├── README.md ├── app │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── next.config.mjs ├── package.json ├── postcss.config.mjs ├── public │ ├── next.svg │ ├── react.svg │ └── vercel.svg └── tsconfig.json ├── nextjs-basic ├── .eslintrc.json ├── README.md ├── next.config.js ├── package.json ├── pages │ ├── _app.js │ ├── api │ │ └── hello.js │ └── index.js ├── public │ └── favicon.ico └── styles │ └── globals.css ├── nextjs-crud ├── .eslintrc.json ├── README.md ├── next.config.js ├── package.json ├── pages │ ├── ProductService.js │ ├── _app.js │ ├── api │ │ └── hello.js │ └── index.js ├── public │ ├── demo │ │ ├── data │ │ │ └── products.json │ │ └── images │ │ │ └── product │ │ │ ├── bamboo-watch.jpg │ │ │ ├── black-watch.jpg │ │ │ ├── blue-band.jpg │ │ │ ├── blue-t-shirt.jpg │ │ │ ├── bracelet.jpg │ │ │ ├── brown-purse.jpg │ │ │ ├── chakra-bracelet.jpg │ │ │ ├── galaxy-earrings.jpg │ │ │ ├── game-controller.jpg │ │ │ ├── gaming-set.jpg │ │ │ ├── gold-phone-case.jpg │ │ │ ├── green-earbuds.jpg │ │ │ ├── green-t-shirt.jpg │ │ │ ├── grey-t-shirt.jpg │ │ │ ├── headphones.jpg │ │ │ ├── light-green-t-shirt.jpg │ │ │ ├── lime-band.jpg │ │ │ ├── mini-speakers.jpg │ │ │ ├── painted-phone-case.jpg │ │ │ ├── pink-band.jpg │ │ │ ├── pink-purse.jpg │ │ │ ├── product-placeholder.svg │ │ │ ├── purple-band.jpg │ │ │ ├── purple-gemstone-necklace.jpg │ │ │ ├── purple-t-shirt.jpg │ │ │ ├── shoes.jpg │ │ │ ├── sneakers.jpg │ │ │ ├── teal-t-shirt.jpg │ │ │ ├── yellow-earbuds.jpg │ │ │ ├── yoga-mat.jpg │ │ │ └── yoga-set.jpg │ └── favicon.ico └── styles │ └── globals.css ├── nextjs-quickstart-ts ├── .eslintrc.json ├── README.md ├── app │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ ├── page.tsx │ └── style.css ├── next-env.d.ts ├── next.config.js ├── package.json ├── public │ ├── background.svg │ ├── discussions.svg │ ├── github.svg │ ├── icon-primeract.svg │ ├── primeblocks.png │ ├── primeland.svg │ ├── primeone.png │ ├── primetemplates.png │ ├── star-fill.svg │ └── text-primereact.svg └── tsconfig.json ├── nextjs-styled-tailwind ├── README.md ├── next.config.js ├── package.json ├── pages │ ├── _app.js │ ├── _document.js │ └── index.js ├── postcss.config.mjs ├── public │ ├── favicon.ico │ ├── next.svg │ ├── react.svg │ └── vercel.svg └── styles │ └── globals.css ├── nextjs-unstyled-tailwind ├── README.md ├── components │ └── ThemeSwitcher.js ├── next.config.js ├── package.json ├── pages │ ├── _app.js │ ├── _document.js │ └── index.js ├── postcss.config.mjs ├── public │ └── favicon.ico └── styles │ └── globals.css ├── vite-basic-ts ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── vite-preact ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── app.css │ ├── app.tsx │ ├── assets │ │ └── preact.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── vite-styled-tailwind ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts └── vite-unstyled-tailwind ├── index.html ├── package.json ├── public └── vite.svg ├── src ├── App.css ├── App.tsx ├── assets │ └── react.svg ├── index.css ├── main.tsx └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | **/build 3 | yarn.lock 4 | package-lock.json 5 | .DS_Store 6 | .env.local 7 | .env.development.local 8 | .env.test.local 9 | .env.production.local 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | **/.pnp 14 | .pnp.js 15 | **/.next 16 | **/out -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-2021 PrimeTek 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PrimeReact-Examples 2 | 3 | PrimeReact team has created various samples to get you started. 4 | 5 | | Name | Stack | 6 | |------------------------|---------------------------------------------------------------| 7 | | astro-basic-ts | astro starter using typescript | 8 | | cra-basic | create-react-app starter | 9 | | cra-basic-ts | create-react-app starter using typescript | 10 | | next-basic | nextjs starter | 11 | | next-crud | nextjs starter with crud implementation | 12 | | next-quickstart-ts | nextjs quickstart typescript | 13 | | next-styled | nextjs styled mode: PrimeReact & TailwindCSS | 14 | | next-unstyled | nextjs unstyled mode: PrimeReact & TailwindCSS | 15 | | next-app-router-styled | nextjs styled mode using App Router: PrimeReact & TailwindCSS | 16 | | vite-basic-ts | vite: using typescript | 17 | | vite-styled | vite: styled mode using PrimeReact & TailwindCSS +Theme | 18 | | vite-unstyled | vite: unstyled mode using PrimeReact & TailwindCSS | 19 | | vite-preact | vite: using Preact | 20 | -------------------------------------------------------------------------------- /astro-basic-ts/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /astro-basic-ts/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /astro-basic-ts/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | 3 | // https://astro.build/config 4 | import react from "@astrojs/react"; 5 | 6 | // https://astro.build/config 7 | export default defineConfig({ 8 | integrations: [react()], 9 | vite: { 10 | ssr: { 11 | noExternal: ["primereact", "primeicons"] 12 | } 13 | } 14 | }); -------------------------------------------------------------------------------- /astro-basic-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "astro-basic-ts", 3 | "type": "module", 4 | "version": "1.0.0", 5 | "private": true, 6 | "scripts": { 7 | "dev": "astro dev", 8 | "build": "astro build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "devDependencies": { 13 | "@astrojs/react": "^1.2.2", 14 | "@types/react": "^18.0.26", 15 | "@types/react-dom": "^18.0.9", 16 | "astro": "^1.7.2", 17 | "primereact": "^8.7.3", 18 | "primeicons": "^6.0.1" 19 | }, 20 | "dependencies": { 21 | "react": "^18.2.0", 22 | "react-dom": "^18.2.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /astro-basic-ts/public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /astro-basic-ts/src/components/MyButton.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "primereact/button" 2 | 3 | export default function MyButton() { 4 | 5 | const showAlert = () => { 6 | alert("Astro + PrimeReact = <3"); 7 | } 8 | 9 | return ( 10 | <> 11 | 14 |
{count}
15 | 16 | ); 17 | } 18 | 19 | export default App; -------------------------------------------------------------------------------- /cra-basic-ts/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 1rem; 3 | } 4 | 5 | body { 6 | margin: 0px; 7 | height: 100%; 8 | padding: 2rem; 9 | overflow-x: hidden; 10 | overflow-y: auto; 11 | background-color: var(--surface-ground); 12 | font-family: var(--font-family); 13 | font-weight: normal; 14 | color: var(--text-color); 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } -------------------------------------------------------------------------------- /cra-basic-ts/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /cra-basic-ts/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /cra-basic-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /cra-basic-ts/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /cra-basic-ts/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /cra-basic-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /cra-basic/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /cra-basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "primereact-cra-basic", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^18.2.0", 7 | "react-dom": "^18.2.0", 8 | "react-transition-group": "^4.4.5", 9 | "primereact": "^10.5.1", 10 | "primeicons": "^6.0.1", 11 | "primeflex": "^3.3.1", 12 | "web-vitals": "^3.5.2" 13 | }, 14 | "devDependencies": { 15 | "@testing-library/jest-dom": "latest", 16 | "@testing-library/react": "latest", 17 | "@testing-library/user-event": "latest", 18 | "react-scripts": "latest", 19 | "react-test-renderer": "latest", 20 | "sass": "latest" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /cra-basic/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/cra-basic/public/favicon.ico -------------------------------------------------------------------------------- /cra-basic/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /cra-basic/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/cra-basic/public/logo192.png -------------------------------------------------------------------------------- /cra-basic/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/cra-basic/public/logo512.png -------------------------------------------------------------------------------- /cra-basic/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /cra-basic/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /cra-basic/src/App.js: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import {Button} from 'primereact/button'; 3 | import 'primereact/resources/themes/saga-blue/theme.css'; 4 | import 'primereact/resources/primereact.min.css'; 5 | import 'primeicons/primeicons.css'; 6 | import 'primeflex/primeflex.css'; 7 | 8 | function App() { 9 | const [count,setCount] = useState(0); 10 | 11 | return ( 12 |
13 | 14 |
{count}
15 |
16 | ); 17 | } 18 | 19 | export default App; -------------------------------------------------------------------------------- /cra-basic/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 1rem; 3 | } 4 | 5 | body { 6 | margin: 0px; 7 | height: 100%; 8 | padding: 2rem; 9 | overflow-x: hidden; 10 | overflow-y: auto; 11 | background-color: var(--surface-ground); 12 | font-family: var(--font-family); 13 | font-weight: normal; 14 | color: var(--text-color); 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } -------------------------------------------------------------------------------- /cra-basic/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /cra-basic/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /cra-basic/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-app-router-styled-tailwind/app/favicon.ico -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/app/globals.css: -------------------------------------------------------------------------------- 1 | @layer theme, base, components, primereact, utilities; 2 | @import "tailwindcss/theme.css" layer(theme); 3 | @import "tailwindcss/preflight.css" layer(base); 4 | @import "tailwindcss/utilities.css" layer(utilities); 5 | 6 | @import "primereact/resources/themes/saga-blue/theme.css" layer(primereact); 7 | 8 | :root { 9 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 10 | font-size: 16px; 11 | line-height: 24px; 12 | font-weight: 400; 13 | max-width: 1280px; 14 | margin: 0 auto; 15 | padding: 2rem; 16 | text-align: center; 17 | 18 | color-scheme: light; 19 | color: #242424; 20 | background-color: rgba(255, 255, 255, 0.87); 21 | 22 | font-synthesis: none; 23 | text-rendering: optimizeLegibility; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | -webkit-text-size-adjust: 100%; 27 | } 28 | 29 | body { 30 | margin: 0; 31 | height: 100%; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | 40 | .logo { 41 | height: 6em; 42 | will-change: filter; 43 | transition: filter 300ms; 44 | } 45 | 46 | .logo:hover { 47 | filter: drop-shadow(0 0 2em #646cffaa); 48 | } 49 | 50 | .logo.react:hover { 51 | filter: drop-shadow(0 0 2em #61dafbaa); 52 | } 53 | 54 | @keyframes logo-spin { 55 | from { 56 | transform: rotate(0deg); 57 | } 58 | 59 | to { 60 | transform: rotate(360deg); 61 | } 62 | } 63 | 64 | @media (prefers-reduced-motion: no-preference) { 65 | a:nth-of-type(2) .logo { 66 | animation: logo-spin infinite 20s linear; 67 | } 68 | } 69 | 70 | .card { 71 | padding: 1rem; 72 | } 73 | 74 | .read-the-docs { 75 | color: #888; 76 | } -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { PrimeReactProvider } from "primereact/api"; 3 | import { Inter } from "next/font/google"; 4 | import "./globals.css"; 5 | import 'primereact/resources/themes/saga-blue/theme.css'; 6 | 7 | const inter = Inter({ subsets: ["latin"] }); 8 | 9 | export const metadata: Metadata = { 10 | title: "Create Next App", 11 | description: "Generated by create next app", 12 | }; 13 | 14 | export default function RootLayout({ 15 | children, 16 | }: Readonly<{ 17 | children: React.ReactNode; 18 | }>) { 19 | return ( 20 | 21 | 22 | 23 | {children} 24 | 25 | 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/app/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { useState } from "react"; 3 | import { Button } from "primereact/button"; 4 | import { InputText } from "primereact/inputtext"; 5 | 6 | 7 | export default function App() { 8 | const [count, setCount] = useState(0); 9 | return ( 10 | <> 11 |
12 |

13 | 14 | Next.JS logo 15 | 16 | 17 | React logo 18 | 19 |

20 |

Next.js + PrimeReact + TailwindCSS

21 |
22 |

Demo app showing PrimeReact + Tailwind CSS in unstyled mode

23 |
24 |
25 | 26 | 27 |
28 |

Click on the Next and React logos to learn more

29 |
30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-app-router-styled-tailwind", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev --turbopack", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "15.2.1", 13 | "primereact": "^10.9.2", 14 | "react": "19.0.0", 15 | "react-dom": "19.0.0" 16 | }, 17 | "devDependencies": { 18 | "@tailwindcss/postcss": "^4", 19 | "@types/node": "^20", 20 | "@types/react": "19.0.10", 21 | "@types/react-dom": "19.0.4", 22 | "eslint": "^8", 23 | "eslint-config-next": "15.2.1", 24 | "tailwindcss": "^4", 25 | "typescript": "^5" 26 | }, 27 | "overrides": { 28 | "@types/react": "19.0.10", 29 | "@types/react-dom": "19.0.4" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/public/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nextjs-app-router-styled-tailwind/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": [ 4 | "dom", 5 | "dom.iterable", 6 | "esnext" 7 | ], 8 | "allowJs": true, 9 | "skipLibCheck": true, 10 | "strict": true, 11 | "noEmit": true, 12 | "esModuleInterop": true, 13 | "module": "esnext", 14 | "moduleResolution": "bundler", 15 | "resolveJsonModule": true, 16 | "isolatedModules": true, 17 | "jsx": "preserve", 18 | "incremental": true, 19 | "plugins": [ 20 | { 21 | "name": "next" 22 | } 23 | ], 24 | "paths": { 25 | "@/*": [ 26 | "./*" 27 | ] 28 | }, 29 | "target": "ES2017" 30 | }, 31 | "include": [ 32 | "next-env.d.ts", 33 | "**/*.ts", 34 | "**/*.tsx", 35 | ".next/types/**/*.ts" 36 | ], 37 | "exclude": [ 38 | "node_modules" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /nextjs-basic/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /nextjs-basic/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /nextjs-basic/next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | } 4 | -------------------------------------------------------------------------------- /nextjs-basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-basic", 3 | "private": true, 4 | "scripts": { 5 | "dev": "next dev", 6 | "build": "next build", 7 | "start": "next start", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "next": "^15.2.1", 12 | "primeflex": "^3.3.1", 13 | "primeicons": "^6.0.1", 14 | "primereact": "^10.9.2", 15 | "react": "18.2.0", 16 | "react-dom": "18.2.0", 17 | "react-transition-group": "^4.4.5" 18 | }, 19 | "devDependencies": { 20 | "eslint": "8.57.0", 21 | "eslint-config-next": "12.3.4" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /nextjs-basic/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css'; 2 | import 'primereact/resources/themes/saga-blue/theme.css'; 3 | import 'primereact/resources/primereact.min.css'; 4 | import 'primeicons/primeicons.css'; 5 | import 'primeflex/primeflex.css'; 6 | 7 | function MyApp({ Component, pageProps }) { 8 | return 9 | } 10 | 11 | export default MyApp 12 | -------------------------------------------------------------------------------- /nextjs-basic/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /nextjs-basic/pages/index.js: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import {Button} from 'primereact/button'; 3 | 4 | export default function Home() { 5 | const [count,setCount] = useState(0); 6 | 7 | return ( 8 |
9 | 10 |
{count}
11 |
12 | ); 13 | } -------------------------------------------------------------------------------- /nextjs-basic/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-basic/public/favicon.ico -------------------------------------------------------------------------------- /nextjs-basic/styles/globals.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 1rem; 3 | } 4 | 5 | body { 6 | margin: 0px; 7 | height: 100%; 8 | padding: 2rem; 9 | overflow-x: hidden; 10 | overflow-y: auto; 11 | background-color: var(--surface-ground); 12 | font-family: var(--font-family); 13 | font-weight: normal; 14 | color: var(--text-color); 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } -------------------------------------------------------------------------------- /nextjs-crud/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /nextjs-crud/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /nextjs-crud/next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | } 4 | -------------------------------------------------------------------------------- /nextjs-crud/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-crud", 3 | "private": true, 4 | "scripts": { 5 | "dev": "next dev --turbopack", 6 | "build": "next build", 7 | "start": "next start", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "next": "15.2.1", 12 | "react": "19.0.0", 13 | "react-dom": "19.0.0", 14 | "react-transition-group": "^4.4.5", 15 | "primereact": "^10.9.2", 16 | "primeicons": "^6.0.1", 17 | "primeflex": "^3.3.1" 18 | }, 19 | "devDependencies": { 20 | "eslint": "8.57.0", 21 | "eslint-config-next": "15.2.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /nextjs-crud/pages/ProductService.js: -------------------------------------------------------------------------------- 1 | function getProducts() { 2 | return fetch('demo/data/products.json').then(res => res.json()).then(d => d.data); 3 | } 4 | 5 | export {getProducts}; -------------------------------------------------------------------------------- /nextjs-crud/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css'; 2 | import 'primereact/resources/themes/saga-blue/theme.css'; 3 | import 'primereact/resources/primereact.min.css'; 4 | import 'primeicons/primeicons.css'; 5 | import 'primeflex/primeflex.css'; 6 | 7 | function MyApp({ Component, pageProps }) { 8 | return 9 | } 10 | 11 | export default MyApp 12 | -------------------------------------------------------------------------------- /nextjs-crud/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /nextjs-crud/pages/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from 'react'; 2 | import { classNames } from 'primereact/utils'; 3 | import { DataTable } from 'primereact/datatable'; 4 | import { Column } from 'primereact/column'; 5 | import { getProducts } from './ProductService'; 6 | import { Toast } from 'primereact/toast'; 7 | import { Button } from 'primereact/button'; 8 | import { Rating } from 'primereact/rating'; 9 | import { InputTextarea } from 'primereact/inputtextarea'; 10 | import { RadioButton } from 'primereact/radiobutton'; 11 | import { InputNumber } from 'primereact/inputnumber'; 12 | import { Dialog } from 'primereact/dialog'; 13 | import { InputText } from 'primereact/inputtext'; 14 | 15 | export default function Home() { 16 | let emptyProduct = { 17 | id: null, 18 | name: '', 19 | image: null, 20 | description: '', 21 | category: null, 22 | price: 0, 23 | quantity: 0, 24 | rating: 0, 25 | inventoryStatus: 'INSTOCK' 26 | }; 27 | 28 | const [products, setProducts] = useState(null); 29 | const [productDialog, setProductDialog] = useState(false); 30 | const [deleteProductDialog, setDeleteProductDialog] = useState(false); 31 | const [deleteProductsDialog, setDeleteProductsDialog] = useState(false); 32 | const [product, setProduct] = useState(emptyProduct); 33 | const [selectedProducts, setSelectedProducts] = useState(null); 34 | const [submitted, setSubmitted] = useState(false); 35 | const [globalFilter, setGlobalFilter] = useState(null); 36 | const toast = useRef(null); 37 | const dt = useRef(null); 38 | 39 | useEffect(() => { 40 | getProducts().then(data => setProducts(data)); 41 | }, []); 42 | 43 | const formatCurrency = (value) => { 44 | return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); 45 | } 46 | 47 | const openNew = () => { 48 | setProduct(emptyProduct); 49 | setSubmitted(false); 50 | setProductDialog(true); 51 | } 52 | 53 | const hideDialog = () => { 54 | setSubmitted(false); 55 | setProductDialog(false); 56 | } 57 | 58 | const hideDeleteProductDialog = () => { 59 | setDeleteProductDialog(false); 60 | } 61 | 62 | const hideDeleteProductsDialog = () => { 63 | setDeleteProductsDialog(false); 64 | } 65 | 66 | const saveProduct = () => { 67 | setSubmitted(true); 68 | 69 | if (product.name.trim()) { 70 | let _products = [...products]; 71 | let _product = {...product}; 72 | if (product.id) { 73 | const index = findIndexById(product.id); 74 | 75 | _products[index] = _product; 76 | toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 }); 77 | } 78 | else { 79 | _product.id = createId(); 80 | _product.image = 'product-placeholder.svg'; 81 | _products.push(_product); 82 | toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 }); 83 | } 84 | 85 | setProducts(_products); 86 | setProductDialog(false); 87 | setProduct(emptyProduct); 88 | } 89 | } 90 | 91 | const editProduct = (product) => { 92 | setProduct({...product}); 93 | setProductDialog(true); 94 | } 95 | 96 | const confirmDeleteProduct = (product) => { 97 | setProduct(product); 98 | setDeleteProductDialog(true); 99 | } 100 | 101 | const deleteProduct = () => { 102 | let _products = products.filter(val => val.id !== product.id); 103 | setProducts(_products); 104 | setDeleteProductDialog(false); 105 | setProduct(emptyProduct); 106 | toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 }); 107 | } 108 | 109 | const findIndexById = (id) => { 110 | let index = -1; 111 | for (let i = 0; i < products.length; i++) { 112 | if (products[i].id === id) { 113 | index = i; 114 | break; 115 | } 116 | } 117 | 118 | return index; 119 | } 120 | 121 | const createId = () => { 122 | let id = ''; 123 | let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; 124 | for (let i = 0; i < 5; i++) { 125 | id += chars.charAt(Math.floor(Math.random() * chars.length)); 126 | } 127 | return id; 128 | } 129 | 130 | const exportCSV = () => { 131 | dt.current.exportCSV(); 132 | } 133 | 134 | const confirmDeleteSelected = () => { 135 | setDeleteProductsDialog(true); 136 | } 137 | 138 | const deleteSelectedProducts = () => { 139 | let _products = products.filter(val => !selectedProducts.includes(val)); 140 | setProducts(_products); 141 | setDeleteProductsDialog(false); 142 | setSelectedProducts(null); 143 | toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 }); 144 | } 145 | 146 | const onCategoryChange = (e) => { 147 | let _product = {...product}; 148 | _product['category'] = e.value; 149 | setProduct(_product); 150 | } 151 | 152 | const onInputChange = (e, name) => { 153 | const val = (e.target && e.target.value) || ''; 154 | let _product = {...product}; 155 | _product[`${name}`] = val; 156 | 157 | setProduct(_product); 158 | } 159 | 160 | const onInputNumberChange = (e, name) => { 161 | const val = e.value || 0; 162 | let _product = {...product}; 163 | _product[`${name}`] = val; 164 | 165 | setProduct(_product); 166 | } 167 | 168 | const imageBodyTemplate = (rowData) => { 169 | return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={rowData.image} className="w-7rem shadow-2" /> 170 | } 171 | 172 | const priceBodyTemplate = (rowData) => { 173 | return formatCurrency(rowData.price); 174 | } 175 | 176 | const ratingBodyTemplate = (rowData) => { 177 | return ; 178 | } 179 | 180 | const statusBodyTemplate = (rowData) => { 181 | return {rowData.inventoryStatus}; 182 | } 183 | 184 | const actionBodyTemplate = (rowData) => { 185 | return ( 186 | 187 | 24 | 25 |

26 | Edit src/App.jsx and save to test HMR 27 |

28 | 29 |

Click on the Next and React logos to learn more

30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /nextjs-styled-tailwind/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /nextjs-styled-tailwind/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-styled-tailwind/public/favicon.ico -------------------------------------------------------------------------------- /nextjs-styled-tailwind/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nextjs-styled-tailwind/public/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nextjs-styled-tailwind/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nextjs-styled-tailwind/styles/globals.css: -------------------------------------------------------------------------------- 1 | @layer theme, base, components, primereact, utilities; 2 | @import "tailwindcss/theme.css" layer(theme); 3 | @import "tailwindcss/preflight.css" layer(base); 4 | @import "tailwindcss/utilities.css" layer(utilities); 5 | 6 | @import "primereact/resources/themes/saga-blue/theme.css" layer(primereact); 7 | 8 | :root { 9 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 10 | font-size: 16px; 11 | line-height: 24px; 12 | font-weight: 400; 13 | max-width: 1280px; 14 | margin: 0 auto; 15 | padding: 2rem; 16 | text-align: center; 17 | 18 | color-scheme: light; 19 | color: #242424; 20 | background-color: rgba(255, 255, 255, 0.87); 21 | 22 | font-synthesis: none; 23 | text-rendering: optimizeLegibility; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | -webkit-text-size-adjust: 100%; 27 | } 28 | 29 | body { 30 | margin: 0; 31 | display: flex; 32 | place-items: center; 33 | min-width: 320px; 34 | min-height: 100vh; 35 | } 36 | 37 | h1 { 38 | font-size: 3.2em; 39 | line-height: 1.1; 40 | } 41 | 42 | 43 | .logo { 44 | height: 6em; 45 | will-change: filter; 46 | transition: filter 300ms; 47 | } 48 | 49 | .logo:hover { 50 | filter: drop-shadow(0 0 2em #646cffaa); 51 | } 52 | 53 | .logo.react:hover { 54 | filter: drop-shadow(0 0 2em #61dafbaa); 55 | } 56 | 57 | @keyframes logo-spin { 58 | from { 59 | transform: rotate(0deg); 60 | } 61 | 62 | to { 63 | transform: rotate(360deg); 64 | } 65 | } 66 | 67 | @media (prefers-reduced-motion: no-preference) { 68 | a:nth-of-type(2) .logo { 69 | animation: logo-spin infinite 20s linear; 70 | } 71 | } 72 | 73 | .card { 74 | padding: 2em; 75 | } 76 | 77 | .read-the-docs { 78 | color: #888; 79 | } -------------------------------------------------------------------------------- /nextjs-unstyled-tailwind/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 20 | 21 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 22 | 23 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 24 | 25 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 26 | 27 | ## Learn More 28 | 29 | To learn more about Next.js, take a look at the following resources: 30 | 31 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 32 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 33 | 34 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 35 | 36 | ## Deploy on Vercel 37 | 38 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 39 | 40 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 41 | -------------------------------------------------------------------------------- /nextjs-unstyled-tailwind/components/ThemeSwitcher.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { useState } from 'react'; 3 | 4 | export const ThemeSwitcher = () => { 5 | const [iconClassName, setIconClassName] = useState('pi-moon'); 6 | 7 | const onThemeToggler = () => { 8 | const root = document.getElementsByTagName('html')[0]; 9 | 10 | root.classList.toggle('dark'); 11 | setIconClassName((prevClasName) => (prevClasName === 'pi-moon' ? 'pi-sun' : 'pi-moon')); 12 | }; 13 | 14 | return ( 15 |
16 | 19 |
20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /nextjs-unstyled-tailwind/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /nextjs-unstyled-tailwind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-unstyled", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev --turbopack", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "15.2.1", 13 | "primeicons": "^7.0.0", 14 | "primereact": "^10.9.2", 15 | "react": "19.0.0", 16 | "react-dom": "19.0.0", 17 | "tailwind-merge": "^2.3.0" 18 | }, 19 | "devDependencies": { 20 | "@tailwindcss/postcss": "^4", 21 | "tailwindcss": "^4" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /nextjs-unstyled-tailwind/pages/_app.js: -------------------------------------------------------------------------------- 1 | import { PrimeReactProvider } from "primereact/api"; 2 | import Tailwind from "primereact/passthrough/tailwind"; 3 | import { ThemeSwitcher } from "../components/ThemeSwitcher"; 4 | import { twMerge } from "tailwind-merge"; 5 | import "../styles/globals.css"; 6 | import "primeicons/primeicons.css"; 7 | 8 | export default function App({ Component, pageProps }) { 9 | return ( 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /nextjs-unstyled-tailwind/pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /nextjs-unstyled-tailwind/pages/index.js: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { Button } from "primereact/button"; 3 | import { Menu } from "primereact/menu"; 4 | import { Panel } from "primereact/panel"; 5 | import React, { useRef } from "react"; 6 | 7 | export default function Home() { 8 | const menuLeft = useRef(null); 9 | const items = [ 10 | { 11 | label: "Options", 12 | items: [ 13 | { 14 | label: "Refresh", 15 | icon: "pi pi-refresh", 16 | }, 17 | { 18 | label: "Export", 19 | icon: "pi pi-upload", 20 | }, 21 | ], 22 | }, 23 | ]; 24 | 25 | return ( 26 |
38 |

Tailwind CSS + PrimeReact

39 | 40 |

First panel component uses the global pass through preset from the Tailwind CSS based implementation of PrimeOne Design 2023.

41 | 42 | 43 | 49 |

Second panel overrides the header section with custom a custom style.

50 | 51 | 52 | 61 |

62 | Third panel ignores the default preset with 63 | mergeSections: false and applies a custom style to all elements of the panel instead. 64 |

65 | 66 | 67 |

Fourth panel displays any PrimeReact component you need to see how its styled.

68 | 69 |
72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /nextjs-unstyled-tailwind/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /nextjs-unstyled-tailwind/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-unstyled-tailwind/public/favicon.ico -------------------------------------------------------------------------------- /nextjs-unstyled-tailwind/styles/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | html { 4 | font-size: 14px; 5 | } 6 | 7 | body { 8 | background: #eff3f8; 9 | padding: 1rem; 10 | } 11 | 12 | .card { 13 | background: #ffffff; 14 | padding: 2rem; 15 | border-radius: 10px; 16 | margin-bottom: 1rem; 17 | } 18 | 19 | html.dark body { 20 | background: #040d19; 21 | } 22 | 23 | html.dark .card { 24 | background: #071426; 25 | } 26 | -------------------------------------------------------------------------------- /vite-basic-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /vite-basic-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-typescript-basic", 3 | "private": true, 4 | "version": "1.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "primeflex": "^3.3.1", 13 | "primeicons": "^6.0.1", 14 | "primereact": "^10.5.1", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "latest", 20 | "@types/react-dom": "latest", 21 | "@vitejs/plugin-react": "latest", 22 | "typescript": "latest", 23 | "vite": "latest" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /vite-basic-ts/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite-basic-ts/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /vite-basic-ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import reactLogo from './assets/react.svg'; 3 | import { Button } from 'primereact/button'; 4 | import { InputText } from 'primereact/inputtext'; 5 | 6 | import 'primereact/resources/themes/lara-light-indigo/theme.css'; //theme 7 | import 'primereact/resources/primereact.min.css'; //core css 8 | import 'primeicons/primeicons.css'; //icons 9 | import 'primeflex/primeflex.css'; // flex 10 | import './App.css'; 11 | 12 | function App() { 13 | const [count, setCount] = useState(0); 14 | 15 | return ( 16 |
17 | 25 |

Vite + PrimeReact

26 |
27 |

PrimeReact Typescript Issue Template

28 |

29 | Please create a test case and attach the link to the to your github 30 | issue report. 31 |

32 |
33 |
34 | 40 | 41 |

42 | Edit src/App.tsx and save to test PrimeReact 43 |

44 |
45 |

46 | Click on the Vite and React logos to learn more 47 |

48 |
49 | ); 50 | } 51 | 52 | export default App; 53 | -------------------------------------------------------------------------------- /vite-basic-ts/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite-basic-ts/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2em; 37 | line-height: 1.1; 38 | } 39 | 40 | button { 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /vite-basic-ts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import { PrimeReactProvider } from "primereact/api"; 4 | import App from './App' 5 | import './index.css' 6 | 7 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | -------------------------------------------------------------------------------- /vite-basic-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /vite-basic-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /vite-basic-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /vite-basic-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /vite-preact/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Preact + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /vite-preact/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-preact-ts-starter", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "preact": "^10.19.5", 13 | "primeflex": "^3.3.1", 14 | "primeicons": "^6.0.1", 15 | "primereact": "^10.5.1" 16 | }, 17 | "devDependencies": { 18 | "@preact/preset-vite": "^2.8.1", 19 | "typescript": "^5.2.2", 20 | "vite": "^5.1.4" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /vite-preact/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite-preact/src/app.css: -------------------------------------------------------------------------------- 1 | #app { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | } 12 | .logo:hover { 13 | filter: drop-shadow(0 0 2em #646cffaa); 14 | } 15 | .logo.preact:hover { 16 | filter: drop-shadow(0 0 2em #673ab8aa); 17 | } 18 | 19 | .card { 20 | padding: 2em; 21 | } 22 | 23 | .read-the-docs { 24 | color: #888; 25 | } 26 | -------------------------------------------------------------------------------- /vite-preact/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'preact/hooks' 2 | import preactLogo from './assets/preact.svg' 3 | import viteLogo from '/vite.svg' 4 | import { Button } from "primereact/button"; 5 | import { InputText } from "primereact/inputtext"; 6 | 7 | import 'primereact/resources/themes/lara-dark-indigo/theme.css'; //theme 8 | import 'primeicons/primeicons.css'; //icons 9 | import 'primeflex/primeflex.css'; // flex 10 | import './app.css' 11 | 12 | export function App() { 13 | const [count, setCount] = useState(0) 14 | 15 | return ( 16 | <> 17 | 25 |

Vite + Preact

26 |
27 | 28 | 29 |

30 | Edit src/app.tsx and save to test HMR 31 |

32 |
33 |

34 | Click on the Vite and Preact logos to learn more 35 |

36 | 37 | ) 38 | } 39 | -------------------------------------------------------------------------------- /vite-preact/src/assets/preact.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite-preact/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | 39 | @media (prefers-color-scheme: light) { 40 | :root { 41 | color: #213547; 42 | background-color: #ffffff; 43 | } 44 | a:hover { 45 | color: #747bff; 46 | } 47 | button { 48 | background-color: #f9f9f9; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /vite-preact/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { render } from 'preact' 2 | import { App } from './app.tsx' 3 | import { PrimeReactProvider } from "primereact/api"; 4 | import './index.css' 5 | 6 | render( 7 | 8 | , document.getElementById('app')!) 9 | -------------------------------------------------------------------------------- /vite-preact/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /vite-preact/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | "paths": { 9 | "react": ["./node_modules/preact/compat/"], 10 | "react-dom": ["./node_modules/preact/compat/"] 11 | }, 12 | 13 | /* Bundler mode */ 14 | "moduleResolution": "bundler", 15 | "allowImportingTsExtensions": true, 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "noEmit": true, 19 | "jsx": "react-jsx", 20 | "jsxImportSource": "preact", 21 | 22 | /* Linting */ 23 | "strict": true, 24 | "noUnusedLocals": true, 25 | "noUnusedParameters": true, 26 | "noFallthroughCasesInSwitch": true 27 | }, 28 | "include": ["src"], 29 | "references": [{ "path": "./tsconfig.node.json" }] 30 | } 31 | -------------------------------------------------------------------------------- /vite-preact/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /vite-preact/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import preact from '@preact/preset-vite' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [preact()], 7 | }) 8 | -------------------------------------------------------------------------------- /vite-styled-tailwind/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /vite-styled-tailwind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-styled-tailwindcss", 3 | "private": true, 4 | "version": "1.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "primeicons": "^7.0.0", 13 | "primereact": "^10.9.2", 14 | "react": "^19.0.0", 15 | "react-dom": "^19.0.0" 16 | }, 17 | "devDependencies": { 18 | "@tailwindcss/postcss": "^4.0.11", 19 | "@tailwindcss/vite": "^4.0.11", 20 | "@types/node": "^22.13.5", 21 | "@types/react": "19.0.10", 22 | "@types/react-dom": "19.0.4", 23 | "@vitejs/plugin-react": "^4.3.4", 24 | "tailwindcss": "^4.0.11", 25 | "typescript": "5.8.2", 26 | "vite": "^6.1.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /vite-styled-tailwind/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite-styled-tailwind/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | will-change: filter; 11 | transition: filter 300ms; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /vite-styled-tailwind/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import reactLogo from "./assets/react.svg"; 3 | import viteLogo from "/vite.svg"; 4 | import { Button } from "primereact/button"; 5 | import { InputText } from "primereact/inputtext"; 6 | 7 | function App() { 8 | const [count, setCount] = useState(0); 9 | 10 | return ( 11 | <> 12 |

13 | 14 | Vite logo 15 | 16 | 17 | React logo 18 | 19 |

20 |

Vite + PrimeReact + TailwindCSS

21 |
22 |

Demo app showing PrimeReact + Tailwind CSS in styled mode with PrimeReact Theme!

23 |
24 |
25 | 26 | 27 |

28 | Edit src/App.jsx and save to test HMR 29 |

30 |
31 |

Click on the Vite and React logos to learn more

32 | 33 | ); 34 | } 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /vite-styled-tailwind/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite-styled-tailwind/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | @import 'primereact/resources/themes/saga-blue/theme.css'; 4 | 5 | :root { 6 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 7 | font-size: 16px; 8 | line-height: 24px; 9 | font-weight: 400; 10 | 11 | color-scheme: light; 12 | 13 | font-synthesis: none; 14 | text-rendering: optimizeLegibility; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | -webkit-text-size-adjust: 100%; 18 | } 19 | 20 | body { 21 | margin: 0; 22 | display: flex; 23 | place-items: center; 24 | min-width: 320px; 25 | min-height: 100vh; 26 | } 27 | 28 | 29 | 30 | h1 { 31 | font-size: 3.2em; 32 | line-height: 1.1; 33 | } -------------------------------------------------------------------------------- /vite-styled-tailwind/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { PrimeReactProvider } from "primereact/api"; 4 | import App from "./App"; 5 | // tailwind css 6 | import "./index.css"; 7 | // primreact css 8 | import "primeicons/primeicons.css"; 9 | import "./App.css"; 10 | 11 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /vite-styled-tailwind/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /vite-styled-tailwind/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /vite-styled-tailwind/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /vite-styled-tailwind/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from "@tailwindcss/vite"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(), tailwindcss()] 8 | }) 9 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-styled-tailwindcss", 3 | "private": true, 4 | "version": "1.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "primeicons": "^7.0.0", 13 | "primereact": "^10.9.2", 14 | "react": "^19.0.0", 15 | "react-dom": "^19.0.0", 16 | "tailwind-merge": "^3.0.2" 17 | }, 18 | "devDependencies": { 19 | "@tailwindcss/postcss": "^4.0.11", 20 | "@tailwindcss/vite": "^4.0.11", 21 | "@types/node": "^20.11.20", 22 | "@types/react": "18.2.58", 23 | "@types/react-dom": "18.2.19", 24 | "@vitejs/plugin-react": "^4.3.4", 25 | "tailwindcss": "^4.0.11", 26 | "typescript": "5.8.2", 27 | "vite": "^6.2.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | will-change: filter; 11 | transition: filter 300ms; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import reactLogo from "./assets/react.svg"; 3 | import viteLogo from "/vite.svg"; 4 | import { Button } from "primereact/button"; 5 | import { InputText } from "primereact/inputtext"; 6 | 7 | function App() { 8 | const [count, setCount] = useState(0); 9 | 10 | return ( 11 | <> 12 |

13 | 14 | Vite logo 15 | 16 | 17 | React logo 18 | 19 |

20 |

Vite + PrimeReact + TailwindCSS

21 |
22 |

Demo app showing PrimeReact + Tailwind CSS in unstyled mode

23 |
24 |
25 | 26 | 27 |

28 | Edit src/App.jsx and save to test HMR 29 |

30 |
31 |

Click on the Vite and React logos to learn more

32 | 33 | ); 34 | } 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | :root { 4 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 5 | font-size: 16px; 6 | line-height: 24px; 7 | font-weight: 400; 8 | 9 | color-scheme: light dark; 10 | color: rgba(255, 255, 255, 0.87); 11 | background-color: #242424; 12 | 13 | font-synthesis: none; 14 | text-rendering: optimizeLegibility; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | -webkit-text-size-adjust: 100%; 18 | } 19 | 20 | a { 21 | font-weight: 500; 22 | color: #646cff; 23 | text-decoration: inherit; 24 | } 25 | a:hover { 26 | color: #535bf2; 27 | } 28 | 29 | body { 30 | margin: 0; 31 | display: flex; 32 | place-items: center; 33 | min-width: 320px; 34 | min-height: 100vh; 35 | } 36 | 37 | h1 { 38 | font-size: 3.2em; 39 | line-height: 1.1; 40 | } 41 | 42 | button { 43 | border-radius: 8px; 44 | border: 1px solid transparent; 45 | padding: 0.6em 1.2em; 46 | font-size: 1em; 47 | font-weight: 500; 48 | font-family: inherit; 49 | cursor: pointer; 50 | transition: border-color 0.25s; 51 | } 52 | button:hover { 53 | border-color: #646cff; 54 | } 55 | button:focus, 56 | button:focus-visible { 57 | outline: 4px auto -webkit-focus-ring-color; 58 | } 59 | 60 | @media (prefers-color-scheme: light) { 61 | :root { 62 | color: #213547; 63 | background-color: #ffffff; 64 | } 65 | a:hover { 66 | color: #747bff; 67 | } 68 | button { 69 | background-color: #f9f9f9; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { PrimeReactProvider } from "primereact/api"; 4 | import Tailwind from "primereact/passthrough/tailwind"; 5 | import { twMerge } from "tailwind-merge"; 6 | import App from "./App"; 7 | // tailwind css 8 | import "./index.css"; 9 | // primreact css 10 | import "primeicons/primeicons.css"; 11 | import "./App.css"; 12 | 13 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /vite-unstyled-tailwind/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from "@tailwindcss/vite"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(), tailwindcss()] 8 | }) 9 | --------------------------------------------------------------------------------