Payload CMS Finally Documents Its UI Component Library
If you’ve ever built a custom component, plugin, or tailored Admin Panel experience on top of Payload CMS, you’ve likely run into the same frustration: the UI components were there, but finding them, understanding their props, and knowing how to customize them meant digging through the source code. That changes today.
On September 10, 2026, the Payload team officially announced that Payload’s UI component library is now fully documented — complete with interactive examples, code snippets, accessibility guidance, and styling details, all living directly inside the Payload Docs.
What Is @payloadcms/ui?
Payload’s Admin Panel is built from a growing library of React components exposed through the @payloadcms/ui package. These are the exact same components the Payload team uses internally — Buttons, Cards, Tables, Pills, Selects, Tooltips, Drawers, Date Pickers, and more. Developers building custom components, plugins, dashboards, or branded Admin experiences can now import and use these building blocks directly.
What’s New in the Docs
The new UI Components section in the Payload Docs includes:
- Interactive component previews — rendered directly on the docs page, with light and dark mode support
- Code examples — showing exactly how to implement each component
- Props documentation — covering common props and configuration options
- Accessibility guidance — so your custom interfaces meet accessibility standards
- Styling details — explaining how to customize the look and feel of each component
- Version-aware examples — docs update automatically when you switch between Payload versions (v3/v4)
Why This Matters for Developers
As Payload has grown beyond a traditional CMS into a full application framework, developers are increasingly using it to build internal tools, custom dashboards, and products where the Admin Panel is a core part of the user experience. Until now, the lack of documentation meant developers were often recreating components that already existed in @payloadcms/ui — wasting time and introducing inconsistencies.
“The goal is simple: you should be able to see what Payload gives you before you start building your own version of it.” — Sean Zubrickas, Payload Team
What’s Covered in This First Release
The Payload team intentionally started with the components most useful for building custom interfaces. The initial documentation covers:
- Buttons
- Cards
- Tables
- Pills
- Selects
- Tooltips
- Drawers
- Date Pickers
More components will be documented over time as the library continues to grow.
What’s Coming Next
The Payload team has confirmed a follow-up guide is in the works — focused less on what components are available and more on how to use them to build complete custom experiences inside the Payload Admin Panel.
Key Takeaway: If you’re building on top of Payload CMS, the new UI component docs are a must-bookmark. Stop reinventing the wheel — explore what @payloadcms/ui already gives you before writing a single line of custom component code.
Hashtags: #PayloadCMS #HeadlessCMS #ReactJS #NextJS #WebDevelopment #JavaScript #TypeScript #OpenSource
Resources: