# PrimeReact — Feature-Complete React UI Component Suite

> A rich set of 90+ open-source React UI components including data tables, charts, editors, and form controls with built-in themes and accessibility.

## Install

Save as a script file and run:

# PrimeReact — Feature-Complete React UI Component Suite

## Quick Use
```bash
npm install primereact primeicons
```
```jsx
import { PrimeReactProvider } from 'primereact/api';
import { Button } from 'primereact/button';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import 'primereact/resources/themes/lara-light-indigo/theme.css';

export default function App() {
  const data = [{ name: 'Item 1', price: 10 }, { name: 'Item 2', price: 20 }];
  return (
    <PrimeReactProvider>
      <Button label="Click" icon="pi pi-check" />
      <DataTable value={data}>
        <Column field="name" header="Name" />
        <Column field="price" header="Price" />
      </DataTable>
    </PrimeReactProvider>
  );
}
```

## Introduction
PrimeReact is part of the PrimeTek ecosystem, offering 90+ UI components for React applications. It provides enterprise-grade widgets like advanced data tables, tree views, charts, and rich text editors that go beyond basic component libraries. PrimeReact is used by organizations that need comprehensive, out-of-the-box component coverage.

## What PrimeReact Does
- Ships 90+ components covering data display, forms, overlays, menus, charts, and media
- Provides an advanced DataTable with virtual scrolling, column resizing, row grouping, and editing
- Includes theme designer and 30+ built-in themes with CSS variable customization
- Offers an icon library (PrimeIcons) with 250+ icons
- Supports unstyled mode for headless usage with custom or Tailwind styling

## Architecture Overview
PrimeReact components are built as standard React components with TypeScript definitions. Each component manages its own state and accepts controlled props for integration with form libraries. The styling layer is decoupled via a theme engine: components reference design tokens, and themes map tokens to CSS values. The unstyled mode strips all default CSS, exposing a pass-through (pt) API for injecting custom classes on every DOM element.

## Self-Hosting & Configuration
- Install primereact and import a theme CSS file for styled mode
- Wrap your app with PrimeReactProvider for global configuration
- Choose from 30+ pre-built themes or create custom themes with the theme designer
- Enable unstyled mode to use PrimeReact headlessly with Tailwind or custom CSS
- Compatible with Next.js, Vite, Create React App, and Remix

## Key Features
- Enterprise DataTable with lazy loading, virtual scroll, and inline cell editing
- Unstyled/headless mode with pass-through API for full styling control
- Built-in chart components powered by Chart.js
- Accessibility compliant with WCAG 2.1 and comprehensive keyboard navigation
- Tailwind CSS integration with pre-built presets for every component

## Comparison with Similar Tools
- **Material UI (MUI)** — fewer components out of the box; PrimeReact has richer data-heavy widgets like TreeTable and Schedule
- **Ant Design** — similar breadth but tightly coupled to its design language; PrimeReact offers more theme flexibility
- **Chakra UI** — focuses on composability; PrimeReact provides more pre-built complex widgets
- **shadcn/ui** — copy-paste headless components; PrimeReact is a traditional installable library with more components
- **AG Grid** — specialized data grid; PrimeReact offers a complete UI suite beyond just tables

## FAQ
**Q: Is PrimeReact free?**
A: Yes, PrimeReact is MIT licensed. Premium templates and the visual theme designer are paid separately.

**Q: Can I use PrimeReact without any default styling?**
A: Yes, unstyled mode removes all CSS. Use the pass-through (pt) API to apply Tailwind classes or custom styles to every element.

**Q: Does PrimeReact support server-side rendering?**
A: Yes, PrimeReact works with Next.js SSR. Interactive components hydrate on the client.

**Q: How does PrimeReact compare to PrimeVue and PrimeNG?**
A: They are sibling libraries for Vue and Angular respectively, sharing the same design tokens and component APIs.

## Sources
- https://github.com/primefaces/primereact
- https://primereact.org

---
Source: https://tokrepo.com/en/workflows/asset-e6e108f7
Author: Script Depot