primereact

What is primereact?

PrimeReact is a comprehensive collection of rich UI components for React. It provides a wide range of components that are designed to be highly customizable and easy to use, making it suitable for building modern, responsive web applications.

What are primereact's main functionalities?

DataTable

The DataTable component is used to display data in a tabular format. It supports features like sorting, filtering, and pagination.

import React from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

const MyDataTable = () => {
  const data = [
    { id: 1, name: 'John', age: 30 },
    { id: 2, name: 'Jane', age: 25 }
  ];

  return (
    <DataTable value={data}>
      <Column field="id" header="ID" />
      <Column field="name" header="Name" />
      <Column field="age" header="Age" />
    </DataTable>
  );
};

export default MyDataTable;

Dialog

The Dialog component is used to display content in a modal window. It can be customized with headers, footers, and various other options.

import React, { useState } from 'react';
import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button';

const MyDialog = () => {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
      <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
        <p>Content</p>
      </Dialog>
    </div>
  );
};

export default MyDialog;

Chart

The Chart component is used to create various types of charts, such as bar, line, and pie charts. It is built on top of the popular Chart.js library.

import React from 'react';
import { Chart } from 'primereact/chart';

const MyChart = () => {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: '#42A5F5',
        borderColor: '#1E88E5',
        data: [65, 59, 80, 81, 56]
      }
    ]
  };

  return <Chart type="bar" data={data} />;
};

export default MyChart;

Other packages similar to primereact

material-ui

Material-UI is a popular React UI framework that implements Google's Material Design. It offers a wide range of components and customization options. Compared to PrimeReact, Material-UI has a more modern design aesthetic and is widely adopted in the React community.

ant-design

Ant Design is a comprehensive UI framework for React that provides a large set of high-quality components. It is known for its robust design system and extensive documentation. Ant Design is similar to PrimeReact in terms of the breadth of components offered but has a different design philosophy.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a set of components that are easy to use and customize. While it offers fewer components compared to PrimeReact, it focuses on simplicity and ease of use.

README

PrimeReact

PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation.

Download

PrimeReact is available at npm.

# Using npm
npm install primereact

# Using yarn
yarn add primereact

# Using pnpm
pnpm add primereact

Import

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 { ComponentName } from 'primereact/{componentname}';
import { Button } from 'primereact/button';

export default function MyComponent() {
  return (
    <Button label="PrimeReact" />
  )
}

Theming

PrimeReact has two theming 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 the Themes section for the complete list of available themes to choose from.

// theme
import 'primereact/resources/themes/lara-light-cyan/theme.css';

Unstyled Mode

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

Contributors

Changelog

10.9.2 (2025-01-24)

Full Changelog

Fixed Bugs:

• className Prop Doesn't Apply to Button Element in ToggleButton #7630
• checkboxElement in MultiSelectPanelHeaderTemplateEvent has wrong interface #7622
• AutoComplete: Typo in the empty message pass through #7618
• MultiSelect showClear Keyboard Trap #7613
• Setting RowReorderIcon breaks drag styles #7612
• Calendar KeyBoard Accessibility Issue When Showed Two Months And Pressed the ArrowRight #7604
• Today Button not visible for maxDate #7602
• Tree: Incorrect props and types in documentation #7599
• Today Button is hidden for maxDate with value as new Date() #7598
• MultiSelect: it recognised the group options as standalone groups because of the “group“ key appearance #7595
• Calendar: year is not getting updated on Clear button #7581
• Dropdown: The selected option is not unselected from the list on clear action #7576
• ListBox: No item is displayed when virtualScrollerOptions is used #7574
• Core: Allow hideOverlaysOnDocumentScrolling to also work in dialogs #7566
• KeyFilter: Incorrect handling of dash and dot in numeric inputs #7557
• Calendar: Improve type declaration using generic types with default parameters #7555
• Calendar: onSelect is forcing date while typing #7553
• Fix #7180 Screenreader improve hidden accessible #7180
• Dropdown/MultiSelect: Add filterDelay property for debounce #7547
• Datatable: Sort with multiselect - wrong selection #7546
• DataTable: Frozen alignRight not working #7545
• How to format the selected item in Autocomplete #7522
• TreeTable using stripedRows: children rows are not striped correctly #7513
• TreeTable: Wrong data format in the docs #7504
• InputTextarea: autoResize not working when disabled #7502