Setup

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

Module Loader

PrimeReact is available at npm, if you have an existing application run the following commands to download it to your project.


// with npm
npm install primereact primeicons

// with yarn
yarn add primereact primeicons

Please note that react >= 17.0.0 and react-dom >= 17.0.0 are peer dependencies and some components have optional dependencies.

Import path is available in the documentation of the corresponding component.


// import { ComponentName } from 'primereact/{componentname}';
import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button';

Finally you'll be able to utilize the component in your application. See the Styles section to apply styling.


<Dialog visible={state} onHide={() => setState(false)}>
    // content
</Dialog>

<Button label="Show" onClick={() => setState(true)} />

Watch the video tutorial that goes through these steps.

Script Tag

Other alternative is utilizing the components directly within the browser with the iife build. Note that PrimeReact does not provide a umd build. The core.min.js is required. It includes shared components and structures; utils, api, ripple, portal, keyfilter, tooltip, virtualscroller, terminalservice, overlayservice, checkbox, button, inputtext, inputnumber, messages, progressbar, dropdown, dialog, paginator and tree.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>SliderDemo</title>

    <!-- PrimeReact -->
    <link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-light-indigo/theme.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/primeflex.min.css" />

    <!-- Dependencies -->
    <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-transition-group.js"></script>

    <!-- Demo -->
    <script src="https://unpkg.com/primereact/core/core.min.js"></script>
    <script src="https://unpkg.com/primereact/slider/slider.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">

        const { useEffect, useState } = React;
        const { Slider } = primereact.slider;

        const SliderDemo = () => {
            const [value, setValue] = useState(null);

            return (
                <div className="slider-demo">
                    <div className="card">
                        <h5>Basic: {value}</h5>
                        <Slider value={value} onChange={(e) => setValue(e.value)} />
                    </div>
                </div>
            );
        }

        const rootElement = document.getElementById("root");
        ReactDOM.render(<SliderDemo />, rootElement);

    </script>
</body>
</html>

Import all components and structures


<script src="https://unpkg.com/primereact/primereact.all.min.js"></script>

Styles

The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you may import them to your main application component.


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

Free Themes

PrimeReact ships with various free themes to choose from.


primereact/resources/themes/bootstrap4-light-blue/theme.css
primereact/resources/themes/bootstrap4-light-purple/theme.css
primereact/resources/themes/bootstrap4-dark-blue/theme.css
primereact/resources/themes/bootstrap4-dark-purple/theme.css
primereact/resources/themes/md-light-indigo/theme.css
primereact/resources/themes/md-light-deeppurple/theme.css
primereact/resources/themes/md-dark-indigo/theme.css
primereact/resources/themes/md-dark-deeppurple/theme.css
primereact/resources/themes/mdc-light-indigo/theme.css
primereact/resources/themes/mdc-light-deeppurple/theme.css
primereact/resources/themes/mdc-dark-indigo/theme.css
primereact/resources/themes/mdc-dark-deeppurple/theme.css
primereact/resources/themes/tailwind-light/theme.css
primereact/resources/themes/fluent-light/theme.css
primereact/resources/themes/lara-light-blue/theme.css
primereact/resources/themes/lara-light-indigo/theme.css
primereact/resources/themes/lara-light-purple/theme.css
primereact/resources/themes/lara-light-teal/theme.css
primereact/resources/themes/lara-dark-blue/theme.css
primereact/resources/themes/lara-dark-indigo/theme.css
primereact/resources/themes/lara-dark-purple/theme.css
primereact/resources/themes/lara-dark-teal/theme.css
primereact/resources/themes/saga-blue/theme.css
primereact/resources/themes/saga-green/theme.css
primereact/resources/themes/saga-orange/theme.css
primereact/resources/themes/saga-purple/theme.css
primereact/resources/themes/vela-blue/theme.css
primereact/resources/themes/vela-green/theme.css
primereact/resources/themes/vela-orange/theme.css
primereact/resources/themes/vela-purple/theme.css
primereact/resources/themes/arya-blue/theme.css
primereact/resources/themes/arya-green/theme.css
primereact/resources/themes/arya-orange/theme.css
primereact/resources/themes/arya-purple/theme.css
primereact/resources/themes/nova/theme.css
primereact/resources/themes/nova-alt/theme.css
primereact/resources/themes/nova-accent/theme.css
primereact/resources/themes/luna-amber/theme.css
primereact/resources/themes/luna-blue/theme.css
primereact/resources/themes/luna-green/theme.css
primereact/resources/themes/luna-pink/theme.css
primereact/resources/themes/rhea/theme.css

PrimeFlex

PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the PrimeFlex section for the installation.

Configuration

Dependencies

Majority of PrimeReact components (95%) are native and there are some exceptions having 3rd party dependencies such as Google Maps for GMap.

In addition, components require PrimeIcons library for icons and react-transition-group for animations. The react-transition-group is available as dependencies in the npm package of PrimeReact.


dependencies: {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
    "primeicons": "^5.0.0 || ^6.0.0"
}

Optional

Here is the list of components with 3rd party dependencies.

Component	Dependency
Charts	Charts.js 3.x
GMap	Google Maps
Editor	Quill.js
DataView	PrimeFlex

* Deprecated

Ripple

Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. App.js) using the PrimeReact variable.


import PrimeReact from 'primereact/api';

PrimeReact.ripple = true;

Outlined vs Filled Input Styles

Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color to the field. Applying p-input-filled to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to 'filled' at PrimeReact configuration as well.


import PrimeReact from 'primereact/api';

PrimeReact.inputStyle = 'filled';

ZIndex Layering

ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeReact configuration offers the zIndex property to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeReact.


import PrimeReact from 'primereact/api';

PrimeReact.zIndex = {
    modal: 1100,    // dialog, sidebar
    overlay: 1000,  // dropdown, overlaypanel
    menu: 1000,     // overlay menus
    tooltip: 1100   // tooltip
    toast: 1200     // toast
}

The ZIndex of all components is increased according to their groups in harmony with each other. If false, each group increments its ZIndex within itself.


import PrimeReact from 'primereact/api';

PrimeReact.autoZIndex = true;

AppendTo

On the all overlay components, the panels can be mounted into its component or DOM element instance using this option. Valid values are any DOM Element and 'self'. The self value is used to render a panel where component is located. The appendTo property of any overlay component can be used to customize it.


import PrimeReact from 'primereact/api';

PrimeReact.appendTo = 'self'; // Default value is null(document.body).

cssTransition

Used to determine whether the react-transition-group API is enabled in all overlay components.


import PrimeReact from 'primereact/api';

PrimeReact.cssTransition = false; // Default value is true.

nullSortOrder

Used to determine how NULL values are sorted. A value of 1 means sort like Excel with all NULL values at the bottom of the list. A value of -1 sorts NULL at the top of the list in ascending mode and at the bottom of the list in descending mode.


import PrimeReact from 'primereact/api';

PrimeReact.nullSortOrder = -1; // Default value is 1 for Excel like sorting.

Locale

PrimeReact provides a Locale API to support i18n and l7n, visit the Locale documentation for more information.

Browser Support

Edge	Firefox	Chrome	Safari	Opera
Last 2 versions	Last 2 versions	Last 2 versions	Last 2 versions	Last 2 versions

Samples

Quickstart

An example application based on create-react-app is available at github.

Typescript

Typescript is fully supported as type definition files are provided in the npm package of PrimeReact. A sample typescript-primereact application with create-react-app is available as at github.