With Next.js

Initialize#

Run init with the PrimeReact theme. This creates components.json, installs the base packages, adds the cn helper, and writes the design tokens (--p-primary-*, --p-surface-*) and the tailwindcss-primeui plugin to your global stylesheet:

Wrap with PrimeReactProvider#

Wrap your app with PrimeReactProvider so component behavior and your PrimeUI license are available everywhere — see the PrimeReactProvider snippet below.

Add Components#

Add any component by its registry URL:

Then pick your colors — see Theming.

Install Packages#

Install PrimeReact along with the icon package and the Tailwind utilities the components rely on:

Add the cn Helper#

The components rely on a cn utility to merge class names. Create lib/utils.ts and add the helper:

import { cn as _cn } from '@primeuix/utils';
import { twMerge } from 'tailwind-merge';
 
export function cn(...inputs: unknown[]) {
    return twMerge(_cn(...inputs));
}

Set up Global Styles#

Import Tailwind and the tailwindcss-primeui plugin in your global stylesheet, and register the dark variant so utilities and components respond to a .dark class:

@import 'tailwindcss';
@import 'tailwindcss-primeui';
 
@custom-variant dark (&:where(.dark, .dark *));

The PrimeReact design tokens (--p-primary-*, --p-surface-*, …) live under :root and .dark. Add them by running npx shadcn@latest add https://primereact.dev/r/theme.json, or copy them from the Theming guide.

PrimeReactProvider#

Even in Tailwind mode, wrap your app with PrimeReactProvider so component behavior and your PrimeUI license are available everywhere. Set darkModeSelector to the same .dark class used above:

'use client';
import { PrimeReactProvider } from '@primereact/core';
 
const primereact = {
    theme: {
        options: {
            darkModeSelector: '.dark'
        }
    },
    license: 'PrimeUI-Commercial-Key...'
};
 
export function PrimeProvider({ children }: { children: React.ReactNode }) {
    return <PrimeReactProvider {...primereact}>{children}</PrimeReactProvider>;
}

Then wrap your app with it in app/layout.tsx:

import { PrimeProvider } from '@/components/prime-provider';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>
                <PrimeProvider>{children}</PrimeProvider>
            </body>
        </html>
    );
}

Add Components#

You can add a component with the shadcn CLI, or add it manually. For example, to add the Button component with the CLI:

To add it manually instead, head to the Button component page and follow the install steps there.

Once added, import the component and render it to verify your setup:

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