primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
109 lines (78 loc) • 4.05 kB
Markdown
[](https://opensource.org/licenses/MIT)
[](https://badge.fury.io/js/primereact)
[](https://snyk.io/advisor/npm-package/primereact)
[](https://github.com/primefaces/primereact/actions/workflows/node.js.yml)
[](https://discord.gg/gzKFYnpmCY)
[](https://stackoverflow.com/questions/tagged/primereact)
[](https://www.primereact.org)
PrimeReact is a rich set of open source UI Components for React. See [PrimeReact homepage](https://www.primereact.org) for live showcase and documentation.
PrimeReact is available at npm, if you have an existing application run the following command 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.
```javascript
//import { ComponentName } from 'primereact/{componentname}';
import { Dialog } from 'primereact/dialog';
import { Accordion, AccordionTab } from 'primereact/accordion';
```
```javascript
<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/accordion/accordion.min.js"></script>
//<script src="https://unpkg.com/primereact/{componentname}/{componentname}.min.js"></script>
```
```javascript
const { Dialog } = primereact.dialog;
const { Accordion, AccordionTab } = primereact.accordion;
```
Import all components and structures
```javascript
<script src="https://unpkg.com/primereact/primereact.all.min.js"></script>
```
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 for icons and react-transition-group for animations. The react-transition-group is available as dependencies in the npm package of PrimeReact.
```javascript
dependencies: {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0",
"primeicons": "^5.0.0 || ^6.0.0"
}
```
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 |
The css dependencies are as follows, note that you may change the theme with another one of your choice.
```
primereact/resources/themes/lara-light-indigo/theme.css
primereact/resources/primereact.min.css
primeicons/primeicons.css
```
If you are using a bundler such as webpack with a css loader you may also import them to your main application component, an example from create-react-app would be.
```javascript
import 'primereact/resources/themes/lara-light-indigo/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
```
[](https://github.com/primefaces/primereact-examples) based on create-react-app and Next.js are available at github.
Typescript is fully supported as type definition files are provided in the npm package of PrimeReact. A sample [typescript-primereact application](https://github.com/primefaces/primereact-examples/tree/main/cra-basic-ts) is available as well at github.
<a href="https://github.com/primefaces/primereact/graphs/contributors">
<img src="https://contrib.rocks/image?repo=primefaces/primereact" />
</a>