DOCSEARCHbyAlgolia
Submit Docs

PrimeReact UI Component Library for React

repository·master·Indexed Apr 15, 2026

https://github.com/primefaces/primereact

PrimeReact is a comprehensive UI component library for React offering pre-built elements like DataTable, TreeTable, and Breadcrumb. It prioritizes accessibility with hidden native inputs for screen reader and keyboard support. The library includes extensive customization via the 'pt' (passthrough) property across Data, Form, Media, Menu, Button, Overlay, Panel, and Misc components. Recent versions (v10.x) introduce features such as onRemove callbacks for MultiSelect, dynamic dropdownIcon control, and improved Tailwind compatibility. Breaking changes in v10.0.0 include dropping Internet Explorer support and adopting @layer for CSS. The library also supports global locale settings for InputNumber, custom templating for TreeSelect and TreeTable, and ref methods for controlling components lik…

Tokens
95.7K
Snippets
122
Records
1K
Agent score
94%

What's inside PrimeReact

  1. Apply Accessibility Color Guidelines

    master

    When customizing colors in PrimeReact applications, adhere to the following accessibility standards to ensure usability and compliance:

    1. Contrast Ratio: Ensure a contrast ratio of at least 4.5:1 between background and foreground content to guarantee readability.
    2. Avoid Color Vibration: Do not select color combinations that create an illusion of motion (vibration) due to low visibility contrast. Choose colors carefully to prevent this effect.
    3. Dark Mode Usage: In dark design schemes, avoid highly saturated colors as they cause eye strain. Instead, prefer desaturated colors for better comfort.

    These guidelines apply to all custom styling and theming configurations within the library.

    Sources: components/doc/accessibility/colorsdoc.js

  2. Enable cell and drag selection on DataTable

    master

    Version 6.3.0 added new selection modes to DataTable:

    • cellSelection: Enables selection of individual cells.
    • dragSelection: Enables selection by dragging the mouse over cells.

    Usage:

    <DataTable
  value={data}
  cellSelection={true}
  dragSelection={true}
  onCellSelect={(e) => console.log(e)}
  onCellUnselect={(e) => console.log(e)}
/>

    These properties allow for more granular control over user interactions within the table.

    Sources: CHANGELOG_ARCHIVE.md

  3. Migrate to react-transition-group

    master

    Version 10.2.1 migrates the library to use react-transition-group for animations. This change ensures better compatibility with modern React versions and provides more robust animation handling for components like Dialog, Panel, and others that rely on transitions.

    Note: No code changes are required for end-users, but ensure your project has react-transition-group installed if you are using custom transition logic.

    npm install react-transition-group
    npm install react-transition-group

    Sources: CHANGELOG_ARCHIVE.md

  4. Install PrimeReact

    master

    Install PrimeReact using your preferred package manager. The package is available on npm.

    # Using npm
npm install primereact

# Using yarn
yarn add primereact

# Using pnpm
pnpm add primereact

    After installation, you can import components individually to optimize your bundle size.

    npm install primereact

    Sources: README.md

  5. Fix Calendar minDate with 12h format

    master

    The Calendar component may not respect the minDate property when using a 12-hour format with timeOnly=true. This was a known issue in version 10.2.0 (issue #2607). Ensure you are using a version that includes the fix, or adjust your date format configuration.

    Sources: CHANGELOG_ARCHIVE.md

  6. Fix Calendar onMonthChange typing

    master

    The onMonthChange event in the Calendar component may be marked as required incorrectly. This was a known issue in version 8.0.0 (issue #2767). Ensure you are using a version that includes the fix, or verify your calendar configuration.

    Sources: CHANGELOG_ARCHIVE.md

  7. Use the useCodeEditor Hook to Open Code Sandboxes

    master

    The useCodeEditor hook provides a unified interface to open PrimeReact demos in online code editors like CodeSandbox and StackBlitz. It is typically used in documentation or demo pages to allow users to run examples in their browser.

    Usage:

    Import the hook and call it with configuration props. It returns an object containing two functions: openCodeSandbox and openStackBlitz.

    import { useCodeEditor } from 'primereact/doc/common/codeeditor';

const DemoPage = () => {
    // Initialize the hook with optional props
    const { openCodeSandbox, openStackBlitz } = useCodeEditor({
        title: 'My PrimeReact Demo',
        description: 'A custom description for the demo',
        embedded: false // Set to true to embed the project in an iframe
    });

    return (
        <div>
            <button onClick={() => openCodeSandbox('vite')}>Open in CodeSandbox</button>
            <button onClick={() => openStackBlitz('vite')}>Open in StackBlitz</button>
        </div>
    );
};

    Props:

    • title: The project title for the sandbox (defaults to 'PrimeReact Demo').
    • description: A description string for the project.
    • embedded: If true, uses sdk.embedProject to render the editor inline; otherwise uses sdk.openProject to open in a new window.

    Parameters:

    • openCodeSandbox(sourceType, errorCallback): Opens the demo in CodeSandbox. sourceType should be 'vite'.
    • openStackBlitz(sourceType, errorCallback): Opens the demo in StackBlitz. sourceType should be 'vite'.

    Error Handling: If the sandbox parameters cannot be generated, the callback functions will invoke the provided errorCallback with an error object: { summary: 'Not Available', detail: 'That code sandbox demonstration is not available!' }.

    Sources: components/doc/common/codeeditor/index.js

  8. Configure PrimeReactProvider for Theming

    master

    The PrimeReactProvider component from primereact/api is used to configure global settings for PrimeReact components.

    For Styled Mode (Default) Simply wrap your application with PrimeReactProvider without props to use the default styled theme (e.g., Lara Light Indigo).

    import { PrimeReactProvider } from 'primereact/api';

// In your main.jsx or App.js
<PrimeReactProvider>
    <App />
</PrimeReactProvider>

    For Unstyled Mode with Tailwind Pass the unstyled option set to true and provide the pt (passthrough) configuration using the Tailwind object from primereact/passthrough/tailwind.

    import { PrimeReactProvider } from 'primereact/api';
import Tailwind from 'primereact/passthrough/tailwind';

<PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
    <App />
</PrimeReactProvider>

    This configuration enables Tailwind CSS utility classes to style PrimeReact components without overriding internal styles.

    Sources: components/doc/common/codeeditor/templates.js

  9. Fix DataTable scrollable headers sync on resize

    master

    In DataTable, scrollable headers may go out of sync when columns are resized. This was a known issue in version 10.2.0 (issue #2978). Ensure you are using a version that includes the fix, or verify that your DataTable configuration handles column resizing correctly.

    Sources: CHANGELOG_ARCHIVE.md

  10. Fix PanelMenu close/open behavior

    master

    The PanelMenu component may close and reopen when the menu is reloaded. This was a known issue in version 8.1.0 (issue #2804). Ensure you are using a version that includes the fix, or verify your panel menu configuration.

    Sources: CHANGELOG_ARCHIVE.md

  11. Fix CascadeSelect optionValue selection

    master

    The CascadeSelect component may show nothing on selection if optionValue is given. This was a known issue in version 8.1.0 (issue #2601). Ensure you are using a version that includes the fix, or verify your cascade select configuration.

    Sources: CHANGELOG_ARCHIVE.md

  12. Configure Global zIndex and appendTo

    master

    PrimeReact now supports global configuration for zIndex and appendTo via the PrimeReact API object. By default, appendTo is set to body. You can configure these globally to manage overlay stacking contexts and attachment points without setting them on every component instance.

    Sources: CHANGELOG_ARCHIVE.md