Setting up PrimeReact in a Vite project.
Install PrimeReact and a theme package using your favorite package manager:
npm install [email protected] @primeuix/themes
Wrap your app with PrimeReactProvider in your main file (like main.tsx or App.tsx). This enables PrimeReact features everywhere in your app:
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { PrimeReactProvider } from "@primereact/core";
...
createRoot(document.getElementById('root')!).render(
<StrictMode>
<PrimeReactProvider>
<App />
</PrimeReactProvider>
</StrictMode>,
)PrimeReact supports many themes. To use the Aura theme, import it and pass it to the provider:
import Aura from '@primeuix/themes/aura';
import { PrimeReactProvider } from '@primereact/core';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const theme = {
preset: Aura
};
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<PrimeReactProvider theme={theme}>
<App />
</PrimeReactProvider>
</React.StrictMode>
);To verify that PrimeReact is installed correctly, you can create a simple component such as Button and render it in your application. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.
import { Button } from 'primereact/button';
export default function VerifyInstallation() {
return (
<div className="card flex justify-center">
<Button>Verify</Button>
</div>
);
}If you encounter issues during installation or setup, check the following:
PrimeReactProvider is properly wrapped around your application.