Installation

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

Download#

PrimeReact is available for download at npm.


// with npm
npm install primereact

// with yarn
yarn add primereact

Context#

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 (
        <PrimeReactProvider>
            <Component {...pageProps} />
        </PrimeReactProvider>
    );
}

Styles#

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.


//theme
import "primereact/resources/themes/lara-light-indigo/theme.css";     
    
//core
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);
}

Usage#

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';

Examples#

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

Videos#

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

CRA#

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

Next.js#

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