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 primeicons

// with yarn
yarn add primereact primeicons

Styles#

Theme, core and icons 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";

//icons
import "primeicons/primeicons.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: (--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