With React Router

Setting up PrimeReact in a React Router project.

Start from our React Router 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 app/root.tsx so PrimeReact features are available across every route. Pass a theme preset such as Aura and your PrimeUI license key to enable styling:

app/root.tsx

import { Outlet } from 'react-router';
import { PrimeReactProvider } from '@primereact/core';
import Aura from '@primeuix/themes/aura';
 
const primereact = {
    theme: {
        preset: Aura
    },
    license: 'PrimeUI-Commercial-Key...'
};
 
export default function App() {
    return (
        <PrimeReactProvider {...primereact}>
            <Outlet />
        </PrimeReactProvider>
    );
}

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.