Package Exports
- primereact
- primereact/accordion
- primereact/accordion/accordion.cjs.js
- primereact/accordion/accordion.esm.js
- primereact/api
- primereact/api/api.cjs.js
- primereact/api/api.esm.js
- primereact/autocomplete
- primereact/autocomplete/autocomplete.cjs.js
- primereact/autocomplete/autocomplete.esm.js
- primereact/avatar
- primereact/avatar/avatar.cjs.js
- primereact/avatar/avatar.esm.js
- primereact/avatargroup
- primereact/avatargroup/avatargroup.cjs.js
- primereact/avatargroup/avatargroup.esm.js
- primereact/badge
- primereact/badge/badge.cjs.js
- primereact/badge/badge.esm.js
- primereact/blockui
- primereact/blockui/blockui.cjs.js
- primereact/blockui/blockui.esm.js
- primereact/breadcrumb
- primereact/breadcrumb/breadcrumb.cjs.js
- primereact/breadcrumb/breadcrumb.esm.js
- primereact/button
- primereact/button/button.cjs.js
- primereact/button/button.esm.js
- primereact/calendar
- primereact/calendar/calendar.cjs.js
- primereact/calendar/calendar.esm.js
- primereact/card
- primereact/card/card.cjs.js
- primereact/card/card.esm.js
- primereact/carousel
- primereact/carousel/carousel.cjs.js
- primereact/carousel/carousel.esm.js
- primereact/cascadeselect
- primereact/cascadeselect/cascadeselect.cjs.js
- primereact/cascadeselect/cascadeselect.esm.js
- primereact/chart
- primereact/chart/chart.cjs.js
- primereact/chart/chart.esm.js
- primereact/checkbox
- primereact/checkbox/checkbox.cjs.js
- primereact/checkbox/checkbox.esm.js
- primereact/chip
- primereact/chip/chip.cjs.js
- primereact/chip/chip.esm.js
- primereact/chips
- primereact/chips/chips
- primereact/chips/chips.cjs.js
- primereact/chips/chips.esm.js
- primereact/chips/chips.js
- primereact/colorpicker
- primereact/colorpicker/colorpicker.cjs.js
- primereact/colorpicker/colorpicker.esm.js
- primereact/column
- primereact/column/column.cjs.js
- primereact/column/column.esm.js
- primereact/columngroup
- primereact/columngroup/columngroup.cjs.js
- primereact/columngroup/columngroup.esm.js
- primereact/componentbase
- primereact/componentbase/componentbase.cjs.js
- primereact/componentbase/componentbase.esm.js
- primereact/confirmdialog
- primereact/confirmdialog/confirmdialog.cjs.js
- primereact/confirmdialog/confirmdialog.esm.js
- primereact/confirmpopup
- primereact/confirmpopup/confirmpopup.cjs.js
- primereact/confirmpopup/confirmpopup.esm.js
- primereact/contextmenu
- primereact/contextmenu/contextmenu.cjs.js
- primereact/contextmenu/contextmenu.esm.js
- primereact/csstransition
- primereact/csstransition/csstransition.cjs.js
- primereact/csstransition/csstransition.esm.js
- primereact/datascroller
- primereact/datascroller/datascroller.cjs.js
- primereact/datascroller/datascroller.esm.js
- primereact/datatable
- primereact/datatable/datatable
- primereact/datatable/datatable.cjs.js
- primereact/datatable/datatable.esm.js
- primereact/datatable/datatable.js
- primereact/dataview
- primereact/dataview/dataview.cjs.js
- primereact/dataview/dataview.esm.js
- primereact/deferredcontent
- primereact/deferredcontent/deferredcontent.cjs.js
- primereact/deferredcontent/deferredcontent.esm.js
- primereact/dialog
- primereact/dialog/dialog.cjs.js
- primereact/dialog/dialog.esm.js
- primereact/divider
- primereact/divider/divider.cjs.js
- primereact/divider/divider.esm.js
- primereact/dock
- primereact/dock/dock.cjs.js
- primereact/dock/dock.esm.js
- primereact/dropdown
- primereact/dropdown/dropdown
- primereact/dropdown/dropdown.cjs.js
- primereact/dropdown/dropdown.esm.js
- primereact/dropdown/dropdown.js
- primereact/editor
- primereact/editor/editor.cjs.js
- primereact/editor/editor.esm.js
- primereact/fieldset
- primereact/fieldset/fieldset.cjs.js
- primereact/fieldset/fieldset.esm.js
- primereact/fileupload
- primereact/fileupload/fileupload
- primereact/fileupload/fileupload.cjs.js
- primereact/fileupload/fileupload.esm.js
- primereact/fileupload/fileupload.js
- primereact/galleria
- primereact/galleria/galleria.cjs.js
- primereact/galleria/galleria.esm.js
- primereact/hooks
- primereact/hooks/hooks.cjs.js
- primereact/hooks/hooks.esm.js
- primereact/iconbase
- primereact/iconbase/iconbase.cjs.js
- primereact/iconbase/iconbase.esm.js
- primereact/icons/angledoubledown
- primereact/icons/angledoubledown/index.cjs.js
- primereact/icons/angledoubledown/index.esm.js
- primereact/icons/angledoubleleft
- primereact/icons/angledoubleleft/index.cjs.js
- primereact/icons/angledoubleleft/index.esm.js
- primereact/icons/angledoubleright
- primereact/icons/angledoubleright/index.cjs.js
- primereact/icons/angledoubleright/index.esm.js
- primereact/icons/angledoubleup
- primereact/icons/angledoubleup/index.cjs.js
- primereact/icons/angledoubleup/index.esm.js
- primereact/icons/angledown
- primereact/icons/angledown/index.cjs.js
- primereact/icons/angledown/index.esm.js
- primereact/icons/angleleft
- primereact/icons/angleleft/index.cjs.js
- primereact/icons/angleleft/index.esm.js
- primereact/icons/angleright
- primereact/icons/angleright/index.cjs.js
- primereact/icons/angleright/index.esm.js
- primereact/icons/angleup
- primereact/icons/angleup/index.cjs.js
- primereact/icons/angleup/index.esm.js
- primereact/icons/arrowdown
- primereact/icons/arrowdown/index.cjs.js
- primereact/icons/arrowdown/index.esm.js
- primereact/icons/arrowup
- primereact/icons/arrowup/index.cjs.js
- primereact/icons/arrowup/index.esm.js
- primereact/icons/ban
- primereact/icons/ban/index.cjs.js
- primereact/icons/ban/index.esm.js
- primereact/icons/bars
- primereact/icons/bars/index.cjs.js
- primereact/icons/bars/index.esm.js
- primereact/icons/calendar
- primereact/icons/calendar/index.cjs.js
- primereact/icons/calendar/index.esm.js
- primereact/icons/check
- primereact/icons/check/index.cjs.js
- primereact/icons/check/index.esm.js
- primereact/icons/chevrondown
- primereact/icons/chevrondown/index.cjs.js
- primereact/icons/chevrondown/index.esm.js
- primereact/icons/chevronleft
- primereact/icons/chevronleft/index.cjs.js
- primereact/icons/chevronleft/index.esm.js
- primereact/icons/chevronright
- primereact/icons/chevronright/index.cjs.js
- primereact/icons/chevronright/index.esm.js
- primereact/icons/chevronup
- primereact/icons/chevronup/index.cjs.js
- primereact/icons/chevronup/index.esm.js
- primereact/icons/exclamationtriangle
- primereact/icons/exclamationtriangle/index.cjs.js
- primereact/icons/exclamationtriangle/index.esm.js
- primereact/icons/eye
- primereact/icons/eye/index.cjs.js
- primereact/icons/eye/index.esm.js
- primereact/icons/eyeslash
- primereact/icons/eyeslash/index.cjs.js
- primereact/icons/eyeslash/index.esm.js
- primereact/icons/filter
- primereact/icons/filter/index.cjs.js
- primereact/icons/filter/index.esm.js
- primereact/icons/filterslash
- primereact/icons/filterslash/index.cjs.js
- primereact/icons/filterslash/index.esm.js
- primereact/icons/infocircle
- primereact/icons/infocircle/index.cjs.js
- primereact/icons/infocircle/index.esm.js
- primereact/icons/minus
- primereact/icons/minus/index.cjs.js
- primereact/icons/minus/index.esm.js
- primereact/icons/pencil
- primereact/icons/pencil/index.cjs.js
- primereact/icons/pencil/index.esm.js
- primereact/icons/plus
- primereact/icons/plus/index.cjs.js
- primereact/icons/plus/index.esm.js
- primereact/icons/refresh
- primereact/icons/refresh/index.cjs.js
- primereact/icons/refresh/index.esm.js
- primereact/icons/search
- primereact/icons/search/index.cjs.js
- primereact/icons/search/index.esm.js
- primereact/icons/searchminus
- primereact/icons/searchminus/index.cjs.js
- primereact/icons/searchminus/index.esm.js
- primereact/icons/searchplus
- primereact/icons/searchplus/index.cjs.js
- primereact/icons/searchplus/index.esm.js
- primereact/icons/sortalt
- primereact/icons/sortalt/index.cjs.js
- primereact/icons/sortalt/index.esm.js
- primereact/icons/sortamountdown
- primereact/icons/sortamountdown/index.cjs.js
- primereact/icons/sortamountdown/index.esm.js
- primereact/icons/sortamountupalt
- primereact/icons/sortamountupalt/index.cjs.js
- primereact/icons/sortamountupalt/index.esm.js
- primereact/icons/spinner
- primereact/icons/spinner/index.cjs.js
- primereact/icons/spinner/index.esm.js
- primereact/icons/star
- primereact/icons/star/index.cjs.js
- primereact/icons/star/index.esm.js
- primereact/icons/starfill
- primereact/icons/starfill/index.cjs.js
- primereact/icons/starfill/index.esm.js
- primereact/icons/thlarge
- primereact/icons/thlarge/index.cjs.js
- primereact/icons/thlarge/index.esm.js
- primereact/icons/times
- primereact/icons/times/index.cjs.js
- primereact/icons/times/index.esm.js
- primereact/icons/timescircle
- primereact/icons/timescircle/index.cjs.js
- primereact/icons/timescircle/index.esm.js
- primereact/icons/trash
- primereact/icons/trash/index.cjs.js
- primereact/icons/trash/index.esm.js
- primereact/icons/undo
- primereact/icons/undo/index.cjs.js
- primereact/icons/undo/index.esm.js
- primereact/icons/upload
- primereact/icons/upload/index.cjs.js
- primereact/icons/upload/index.esm.js
- primereact/icons/windowmaximize
- primereact/icons/windowmaximize/index.cjs.js
- primereact/icons/windowmaximize/index.esm.js
- primereact/icons/windowminimize
- primereact/icons/windowminimize/index.cjs.js
- primereact/icons/windowminimize/index.esm.js
- primereact/image
- primereact/image/image.cjs.js
- primereact/image/image.esm.js
- primereact/inplace
- primereact/inplace/inplace.cjs.js
- primereact/inplace/inplace.esm.js
- primereact/inputmask
- primereact/inputmask/inputmask.cjs.js
- primereact/inputmask/inputmask.esm.js
- primereact/inputnumber
- primereact/inputnumber/inputnumber.cjs.js
- primereact/inputnumber/inputnumber.esm.js
- primereact/inputswitch
- primereact/inputswitch/inputswitch.cjs.js
- primereact/inputswitch/inputswitch.esm.js
- primereact/inputtext
- primereact/inputtext/inputtext.cjs.js
- primereact/inputtext/inputtext.esm.js
- primereact/inputtextarea
- primereact/inputtextarea/inputtextarea.cjs.js
- primereact/inputtextarea/inputtextarea.esm.js
- primereact/keyfilter
- primereact/keyfilter/keyfilter.cjs.js
- primereact/keyfilter/keyfilter.esm.js
- primereact/knob
- primereact/knob/knob.cjs.js
- primereact/knob/knob.esm.js
- primereact/listbox
- primereact/listbox/listbox.cjs.js
- primereact/listbox/listbox.esm.js
- primereact/megamenu
- primereact/megamenu/megamenu.cjs.js
- primereact/megamenu/megamenu.esm.js
- primereact/mention
- primereact/mention/mention.cjs.js
- primereact/mention/mention.esm.js
- primereact/menu
- primereact/menu/menu.cjs.js
- primereact/menu/menu.esm.js
- primereact/menubar
- primereact/menubar/menubar.cjs.js
- primereact/menubar/menubar.esm.js
- primereact/message
- primereact/message/message.cjs.js
- primereact/message/message.esm.js
- primereact/messages
- primereact/messages/messages.cjs.js
- primereact/messages/messages.esm.js
- primereact/multiselect
- primereact/multiselect/multiselect
- primereact/multiselect/multiselect.cjs.js
- primereact/multiselect/multiselect.esm.js
- primereact/multiselect/multiselect.js
- primereact/multistatecheckbox
- primereact/multistatecheckbox/multistatecheckbox.cjs.js
- primereact/multistatecheckbox/multistatecheckbox.esm.js
- primereact/orderlist
- primereact/orderlist/orderlist.cjs.js
- primereact/orderlist/orderlist.esm.js
- primereact/organizationchart
- primereact/organizationchart/organizationchart.cjs.js
- primereact/organizationchart/organizationchart.esm.js
- primereact/overlaypanel
- primereact/overlaypanel/overlaypanel.cjs.js
- primereact/overlaypanel/overlaypanel.esm.js
- primereact/overlayservice
- primereact/overlayservice/overlayservice.cjs.js
- primereact/overlayservice/overlayservice.esm.js
- primereact/paginator
- primereact/paginator/paginator.cjs.js
- primereact/paginator/paginator.esm.js
- primereact/panel
- primereact/panel/panel.cjs.js
- primereact/panel/panel.esm.js
- primereact/panelmenu
- primereact/panelmenu/panelmenu.cjs.js
- primereact/panelmenu/panelmenu.esm.js
- primereact/password
- primereact/password/password.cjs.js
- primereact/password/password.esm.js
- primereact/picklist
- primereact/picklist/picklist.cjs.js
- primereact/picklist/picklist.esm.js
- primereact/portal
- primereact/portal/portal.cjs.js
- primereact/portal/portal.esm.js
- primereact/primereact.all.esm.min.js
- primereact/primereact.all.min.js
- primereact/progressbar
- primereact/progressbar/progressbar.cjs.js
- primereact/progressbar/progressbar.esm.js
- primereact/progressspinner
- primereact/progressspinner/progressspinner.cjs.js
- primereact/progressspinner/progressspinner.esm.js
- primereact/radiobutton
- primereact/radiobutton/radiobutton.cjs.js
- primereact/radiobutton/radiobutton.esm.js
- primereact/rating
- primereact/rating/rating.cjs.js
- primereact/rating/rating.esm.js
- primereact/resources/primereact.css
- primereact/resources/primereact.min.css
- primereact/resources/themes/arya-blue/theme.css
- primereact/resources/themes/bootstrap4-dark-blue/theme.css
- primereact/resources/themes/bootstrap4-light-blue/theme.css
- primereact/resources/themes/lara-dark-blue/theme.css
- primereact/resources/themes/lara-light-blue/theme.css
- primereact/resources/themes/lara-light-indigo/theme.css
- primereact/resources/themes/md-dark-indigo/theme.css
- primereact/resources/themes/md-light-indigo/theme.css
- primereact/resources/themes/mdc-dark-indigo/theme.css
- primereact/resources/themes/mdc-light-indigo/theme.css
- primereact/resources/themes/saga-blue/theme.css
- primereact/resources/themes/tailwind-light/theme.css
- primereact/resources/themes/vela-blue/theme.css
- primereact/ripple
- primereact/ripple/ripple.cjs.js
- primereact/ripple/ripple.esm.js
- primereact/row
- primereact/row/row.cjs.js
- primereact/row/row.esm.js
- primereact/scrollpanel
- primereact/scrollpanel/scrollpanel.cjs.js
- primereact/scrollpanel/scrollpanel.esm.js
- primereact/scrolltop
- primereact/scrolltop/scrolltop.cjs.js
- primereact/scrolltop/scrolltop.esm.js
- primereact/selectbutton
- primereact/selectbutton/selectbutton.cjs.js
- primereact/selectbutton/selectbutton.esm.js
- primereact/sidebar
- primereact/sidebar/sidebar.cjs.js
- primereact/sidebar/sidebar.esm.js
- primereact/skeleton
- primereact/skeleton/skeleton.cjs.js
- primereact/skeleton/skeleton.esm.js
- primereact/slidemenu
- primereact/slidemenu/slidemenu.cjs.js
- primereact/slidemenu/slidemenu.esm.js
- primereact/slider
- primereact/slider/slider.cjs.js
- primereact/slider/slider.esm.js
- primereact/speeddial
- primereact/speeddial/speeddial.cjs.js
- primereact/speeddial/speeddial.esm.js
- primereact/splitbutton
- primereact/splitbutton/splitbutton.cjs.js
- primereact/splitbutton/splitbutton.esm.js
- primereact/splitter
- primereact/splitter/splitter.cjs.js
- primereact/splitter/splitter.esm.js
- primereact/steps
- primereact/steps/steps.cjs.js
- primereact/steps/steps.esm.js
- primereact/styleclass
- primereact/styleclass/styleclass.cjs.js
- primereact/styleclass/styleclass.esm.js
- primereact/tabmenu
- primereact/tabmenu/tabmenu.cjs.js
- primereact/tabmenu/tabmenu.esm.js
- primereact/tabview
- primereact/tabview/tabview.cjs.js
- primereact/tabview/tabview.esm.js
- primereact/tag
- primereact/tag/tag.cjs.js
- primereact/tag/tag.esm.js
- primereact/terminal
- primereact/terminal/terminal.cjs.js
- primereact/terminal/terminal.esm.js
- primereact/terminalservice
- primereact/terminalservice/terminalservice.cjs.js
- primereact/terminalservice/terminalservice.esm.js
- primereact/tieredmenu
- primereact/tieredmenu/tieredmenu.cjs.js
- primereact/tieredmenu/tieredmenu.esm.js
- primereact/timeline
- primereact/timeline/timeline.cjs.js
- primereact/timeline/timeline.esm.js
- primereact/toast
- primereact/toast/toast.cjs.js
- primereact/toast/toast.esm.js
- primereact/togglebutton
- primereact/togglebutton/togglebutton.cjs.js
- primereact/togglebutton/togglebutton.esm.js
- primereact/toolbar
- primereact/toolbar/toolbar.cjs.js
- primereact/toolbar/toolbar.esm.js
- primereact/tooltip
- primereact/tooltip/tooltip.cjs.js
- primereact/tooltip/tooltip.esm.js
- primereact/tree
- primereact/tree/tree.cjs.js
- primereact/tree/tree.esm.js
- primereact/treeselect
- primereact/treeselect/treeselect.cjs.js
- primereact/treeselect/treeselect.esm.js
- primereact/treetable
- primereact/treetable/treetable.cjs.js
- primereact/treetable/treetable.esm.js
- primereact/tristatecheckbox
- primereact/tristatecheckbox/tristatecheckbox.cjs.js
- primereact/tristatecheckbox/tristatecheckbox.esm.js
- primereact/utils
- primereact/utils/utils.cjs.js
- primereact/utils/utils.esm.js
- primereact/virtualscroller
- primereact/virtualscroller/virtualscroller.cjs.js
- primereact/virtualscroller/virtualscroller.esm.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (primereact) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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 has 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.