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

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

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

Theming#

PrimeReact has two theming has modes; styled or unstyled.

Styled Mode#

Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit theThemes section for the complete list of available themes to choose from.


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

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


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

Unstyled Mode#

Unstyled mode is disabled by default for all components. Using the PrimeReactContext during installation, set unstyled as true to enable it globally. Visit the Unstyled mode documentation for more information and examples.


import { PrimeReactProvider } from "primereact/api";
...
return(
    <PrimeReactProvider value={{ unstyled: true }}>
        <App />
    </PrimeReactProvider>
)

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