With TanStack

Setting up PrimeReact in a TanStack Start project.

Start from our TanStack 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 your root route (src/routes/__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:

src/routes/__root.tsx

import { Outlet, createRootRoute } from '@tanstack/react-router';
import { PrimeReactProvider } from '@primereact/core';
import Aura from '@primeuix/themes/aura';
 
const primereact = {
    theme: {
        preset: Aura
    },
    license: 'PrimeUI-Commercial-Key...'
};
 
export const Route = createRootRoute({
    component: RootComponent
});
 
function RootComponent() {
    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.