With Astro

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 components with PrimeReactProvider so component behavior and your PrimeUI license are available — see the PrimeReactProvider snippet below (in Astro, render it as a React island).

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#

Wrap your components with PrimeReactProvider so component behavior and your PrimeUI license are available. Set darkModeSelector to the same .dark class used above:

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

Render it as an island in your .astro page with a client:* directive so it hydrates on the client:

---
import Providers from '../components/Providers';
---
 
<Providers client:load>
    <!-- render PrimeReact components here -->
</Providers>

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 into a React island and render it with a client:* directive 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>
    );
}