[](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.primefaces.org/primereact)
# PrimeReact
PrimeReact is a rich set of open source UI Components for React. See [PrimeReact homepage](https://www.primefaces.org/primereact) for live showcase and documentation.
## Download
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.
## Import
#### Module
```javascript
//import { ComponentName } from 'prime_react_8/{componentname}';
import { Dialog } from 'prime_react_8/dialog';
import { Accordion, AccordionTab } from 'prime_react_8/accordion';
```
#### CDN
```javascript
//
```
```javascript
const { Dialog } = primereact.dialog;
const { Accordion, AccordionTab } = primereact.accordion;
```
Import all components and structures
```javascript
```
## 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 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"
}
```
#### 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 |
## Styles
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';
```
## QuickStart
[Example applications](https://github.com/primefaces/primereact-examples) based on create-react-app and Next.js are 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](https://github.com/primefaces/primereact-examples/tree/main/cra-basic-ts) is available as well at github.
## Contributors
