JSPM

  • Created
  • Published
  • Downloads 202283
  • Score
    100M100P100Q175435F
  • License MIT

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 PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.

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

License: MIT npm version primereact Actions CI Discord Chat Stackoverflow Prime Discussions

PrimeReact Hero

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.

Contributors