├── .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 |
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 |
24 |
25 | setCount((count) => count + 1)}>
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 |
setCount(count + 1)}>
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 | editProduct(rowData)} />
188 | confirmDeleteProduct(rowData)} />
189 |
190 | );
191 | }
192 |
193 | const header = (
194 |
195 |
196 |
197 | setGlobalFilter(e.target.value)} placeholder="Search..." className="w-full lg:w-auto" />
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 | );
206 | const productDialogFooter = (
207 |
208 |
209 |
210 |
211 | );
212 |
213 | const deleteProductDialogFooter = (
214 |
215 |
216 |
217 |
218 | );
219 |
220 | const deleteProductsDialogFooter = (
221 |
222 |
223 |
224 |
225 | );
226 |
227 | return (
228 |
229 |
230 |
231 |
PrimeReact CRUD
232 |
233 |
setSelectedProducts(e.value)}
234 | dataKey="id" paginator rows={10} rowsPerPageOptions={[5, 10, 25]}
235 | paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
236 | currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
237 | globalFilter={globalFilter} header={header} responsiveLayout="scroll">
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
294 |
295 |
301 |
302 |
308 |
309 | );
310 | }
311 |
312 |
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/data/products.json:
--------------------------------------------------------------------------------
1 | {
2 | "data": [
3 | {
4 | "id": "1000",
5 | "code": "f230fh0g3",
6 | "name": "Bamboo Watch",
7 | "description": "Product Description",
8 | "image": "bamboo-watch.jpg",
9 | "price": 65,
10 | "category": "Accessories",
11 | "quantity": 24,
12 | "inventoryStatus": "INSTOCK",
13 | "rating": 5
14 | },
15 | {
16 | "id": "1001",
17 | "code": "nvklal433",
18 | "name": "Black Watch",
19 | "description": "Product Description",
20 | "image": "black-watch.jpg",
21 | "price": 72,
22 | "category": "Accessories",
23 | "quantity": 61,
24 | "inventoryStatus": "INSTOCK",
25 | "rating": 4
26 | },
27 | {
28 | "id": "1002",
29 | "code": "zz21cz3c1",
30 | "name": "Blue Band",
31 | "description": "Product Description",
32 | "image": "blue-band.jpg",
33 | "price": 79,
34 | "category": "Fitness",
35 | "quantity": 2,
36 | "inventoryStatus": "LOWSTOCK",
37 | "rating": 3
38 | },
39 | {
40 | "id": "1003",
41 | "code": "244wgerg2",
42 | "name": "Blue T-Shirt",
43 | "description": "Product Description",
44 | "image": "blue-t-shirt.jpg",
45 | "price": 29,
46 | "category": "Clothing",
47 | "quantity": 25,
48 | "inventoryStatus": "INSTOCK",
49 | "rating": 5
50 | },
51 | {
52 | "id": "1004",
53 | "code": "h456wer53",
54 | "name": "Bracelet",
55 | "description": "Product Description",
56 | "image": "bracelet.jpg",
57 | "price": 15,
58 | "category": "Accessories",
59 | "quantity": 73,
60 | "inventoryStatus": "INSTOCK",
61 | "rating": 4
62 | },
63 | {
64 | "id": "1005",
65 | "code": "av2231fwg",
66 | "name": "Brown Purse",
67 | "description": "Product Description",
68 | "image": "brown-purse.jpg",
69 | "price": 120,
70 | "category": "Accessories",
71 | "quantity": 0,
72 | "inventoryStatus": "OUTOFSTOCK",
73 | "rating": 4
74 | },
75 | {
76 | "id": "1006",
77 | "code": "bib36pfvm",
78 | "name": "Chakra Bracelet",
79 | "description": "Product Description",
80 | "image": "chakra-bracelet.jpg",
81 | "price": 32,
82 | "category": "Accessories",
83 | "quantity": 5,
84 | "inventoryStatus": "LOWSTOCK",
85 | "rating": 3
86 | },
87 | {
88 | "id": "1007",
89 | "code": "mbvjkgip5",
90 | "name": "Galaxy Earrings",
91 | "description": "Product Description",
92 | "image": "galaxy-earrings.jpg",
93 | "price": 34,
94 | "category": "Accessories",
95 | "quantity": 23,
96 | "inventoryStatus": "INSTOCK",
97 | "rating": 5
98 | },
99 | {
100 | "id": "1008",
101 | "code": "vbb124btr",
102 | "name": "Game Controller",
103 | "description": "Product Description",
104 | "image": "game-controller.jpg",
105 | "price": 99,
106 | "category": "Electronics",
107 | "quantity": 2,
108 | "inventoryStatus": "LOWSTOCK",
109 | "rating": 4
110 | },
111 | {
112 | "id": "1009",
113 | "code": "cm230f032",
114 | "name": "Gaming Set",
115 | "description": "Product Description",
116 | "image": "gaming-set.jpg",
117 | "price": 299,
118 | "category": "Electronics",
119 | "quantity": 63,
120 | "inventoryStatus": "INSTOCK",
121 | "rating": 3
122 | },
123 | {
124 | "id": "1010",
125 | "code": "plb34234v",
126 | "name": "Gold Phone Case",
127 | "description": "Product Description",
128 | "image": "gold-phone-case.jpg",
129 | "price": 24,
130 | "category": "Accessories",
131 | "quantity": 0,
132 | "inventoryStatus": "OUTOFSTOCK",
133 | "rating": 4
134 | },
135 | {
136 | "id": "1011",
137 | "code": "4920nnc2d",
138 | "name": "Green Earbuds",
139 | "description": "Product Description",
140 | "image": "green-earbuds.jpg",
141 | "price": 89,
142 | "category": "Electronics",
143 | "quantity": 23,
144 | "inventoryStatus": "INSTOCK",
145 | "rating": 4
146 | },
147 | {
148 | "id": "1012",
149 | "code": "250vm23cc",
150 | "name": "Green T-Shirt",
151 | "description": "Product Description",
152 | "image": "green-t-shirt.jpg",
153 | "price": 49,
154 | "category": "Clothing",
155 | "quantity": 74,
156 | "inventoryStatus": "INSTOCK",
157 | "rating": 5
158 | },
159 | {
160 | "id": "1013",
161 | "code": "fldsmn31b",
162 | "name": "Grey T-Shirt",
163 | "description": "Product Description",
164 | "image": "grey-t-shirt.jpg",
165 | "price": 48,
166 | "category": "Clothing",
167 | "quantity": 0,
168 | "inventoryStatus": "OUTOFSTOCK",
169 | "rating": 3
170 | },
171 | {
172 | "id": "1014",
173 | "code": "waas1x2as",
174 | "name": "Headphones",
175 | "description": "Product Description",
176 | "image": "headphones.jpg",
177 | "price": 175,
178 | "category": "Electronics",
179 | "quantity": 8,
180 | "inventoryStatus": "LOWSTOCK",
181 | "rating": 5
182 | },
183 | {
184 | "id": "1015",
185 | "code": "vb34btbg5",
186 | "name": "Light Green T-Shirt",
187 | "description": "Product Description",
188 | "image": "light-green-t-shirt.jpg",
189 | "price": 49,
190 | "category": "Clothing",
191 | "quantity": 34,
192 | "inventoryStatus": "INSTOCK",
193 | "rating": 4
194 | },
195 | {
196 | "id": "1016",
197 | "code": "k8l6j58jl",
198 | "name": "Lime Band",
199 | "description": "Product Description",
200 | "image": "lime-band.jpg",
201 | "price": 79,
202 | "category": "Fitness",
203 | "quantity": 12,
204 | "inventoryStatus": "INSTOCK",
205 | "rating": 3
206 | },
207 | {
208 | "id": "1017",
209 | "code": "v435nn85n",
210 | "name": "Mini Speakers",
211 | "description": "Product Description",
212 | "image": "mini-speakers.jpg",
213 | "price": 85,
214 | "category": "Clothing",
215 | "quantity": 42,
216 | "inventoryStatus": "INSTOCK",
217 | "rating": 4
218 | },
219 | {
220 | "id": "1018",
221 | "code": "09zx9c0zc",
222 | "name": "Painted Phone Case",
223 | "description": "Product Description",
224 | "image": "painted-phone-case.jpg",
225 | "price": 56,
226 | "category": "Accessories",
227 | "quantity": 41,
228 | "inventoryStatus": "INSTOCK",
229 | "rating": 5
230 | },
231 | {
232 | "id": "1019",
233 | "code": "mnb5mb2m5",
234 | "name": "Pink Band",
235 | "description": "Product Description",
236 | "image": "pink-band.jpg",
237 | "price": 79,
238 | "category": "Fitness",
239 | "quantity": 63,
240 | "inventoryStatus": "INSTOCK",
241 | "rating": 4
242 | },
243 | {
244 | "id": "1020",
245 | "code": "r23fwf2w3",
246 | "name": "Pink Purse",
247 | "description": "Product Description",
248 | "image": "pink-purse.jpg",
249 | "price": 110,
250 | "category": "Accessories",
251 | "quantity": 0,
252 | "inventoryStatus": "OUTOFSTOCK",
253 | "rating": 4
254 | },
255 | {
256 | "id": "1021",
257 | "code": "pxpzczo23",
258 | "name": "Purple Band",
259 | "description": "Product Description",
260 | "image": "purple-band.jpg",
261 | "price": 79,
262 | "category": "Fitness",
263 | "quantity": 6,
264 | "inventoryStatus": "LOWSTOCK",
265 | "rating": 3
266 | },
267 | {
268 | "id": "1022",
269 | "code": "2c42cb5cb",
270 | "name": "Purple Gemstone Necklace",
271 | "description": "Product Description",
272 | "image": "purple-gemstone-necklace.jpg",
273 | "price": 45,
274 | "category": "Accessories",
275 | "quantity": 62,
276 | "inventoryStatus": "INSTOCK",
277 | "rating": 4
278 | },
279 | {
280 | "id": "1023",
281 | "code": "5k43kkk23",
282 | "name": "Purple T-Shirt",
283 | "description": "Product Description",
284 | "image": "purple-t-shirt.jpg",
285 | "price": 49,
286 | "category": "Clothing",
287 | "quantity": 2,
288 | "inventoryStatus": "LOWSTOCK",
289 | "rating": 5
290 | },
291 | {
292 | "id": "1024",
293 | "code": "lm2tny2k4",
294 | "name": "Shoes",
295 | "description": "Product Description",
296 | "image": "shoes.jpg",
297 | "price": 64,
298 | "category": "Clothing",
299 | "quantity": 0,
300 | "inventoryStatus": "INSTOCK",
301 | "rating": 4
302 | },
303 | {
304 | "id": "1025",
305 | "code": "nbm5mv45n",
306 | "name": "Sneakers",
307 | "description": "Product Description",
308 | "image": "sneakers.jpg",
309 | "price": 78,
310 | "category": "Clothing",
311 | "quantity": 52,
312 | "inventoryStatus": "INSTOCK",
313 | "rating": 4
314 | },
315 | {
316 | "id": "1026",
317 | "code": "zx23zc42c",
318 | "name": "Teal T-Shirt",
319 | "description": "Product Description",
320 | "image": "teal-t-shirt.jpg",
321 | "price": 49,
322 | "category": "Clothing",
323 | "quantity": 3,
324 | "inventoryStatus": "LOWSTOCK",
325 | "rating": 3
326 | },
327 | {
328 | "id": "1027",
329 | "code": "acvx872gc",
330 | "name": "Yellow Earbuds",
331 | "description": "Product Description",
332 | "image": "yellow-earbuds.jpg",
333 | "price": 89,
334 | "category": "Electronics",
335 | "quantity": 35,
336 | "inventoryStatus": "INSTOCK",
337 | "rating": 3
338 | },
339 | {
340 | "id": "1028",
341 | "code": "tx125ck42",
342 | "name": "Yoga Mat",
343 | "description": "Product Description",
344 | "image": "yoga-mat.jpg",
345 | "price": 20,
346 | "category": "Fitness",
347 | "quantity": 15,
348 | "inventoryStatus": "INSTOCK",
349 | "rating": 5
350 | },
351 | {
352 | "id": "1029",
353 | "code": "gwuby345v",
354 | "name": "Yoga Set",
355 | "description": "Product Description",
356 | "image": "yoga-set.jpg",
357 | "price": 20,
358 | "category": "Fitness",
359 | "quantity": 25,
360 | "inventoryStatus": "INSTOCK",
361 | "rating": 8
362 | }
363 | ]
364 | }
365 |
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/bamboo-watch.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/bamboo-watch.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/black-watch.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/black-watch.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/blue-band.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/blue-band.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/blue-t-shirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/blue-t-shirt.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/bracelet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/bracelet.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/brown-purse.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/brown-purse.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/chakra-bracelet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/chakra-bracelet.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/galaxy-earrings.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/galaxy-earrings.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/game-controller.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/game-controller.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/gaming-set.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/gaming-set.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/gold-phone-case.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/gold-phone-case.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/green-earbuds.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/green-earbuds.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/green-t-shirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/green-t-shirt.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/grey-t-shirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/grey-t-shirt.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/headphones.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/headphones.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/light-green-t-shirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/light-green-t-shirt.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/lime-band.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/lime-band.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/mini-speakers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/mini-speakers.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/painted-phone-case.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/painted-phone-case.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/pink-band.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/pink-band.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/pink-purse.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/pink-purse.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/product-placeholder.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/purple-band.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/purple-band.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/purple-gemstone-necklace.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/purple-gemstone-necklace.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/purple-t-shirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/purple-t-shirt.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/shoes.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/shoes.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/sneakers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/sneakers.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/teal-t-shirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/teal-t-shirt.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/yellow-earbuds.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/yellow-earbuds.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/yoga-mat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/yoga-mat.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/demo/images/product/yoga-set.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/demo/images/product/yoga-set.jpg
--------------------------------------------------------------------------------
/nextjs-crud/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-crud/public/favicon.ico
--------------------------------------------------------------------------------
/nextjs-crud/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 | }
18 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/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-quickstart-ts/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-quickstart-ts/app/favicon.ico
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/app/globals.css:
--------------------------------------------------------------------------------
1 |
2 | html{
3 | font-size: 14px;
4 | }
5 |
6 | body {
7 | min-height: 100vh;
8 | max-width: 100vw;
9 | color: #fff;
10 | background: radial-gradient(
11 | 135.35% 140.89% at 107.72% -60.35%,
12 | rgba(65, 184, 131, 0.4) 0%,
13 | rgba(5, 4, 31, 0) 100%
14 | ),
15 | #121116;
16 | margin: 0 auto;
17 | width: 100%;
18 | font-size: 14px;
19 | font-weight: 400;
20 | margin: 0;
21 | line-height: 1.6;
22 | font-family:
23 | Inter,
24 | -apple-system,
25 | BlinkMacSystemFont,
26 | 'Segoe UI',
27 | Roboto,
28 | Oxygen,
29 | Ubuntu,
30 | Cantarell,
31 | 'Fira Sans',
32 | 'Droid Sans',
33 | 'Helvetica Neue',
34 | sans-serif;
35 | text-rendering: optimizeLegibility;
36 | -webkit-font-smoothing: antialiased;
37 | -moz-osx-font-smoothing: grayscale;
38 | }
39 |
40 | .main-wrapper {
41 | background-image: url('/background.svg');
42 | background-repeat: no-repeat;
43 | background-attachment: fixed;
44 | background-size: contain;
45 | }
46 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "./globals.css";
2 | import type { Metadata } from "next";
3 | import { Inter } from "next/font/google";
4 | import "primereact/resources/themes/lara-light-indigo/theme.css";
5 | import "primeicons/primeicons.css";
6 |
7 | const inter = Inter({ subsets: ["latin"] });
8 |
9 | export const metadata: Metadata = {
10 | title: "PrimeReact Quickstart",
11 | description: "Generated by PrimeReact"
12 | };
13 |
14 | export default function RootLayout({
15 | children,
16 | }: {
17 | children: React.ReactNode;
18 | }) {
19 | return (
20 |
21 | {children}
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/app/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Button } from "primereact/button";
3 | import { InputText } from "primereact/inputtext";
4 | import "./style.css";
5 | export default function Home() {
6 | let starCount = 0;
7 | const maxStars = 5;
8 | let isAnimationRunning = false;
9 |
10 | const startAnimation = () => {
11 | if (isAnimationRunning) {
12 | return;
13 | }
14 |
15 | let a = document.getElementById("charging");
16 |
17 | const intervalId = setInterval(function () {
18 | if (starCount < maxStars) {
19 | (a as HTMLElement).innerHTML +=
20 | '
';
21 | starCount++;
22 | } else {
23 | clearInterval(intervalId);
24 | isAnimationRunning = false;
25 | }
26 | }, 1200);
27 |
28 | isAnimationRunning = true;
29 | };
30 | return (
31 | <>
32 |
33 |
34 |
35 |
36 |

37 |

42 |
43 |
44 |
Start your next project with powerful PrimeReact
45 |
46 | We strongly advise you to explore the
47 |
52 | PrimeReact documentation
53 |
54 | to enhance your skills.
55 |
56 |
57 |
58 |
59 |
60 |
84 |
85 |
90 |
91 |
99 |
100 |
114 |
115 |
130 |
131 |
147 |
148 |
163 |
164 |
165 |
166 |
189 |
190 | >
191 | );
192 | }
193 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/app/style.css:
--------------------------------------------------------------------------------
1 | ::selection {
2 | background-color: #03C4E8;;
3 | color: #fff;
4 | }
5 |
6 | :focus,
7 | :focus-visible {
8 | outline: none;
9 | box-shadow: 0 0 0 2px #1e2226, 0 0 0 4px #03C4E8, 0 1px 2px 0 black;
10 | }
11 |
12 | a {
13 | cursor: pointer;
14 | }
15 |
16 | .main-container {
17 | max-width: 1448px;
18 | margin: 0 auto;
19 | padding: 5.5rem 6rem 3rem;
20 | }
21 |
22 | .hero-section {
23 | display: flex;
24 | flex-direction: column;
25 | gap: 2.267rem;
26 | margin-bottom: 3.89rem;
27 | }
28 |
29 | .hero-section .logo {
30 | display: flex;
31 | align-items: center;
32 | gap: 1.25rem;
33 | }
34 |
35 | .hero-section .hero-content {
36 | display: flex;
37 | flex-direction: column;
38 | gap: 1.25rem;
39 | }
40 |
41 | .hero-section .hero-content h1 {
42 | margin: 0;
43 | font-size: 2.7rem;
44 | font-weight: 600;
45 | max-width: 34.71rem;
46 | }
47 |
48 | .hero-section .hero-content span {
49 | font-size: 1rem;
50 | }
51 |
52 | .hero-section .hero-content span > a {
53 | font-size: 1rem;
54 | opacity: 0.98;
55 | color: #03C4E8;
56 | font-weight: 700;
57 | text-decoration-line: underline;
58 | transition: opacity 0.2s;
59 | }
60 |
61 | .hero-section .hero-content span > a:hover {
62 | opacity: 0.78;
63 | }
64 |
65 | .grid-section {
66 | display: grid;
67 | grid-template-columns: 1fr 1fr 1fr;
68 | grid-template-rows: 1fr 1fr 1fr 1fr;
69 | gap: 1.714rem;
70 | position: relative;
71 | z-index: 0;
72 | }
73 |
74 | .grid-section .card {
75 | display: flex;
76 | padding: 1rem 1rem 0.443rem;
77 | flex-direction: column;
78 | align-items: center;
79 | gap: 0.616rem;
80 | border-radius: 20px;
81 | border: 1px solid rgba(255, 255, 255, 0.1);
82 | background: #1e2226;
83 | position: relative;
84 | max-width: 411px;
85 | width: 100%;
86 | }
87 |
88 | .grid-section .card::after {
89 | content: "";
90 | background: linear-gradient(
91 | -145deg,
92 | rgba(255, 255, 255, 0) 32.91%,
93 | #fff 54.61%,
94 | rgba(255, 255, 255, 0) 74.56%
95 | );
96 | border-radius: 20px;
97 | position: absolute;
98 | top: -2px;
99 | width: calc(100% + 4px);
100 | height: calc(100% + 4px);
101 | left: -2px;
102 | bottom: 1px;
103 | right: -1px;
104 | z-index: -1;
105 | transition: all linear 1s;
106 | background-position: 450.667px -90px;
107 | background-repeat: no-repeat;
108 | opacity: 0.4;
109 | }
110 |
111 | .grid-section .card:hover::after {
112 | background-position: -450.667px 80px;
113 | }
114 |
115 | .grid-section .card img {
116 | width: 100%;
117 | }
118 | .charging .img {
119 | padding: 0.7rem;
120 |
121 | }
122 |
123 | .grid-section .card .card-footer-link {
124 | display: flex;
125 | width: 100%;
126 | padding: 0.857rem 1.142rem;
127 | justify-content: space-between;
128 | align-items: center;
129 | gap: 8px;
130 | border-radius: 4px;
131 | font-size: 1rem;
132 | color: #fff;
133 | backdrop-filter: blur(10px);
134 | text-decoration: none;
135 | cursor: pointer;
136 | }
137 |
138 | .grid-section .card .card-footer-link i {
139 | position: relative;
140 | right: 0;
141 | transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
142 | }
143 |
144 | .grid-section .card .card-footer-link:hover i {
145 | right: -0.3rem;
146 | }
147 |
148 | .grid-section .card.forms {
149 | grid-row: 1/3;
150 | grid-column: 1/2;
151 | }
152 |
153 | .grid-section .card.forms .form-wrapper {
154 | display: flex;
155 | width: 100%;
156 | flex-direction: column;
157 | align-items: center;
158 | justify-content: center;
159 | gap: 2.571rem;
160 | border-radius: 10px;
161 | border: 1px solid rgba(255, 255, 255, 0.1);
162 | background: rgba(255, 255, 255, 0.05);
163 | backdrop-filter: blur(10px);
164 | min-height: 16.35rem;
165 | }
166 | .deneme{
167 | max-width: 245px;
168 | width: 100%;
169 | }
170 |
171 | .grid-section .card.forms .form-wrapper .form-input-wrapper {
172 | width: 100%;
173 | }
174 |
175 | .grid-section .card.forms .form-wrapper .form-input {
176 | border: 1px solid rgba(255, 255, 255, 0.2);
177 | background: linear-gradient(
178 | 0deg,
179 | rgba(255, 255, 255, 0.03) 0%,
180 | rgba(255, 255, 255, 0.03) 100%
181 | ),
182 | #2a2d31;
183 | transition: all 0.2s;
184 | width: 100%;
185 | }
186 |
187 | .grid-section .card.forms .form-wrapper .form-input:hover {
188 | border: 1px solid #03C4E8;;
189 | }
190 |
191 | .grid-section .card.forms .form-wrapper .form-input:focus {
192 | box-shadow: 0 0 0 2px #1e2226, 0 0 0 4px #03C4E8, 0 1px 2px 0 black;
193 | }
194 |
195 | .grid-section .card.forms .form-wrapper .form-button {
196 | width: 100%;
197 | border: 1px solid #03C4E8;;
198 | background: #03C4E8;;
199 | color: #1c2127;
200 | transition: all 0.2s;
201 | }
202 |
203 | .grid-section .card.forms .form-wrapper .form-button:hover {
204 | width: 100%;
205 | border: 1px solid #03C4E8;;
206 | background: #03C4E8;;
207 | color: #1c2127;
208 | }
209 |
210 | .grid-section .card.forms .form-wrapper .form-button:focus {
211 | box-shadow: 0 0 0 2px #1e2226, 0 0 0 4px #03C4E8, 0 1px 2px 0 black;
212 | }
213 |
214 | .grid-section .card.primeland {
215 | grid-row: 1/2;
216 | grid-column: 2/3;
217 | justify-content: center;
218 | }
219 |
220 | .grid-section .card.discussions {
221 | grid-row: 2/3;
222 | grid-column: 2/3;
223 | justify-content: center;
224 | }
225 |
226 | .grid-section .card.discussions a,
227 | .card.primeland a {
228 | display: flex;
229 | justify-content: center;
230 | align-items: center;
231 | width: 100%;
232 | height: 100%;
233 | }
234 |
235 | .grid-section .card.discussions a img,
236 | .card.primeland a img {
237 | height: 32px;
238 | -webkit-mask-image: linear-gradient(
239 | 87deg,
240 | rgba(255, 255, 255, 0.7) 30%,
241 | #fff 50%,
242 | rgba(255, 255, 255, 0.7) 70%
243 | );
244 | -webkit-mask-size: 200%;
245 | }
246 |
247 | .grid-section .card.discussions a:hover img,
248 | .card.primeland a:hover img {
249 | animation: blink 2s infinite;
250 | }
251 |
252 | .grid-section .card.github {
253 | grid-row: 1/3;
254 | grid-column: 3/4;
255 | }
256 |
257 | .grid-section .card.github .github-wrapper {
258 | display: flex;
259 | align-items: center;
260 | justify-content: center;
261 | width: 100%;
262 | border-radius: 10px;
263 | padding: 2rem;
264 | border: 1px solid rgba(255, 255, 255, 0.1);
265 | background: rgba(255, 255, 255, 0.05);
266 | backdrop-filter: blur(10px);
267 | position: relative;
268 | min-height: 10px;
269 | height:100%;
270 | }
271 |
272 | .grid-section .card.github .github-wrapper .git-image {
273 | width: 174px;
274 | height: 174px;
275 | flex-shrink: 0;
276 | fill: linear-gradient(
277 | 180deg,
278 | rgba(255, 255, 255, 0.4) -234.2%,
279 | rgba(255, 255, 255, 0) 100%
280 | );
281 | mix-blend-mode: color-dodge;
282 | }
283 |
284 | .grid-section .card.github .github-wrapper .stars {
285 | position: absolute;
286 | }
287 |
288 | .grid-section .card.templates {
289 | grid-row: 3/5;
290 | grid-column: 1/2;
291 | }
292 |
293 | .grid-section .card.blocks {
294 | grid-row: 3/5;
295 | grid-column: 2/3;
296 | }
297 |
298 | .grid-section .card.primeone {
299 | grid-row: 3/5;
300 | grid-column: 3/4;
301 | }
302 |
303 | .grid-section .card.templates img,
304 | .card.primeone img,
305 | .card.blocks img {
306 | border-radius: 10px;
307 | min-height: 16.35rem;
308 | }
309 |
310 | .footer {
311 | margin-top: 6.9rem;
312 | width: 100%;
313 | position: relative;
314 | margin-bottom: 2.85rem;
315 | }
316 |
317 | .footer::before {
318 | content: "";
319 | display: block;
320 | position: absolute;
321 | height: 1px;
322 | width: 100%;
323 | top: 50%;
324 | background-color: rgba(255, 255, 255, 0.1);
325 | z-index: -1;
326 | }
327 |
328 | .footer .footer-content {
329 | display: flex;
330 | width: 100%;
331 | justify-content: space-between;
332 | align-items: center;
333 | padding: 0 6rem;
334 | max-width: 1448px;
335 | margin: 0 auto;
336 | }
337 |
338 | .footer .footer-content .license,
339 | .socials {
340 | display: flex;
341 | padding: 7.5px;
342 | align-items: center;
343 | gap: 0.857rem;
344 | border-radius: 48px;
345 | border: 1px solid rgba(255, 255, 255, 0.1);
346 | background-color: #1e2226;
347 | text-decoration: none;
348 | color: #fff;
349 | transition: color 0.3s;
350 | }
351 |
352 | .footer .footer-content .license:hover {
353 | color: #03C4E8;;
354 | }
355 |
356 | .footer .footer-content .socials a {
357 | display: flex;
358 | color: #fff;
359 | text-decoration: none;
360 | }
361 |
362 | .footer .footer-content .socials a i {
363 | transition: color 0.3s;
364 | }
365 |
366 | .footer .footer-content .socials a:hover i {
367 | color: #03C4E8;;
368 | }
369 |
370 | .footer .footer-content .footer-logo {
371 | display: flex;
372 | width: 44px;
373 | height: 44px;
374 | justify-content: center;
375 | align-items: center;
376 | gap: 8px;
377 | flex-shrink: 0;
378 | border-radius: 48px;
379 | background-color: #1e2226;
380 | border: 1px solid rgba(255, 255, 255, 0.1);
381 | transition: all 0.3s;
382 | }
383 |
384 | .footer .footer-content .footer-logo img {
385 | width: 17.711px;
386 | height: 20px;
387 | }
388 |
389 | .footer .footer-content .footer-logo:hover {
390 | background-color: #2b3035;
391 | }
392 |
393 | @media (max-width: 1200px) {
394 | .grid-section {
395 | display: grid;
396 | grid-template-columns: 1fr 1fr;
397 | grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
398 | gap: 1.714rem;
399 | position: relative;
400 | z-index: 0;
401 | }
402 |
403 | .grid-section .card.forms {
404 | grid-row: 1/3;
405 | grid-column: 1/2;
406 | }
407 |
408 | .grid-section .card.primeland {
409 | grid-row: 1/2;
410 | grid-column: 2/3;
411 | }
412 |
413 | .grid-section .card.discussions {
414 | grid-row: 2/3;
415 | grid-column: 2/3;
416 | }
417 |
418 | .grid-section .card.github {
419 | grid-row: 3/5;
420 | grid-column: 1/2;
421 | }
422 |
423 | .grid-section .card.templates {
424 | grid-row: 3/5;
425 | grid-column: 2/3;
426 | }
427 |
428 | .grid-section .card.blocks {
429 | grid-row: 5/7;
430 | grid-column: 1/2;
431 | }
432 |
433 | .grid-section .card.primeone {
434 | grid-row: 5/7;
435 | grid-column: 2/3;
436 | }
437 | }
438 |
439 | @media (max-width: 991px) {
440 | .grid-section .card.forms .form-wrapper {
441 | padding-left: 2rem;
442 | padding-right: 2rem;
443 | }
444 | }
445 |
446 | @media (max-width: 786px) {
447 | .main-container {
448 | padding-left: 4rem;
449 | padding-right: 4rem;
450 | }
451 |
452 | .grid-section {
453 | display: grid;
454 | grid-template-columns: 1fr;
455 | grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
456 | gap: 1.714rem;
457 | position: relative;
458 | z-index: 0;
459 | }
460 |
461 | .grid-section .card.forms {
462 | grid-row: 1/3;
463 | grid-column: 1;
464 | }
465 |
466 | .grid-section .card.primeland {
467 | grid-row: 3/4;
468 | grid-column: 1;
469 | }
470 |
471 | .grid-section .card.discussions {
472 | grid-row: 4/5;
473 | grid-column: 1;
474 | }
475 |
476 | .grid-section .card.github {
477 | grid-row: 5/7;
478 | grid-column: 1;
479 | }
480 |
481 | .grid-section .card.templates {
482 | grid-row: 7/9;
483 | grid-column: 1;
484 | }
485 |
486 | .grid-section .card.blocks {
487 | grid-row: 9/11;
488 | grid-column: 1;
489 | }
490 |
491 | .grid-section .card.primeone {
492 | grid-row: 11/13;
493 | grid-column: 1;
494 | }
495 |
496 | .footer {
497 | margin-top: 4rem;
498 | }
499 |
500 | .footer .footer-content {
501 | padding-left: 4rem;
502 | padding-right: 4rem;
503 | }
504 | }
505 |
506 | @media (max-width: 486px) {
507 | .main-container {
508 | padding-left: 2rem;
509 | padding-right: 2rem;
510 | }
511 |
512 | .footer .footer-content {
513 | padding-left: 2rem;
514 | padding-right: 2rem;
515 | }
516 |
517 | .footer .footer-content .license {
518 | width: 10rem;
519 | display: flex;
520 | }
521 | }
522 |
523 | @keyframes blink {
524 | 0% {
525 | -webkit-mask-position: 150%;
526 | }
527 |
528 | 100% {
529 | -webkit-mask-position: -50%;
530 | }
531 | }
532 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
6 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 |
4 | module.exports = nextConfig
5 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs-quickstart-ts",
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": "^6.0.1",
14 | "primereact": "^10.9.2",
15 | "react": "19.0.0",
16 | "react-dom": "19.0.0"
17 | },
18 | "devDependencies": {
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 | "typescript": "^5"
25 | },
26 | "overrides": {
27 | "@types/react": "19.0.10",
28 | "@types/react-dom": "19.0.4"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/public/background.svg:
--------------------------------------------------------------------------------
1 |
90 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/public/github.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/public/icon-primeract.svg:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/public/primeblocks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-quickstart-ts/public/primeblocks.png
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/public/primeone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-quickstart-ts/public/primeone.png
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/public/primetemplates.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/primefaces/primereact-examples/966509e9c5f1c1e63e99d37b859eee24c96e9f91/nextjs-quickstart-ts/public/primetemplates.png
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/public/star-fill.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/public/text-primereact.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/nextjs-quickstart-ts/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
/nextjs-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 `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-styled-tailwind/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | }
5 |
6 | module.exports = nextConfig
7 |
--------------------------------------------------------------------------------
/nextjs-styled-tailwind/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styled",
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 | "tailwindcss": "^4"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/nextjs-styled-tailwind/pages/_app.js:
--------------------------------------------------------------------------------
1 | import { PrimeReactProvider } from "primereact/api";
2 |
3 | import "../styles/globals.css";
4 | import "primereact/resources/themes/lara-light-blue/theme.css";
5 |
6 | export default function App({ Component, pageProps }) {
7 | return (
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/nextjs-styled-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-styled-tailwind/pages/index.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Button } from "primereact/button";
3 | import { InputText } from "primereact/inputtext";
4 |
5 | export default function Home() {
6 | const [count, setCount] = useState(0);
7 |
8 | return (
9 | <>
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Next.js + PrimeReact + TailwindCSS
19 |
20 |
Demo app showing PrimeReact + Tailwind CSS in unstyled mode
21 |
22 |
23 |
setCount((count) => count + 1)}>
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 |
17 |
18 |
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 |
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 | menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
70 |
71 |
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 |
setCount((count) => count + 1)}
39 | >
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 |
setCount((count) => count + 1)}>
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 |
15 |
16 |
17 |
18 |
19 |
20 | Vite + PrimeReact + TailwindCSS
21 |
22 |
Demo app showing PrimeReact + Tailwind CSS in styled mode with PrimeReact Theme!
23 |
24 |
25 |
setCount((count) => count + 1)}>
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 |
15 |
16 |
17 |
18 |
19 |
20 | Vite + PrimeReact + TailwindCSS
21 |
22 |
Demo app showing PrimeReact + Tailwind CSS in unstyled mode
23 |
24 |
25 |
setCount((count) => count + 1)}>
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 |
--------------------------------------------------------------------------------