With Vite

Setting up PrimeReact in a Vite project.

Start from our Vite template, pre-configured with PrimeReact.

Installation#

Install Packages#

Install PrimeReact and a theme package using your favorite package manager:

npm install @primereact/ui @primeuix/themes @primeicons/react

PrimeReactProvider#

Wrap your app with PrimeReactProvider in src/main.tsx. Pass a theme preset such as Aura and your PrimeUI license key to enable styling:

src/main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { PrimeReactProvider } from '@primereact/core';
import Aura from '@primeuix/themes/aura';
import './index.css';
 
const primereact = {
    theme: {
        preset: Aura
    },
    license: 'PrimeUI-Commercial-Key...'
};
 
createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <PrimeReactProvider {...primereact}>
            <App />
        </PrimeReactProvider>
    </StrictMode>
);

Verify#

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.

verify-demo

import { Button } from '@primereact/ui/button';
 
export default function VerifyInstallation() {
    return (
        <div className="card flex justify-center">
            <Button>Verify</Button>
        </div>
    );
}

Next Steps#

Choose how you want to style your components — Styled, Tailwind, or Unstyled — then browse the components and import only what you need.