UI Components
The @payloadcms/ui package contains the React components used throughout the Payload Admin Panel. You can use these components to build Custom Components that match the surrounding Admin Panel interface and behavior.
Each component guide includes working examples for the selected version of Payload, common props, accessibility guidance, and any providers or setup the component requires.
Components
AnimateHeight
Animate a container as its content changes height.
Banner
Display contextual notices, warnings, and errors.
Button
Trigger actions with Payload's standard button styles.
Card
Present content in a clickable or navigable card.
CodeEditor
Display and edit code with Payload's Monaco-based editor.
Collapsible
Show and hide a section beneath a collapsible header.
CopyToClipboard
Copy text to the clipboard with built-in feedback.
DatePicker
Select calendar dates and times.
Dropzone
Accept files through drag, drop, and paste interactions.
ErrorPill
Show a compact validation or error indicator.
Gutter
Align content with the Admin Panel's responsive gutters.
Hamburger
Render Payload's animated menu toggle.
Link
Navigate with Payload's router-aware link.
List and Pagination Controls
Add pagination, sorting, and selection to Admin lists.
Modals and Drawers
Present focused actions and supporting content in overlays.
Motion and Loading
Communicate loading and animate layout changes.
Navigation Controls
Compose Admin menu and step navigation controls.
Pill
Display compact metadata, statuses, and actions.
PillSelector
Choose from a compact group of pill-shaped options.
Popup and PopupList
Build contextual menus and lists of actions.
ReactSelect and Select
Add select inputs styled for the Payload Admin Panel.
SearchBar
Filter content with a complete, debounced search control.
ShimmerEffect
Show a loading placeholder while content resolves.
Table
Display rows with Payload's responsive table styles.
Thumbnail
Render media thumbnails with file-type fallbacks.
TimezonePicker
Select from a configured list of timezones.
Tooltip
Provide contextual labels on hover or focus.
Upload
Extend upload-enabled Collection file workflows.
Using UI components
Inside a Payload Admin Panel Custom Component, import components from @payloadcms/ui:
Some components depend on context provided by the Admin Panel. Each guide calls out those requirements when a component cannot be rendered independently.
Was this page helpful?