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.
Actions & navigation
Trigger actions and help users move through custom Admin Panel interfaces.
Button
Trigger actions with Payload's standard button styles.
CopyToClipboard
Copy text to the clipboard with built-in feedback.
Hamburger
Render Payload's animated menu toggle.
Link
Navigate with Payload's router-aware link.
Navigation Controls
Compose Admin menu and step navigation controls.
Step Navigation
Set the Admin header breadcrumbs from a Custom View.
Inputs & selection
Collect, edit, search, and select values with Admin-styled controls.
CodeEditor
Display and edit code with Payload's Monaco-based editor.
DatePicker
Select calendar dates and times.
Field Labels and Messages
Add labels, descriptions, and validation messages to custom fields.
Text Inputs
Build custom text and textarea field controls.
Checkbox and Select Inputs
Collect boolean and option values with Payload field controls.
PillSelector
Choose from a compact group of pill-shaped options.
ReactSelect and Select
Add select inputs styled for the Payload Admin Panel.
Relationship and Upload Inputs
Select related documents and media from custom fields.
SearchBar
Filter content with a complete, debounced search control.
TimezonePicker
Select from a configured list of timezones.
Layout & structure
Arrange content and create expandable, responsive interface sections.
AnimateHeight
Animate a container as its content changes height.
Card
Present content in a clickable or navigable card.
Collapsible
Show and hide a section beneath a collapsible header.
Gutter
Align content with the Admin Panel's responsive gutters.
Feedback & status
Communicate outcomes, validation, loading states, and contextual information.
Banner
Display contextual notices, warnings, and errors.
ErrorPill
Show a compact validation or error indicator.
Motion and Loading
Communicate loading and animate layout changes.
Pill
Display compact metadata, statuses, and actions.
ShimmerEffect
Show a loading placeholder while content resolves.
Data display & lists
Present structured data, media, and collection controls.
Icons
Use Payload's interface icons in custom Admin Panel UI.
List and Pagination Controls
Add pagination, sorting, and selection to Admin lists.
Table
Display rows with Payload's responsive table styles.
Table Cells
Render field values and build purpose-specific table cells.
Thumbnail
Render media thumbnails with file-type fallbacks.
Interaction & overlays
Build reorderable interfaces and contextual layers for focused interactions.
Draggable Sortable
Reorder custom interface content with pointer and keyboard controls.
Modals and Drawers
Present focused actions and supporting content in overlays.
Popup and PopupList
Build contextual menus and lists of actions.
Tooltip
Provide contextual labels on hover or focus.
Documents & uploads
Extend document editing and upload-enabled Collection workflows.
Document Actions
Save, publish, and perform bulk operations with Admin-aware controls.
Document State
Handle document locks, takeovers, and unsaved changes.
Dropzone
Accept files through drag, drop, and paste interactions.
Upload
Extend upload-enabled Collection file workflows.
Upload Helpers
Display file details, generated sizes, and image adjustments.
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?