PrimeReact is a rich set of open source UI components for React.

PrimeReact is available for download at npm.

// with npm
npm install primereact

// with yarn
yarn add primereact

Configuration is managed by the PrimeReactProvider and PrimeReactContext imported from primereact/api.

import { PrimeReactProvider, PrimeReactContext } from 'primereact/api';

The PrimeReactProvider component is used to wrap the application and the PrimeReactContext is used to access the configuration options.

// _app.js
import { PrimeReactProvider } from 'primereact/context';

export default function MyApp({ Component, pageProps }) {
    return (
            <Component {...pageProps} />

Theme and Core styles are the necessary css files of the components, visit the Themes section for the complete list of available themes to choose from. In upcoming version 10, a css-in-js approach will be implemented along with migration to SVG icons to remove the requirement to install css files.

import "primereact/resources/themes/lara-light-indigo/theme.css";     
import "primereact/resources/primereact.min.css";                                       

Each PrimeReact theme has its own font family so it is suggested to apply it to your application for a unified look.

body {
    font-family: var(--font-family);

Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.

import { Button } from 'primereact/button';                             

We've created various samples for the popular options in the React ecosystem.

Create React AppNext.JSCreate React AppViteRefine

Video tutorials to take you through step-by-step.

Create-React-App is the official scaffolding project by Facebook.

PrimeReact has first class support for SSR and Next.JS, in fact this website is also built with Next.js