With Astro

Setting up PrimeReact in an Astro project.

Start from our Astro 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#

Create a React component that wraps your UI with PrimeReactProvider, a theme preset such as Aura, and your PrimeUI license key:

src/components/Providers.tsx

import { PrimeReactProvider } from '@primereact/core';
import Aura from '@primeuix/themes/aura';
import type { ReactNode } from 'react';
 
const primereact = {
    theme: {
        preset: Aura
    },
    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';
import VerifyInstallation from '../components/VerifyInstallation';
---
 
<Providers client:load>
    <VerifyInstallation client:load />
</Providers>

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.