Simplify your stack and build anything. Or everything.
Schedule a Demo
USE CASES
Headless CMSEnterprise App BuilderHeadless E-CommerceDigital Asset Management
FEATURES
Multi-TenancyWhite LabelLocalizationAccess ControlAuth
CASE STUDIES

See what others are building with Payload.

Browse Case Studies
Build tomorrow’s web with a modern solution you truly own.
PAYLOAD IS FOR
DevelopersMarketing teamsEnterprise companiesAgencies & Consultancies
COMPARE PAYLOAD
Payload vs WordPressPayload vs ContentfulPayload vs SanityPayload vs StrapiPayload vs Directus
AGENCY TESTIMONIAL

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Become a PartnerFind a Partner
Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHubReleasesBlogGuides & Tutorials
Community
RoadmapDiscordCommunity Help
Resources for Developers

Get the resources you need to start building today

Guides & TutorialsExplore Docs
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOAI Auto-EmbeddingPublishing WorkflowsVisual EditorStatic A/B testingAI features
Customer Stories
MicrosoftASICSBlue OriginHello BelloTekton
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case studyBrowse all
LoginGet Started

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 a title with optional actions or full-surface interaction.

Collapsible

Show and hide a section beneath a collapsible header.

CopyToClipboard

Copy text to the clipboard with built-in feedback.

DatePicker

Select dates and times with Payload's styled calendar control.

ErrorPill

Display a compact, localized validation error count.

Gutter

Align content with the Admin Panel's responsive gutters.

Link

Navigate between Admin routes through Payload's router adapter.

List and Pagination Controls

Navigate paginated data and compose common Admin list controls.

Motion and Loading

Communicate loading and route transitions with Payload's motion helpers.

Pill

Display compact metadata, categories, and statuses.

PillSelector

Select, deselect, and optionally reorder compact options.

ReactSelect

Select one or more options with Payload's react-select adapter.

ShimmerEffect

Show a loading placeholder while content resolves.

Using UI components

Inside a Payload Admin Panel Custom Component, import components from @payloadcms/ui:

1
'use client'
2
3
import { Button } from '@payloadcms/ui'
4
5
export function SaveButton() {
6
return <Button>Save changes</Button>
7
}

Some components depend on context provided by the Admin Panel. Each guide calls out those requirements when a component cannot be rendered independently.

Customizing components

The Design tab in each component example provides CSS you can use as a starting point. Add those overrides to the stylesheet loaded by your Admin Panel.

1
/* app/(payload)/custom.css */
2
@layer payload {
3
.btn--style-primary {
4
--color-bg-brand: #6d5dfc;
5
}
6
}

Both frameworks use the same Payload selectors and design tokens. Only the stylesheet entry point differs.

Was this page helpful?

Next

AnimateHeight