RFC: Modular Dashboards

[tylandavis]

Background

For a long time now, we’ve been wanting to make our dashboard (/admin) more powerful. Right now it’s pretty barebones. Yes, you can customize the entire Dashboard component, but it would be great if we were to be able to offer more functionality out of the box without having to completely build a custom Dashboard component yourselves. For this, we’re considering a new feature called Dashboard Components.

Also, we’re working on a lot of new features right now like Folder View, which could be useful to surface in some manner within the Dashboard. Think about use cases like “recently viewed folders” or similar.

We’ve been exploring an idea where we could come up with a modular dashboard, similar to how iOS Widgets work. You can add Widgets to iOS and each widget has customization capabilities to render in different sizes, different positions, etc.

What if we could design a system like that into Payload’s dashboard? We could then ship a variety of built-in Dashboard components that you can enable / use, but you could also easily build your own and even install them via plugins.

Here’s an in-progress design:

Screen.Recording.2025-03-25.at.11.15.27.AM.mov

How it would work

Each block would have its own set of settings, which would be just Payload fields. Defaults are specified on the config. A user could configure their own Dashboard Components’ settings, which would be stored in user preferences, in the same shape that they are defined on the config.

You could enter Dashboard “edit” mode and then fine-tune the layout, but also drill into each block’s settings via a modal.

We would specify that block responsiveness should use container queries for all styles, which would then allow the blocks to size / resize accordingly based on container width, rather than by using media queries.

Payload could ship with a few built-in Dashboard components:

• Recently viewed documents
• Shortcuts / pinned docs
• Recently viewed folders
• Analytics integrations
• Ecommerce highlights / reports / etc.
• Upcoming scheduled publish events
• Failed jobs log
• Recent drafts

Possible Implementation

  admin: {
    dashboard: {
      defaults: [
        {
          name: 'myComponent',
          width: 6,
          settings: {
            appearance: 'condensed'
          }
        }
      ],
      components: [
        {
          name: 'myComponent',
          label: 'My Component',
          widths: {
            4: true,
            6: true,
            12: true,
          },
          Component: '/components/MyComponent',
          settings: [
            {
              name: 'appearance',
              type: 'select',
              options: [
                'condensed',
                'detailed'
              ] 
            },
          ]
        }
      ]
    }
  },

Open Questions

• We're thinking of a 12 column CSS grid. Any feedback on this?
• Let’s say you want to create a layout where the first row only has 6 columns used, but you want to start another row and have that row only use 4 columns (or similar). You might want to have control over which rows to place these components. The config API right now does not allow for row-based configuration. We’re thinking that things would just flow horizontally. What could we do here?
• Should components take up 100% of the available vertical space within a row?
• Should we define a more robust CSS grid pattern, or should we stick to a simpler column-based CSS grid?
• What are some examples of other dashboards that allow you to build your own layouts in a nice way? What tool does everyone like?

Conclusion

There's a lot of possibilities with this level of customization, so we would love to hear your feedback regarding the design and implementation of this feature!

[n0mad-d3v]

What an AMAZING feature and the first draft and video is so promising.
For sure, we have the requirement from ours clients and we are currently using Metabase to put dashboard in place. Metabase is directly connecting to Payload database so this would be the same.

Regarding the UI, Metabase is using a 24 x infinity grid but I'm always using ~2 width, so 12 would be perfect.

Something nice @ Metabase which might also be missing in terms of features is the possibility to filter the result of the whole dashboard based on a field (which could be a date [or a range], a store, a user, etc), not only one graph.

Thanks a lot, already excited to see that released! 🔥

[Kenji-Nguyen]

Really love your approach to make the dashboard more powerful. I've been designing dozens of dashboards and hope my feedback as a Design Engineer can help.

We're thinking of a 12 column CSS grid. Any feedback on this?
-> I just reviewed our designs. Most of the time our dashboards have configurations of
3/3/3/3
9/3
8/4
6/6
So 12 is perfect as nomad also mentioned. I could only imagine to allow some nesting for non-card elements like title, dropdowns or tab filters. I've attached a screenshot of a dashboard to highlight what I mean.

Let’s say you want to create a layout where the first row only has 6 columns used, but you want to start another row and have that row only use 4 columns (or similar). You might want to have control over which rows to place these components. The config API right now does not allow for row-based configuration. We’re thinking that things would just flow horizontally. What could we do here?
-> In our UX designs it's not so common that we leave gaps or would like to control it. I was just wondering if you would be able to configure kind of a secondary area, where we have a main area where rows are stacked and flow horizontally.

Should components take up 100% of the available vertical space within a row?
-> Mostly yes, but it could be an option. Might be not the case if you have different widgets next to each other or kind of list at the end/bottom of the dashboard

Should we define a more robust CSS grid pattern, or should we stick to a simpler column-based CSS grid?
-> As much as I like to have the flexibility, there was never a need of having more than a simple column CSS grid until now.

What are some examples of other dashboards that allow you to build your own layouts in a nice way? What tool does everyone like?
-> Filament is actually great and serves most Use Cases
-> The shadcn examples are great
❌ Grafana is a no-go example. I don't like their full flexible approach which is not needed of end-users most of time.

Thanks for your work! Looking forward. Let me know, if you need any more insights.

[bramdupont]

This is awesome!! 🚀
In a later phase, would be nice, to add the widgets to a collection list view as well. I already have a project for this!

Should components take up 100% of the available vertical space within a row?
Not always, having the option between 50% or 100% when you have huge blocks like the "Revenue statistics" and want to add a smaller next to it.

Row-based issues
You could work with spacer widgets? Or a button in the dropdown to move to the widget to the next row?
The more robust CSS grid would maybe also solve this question?

[tinotaylor]

This would be amazing! Just adds to the current modularity of Payload. Looking forward to it

[WangLarry]

Looks good.

But I think most people need that payload can build normal admin dashboard, not modular dashboard that admin content of frontend.
Data intensive, with lots of forms, tables, charts, etc.

[tylandavis]

The modules in this prototype are just hypothetical. This new feature would allow developers the ability to register whatever components they want, including the ability to let plugins insert components as well without creating conflict with other plugins.

[WangLarry]

I mean that payload can design/build dashboard, just like can build frontend. Then plugin current admin features into it.

[goodallman]

This feature would be amazing. Currently we have custom components for all of this, but this would help sooo much. Please let this be true.

[tranlehaiquan]

What are some examples of other dashboards that allow you to build your own layouts in a nice way?
For me the Datadog has a great dashboard, that allow user to:

• drag, drop
• resize the widgets
  https://www.datadoghq.com/blog/datadog-dashboards/

[swheeler7]

This is a really cool idea, super excited about this!

What are some examples of other dashboards that allow you to build your own layouts in a nice way? What tool does everyone like?

I have wanted to create a dashboard-like layout before and came across react-grid-layout. I didn't end up using it but seems like a solid package and might be worth looking into.

[swheeler7]

Another thought about this as I was thinking more about it, it might be really useful and powerful if there was an ability to define multiple dashboards. Instead of each user having their own dashboard that gets saved in user preferences maybe the dashboard configuration gets saved in a payload_dashboards collection (similar to the payload managed user preferences collection). This way different dashboards configurations could be saved/shared amongst or used for different things. Users could select a configuration as the main one for their home main /admin screen, but the other ones could be accessed by going to the dashboards collection and selecting from a list view.

I'm imagining that as dashboards get more complex this could open up the opportunity to do some really cool things and it would be helpful for these different use cases to get their own dashboard. I'm imagining a google_analytics dashboard to track website analytics, a user_activity dashboard to track user activity within the admin, and maybe a business_analytics dashboard to track sales or something.

[tylandavis]

I like this idea a lot!

[swheeler7]

One other feature that might be nice to have would be some built in UI elements to help with the layout beyond just the widgets. I currently use Apache Superset for creating dashboards and they have a couple of simple elements that you can add to the dashboard that are purely UI oriented but which unlock some useful functionality

• Header
• Textbox
• Tabs

The header/textbox would be easy to implement as a custom dashboard component but I mention the tabs because that would require some nesting of the dashboard components and might be trickier to implement as a custom dashboard component. I'm thinking something like the payload Tabs field component.

It's definitely more of a nice-to-have feature and maybe out of scope but I am super excited about this dashboard feature and I honestly think with how easy it is to extend payload already it has the potential to grow beyond just a basic JIRA style widgets dashboard and could provide the functionality of a more full-featured analytics dashboard like superset or metabase

[irinagabe]

Frappe provides exactly what your describing here. Being able to add custom components would be such a huge boost in Payload. I'm here for it.

[tan-ahmed]

looks good, 12 column CSS grid is the norm & column-based CSS grid is fine.

[GermanJablo]

1. I echo @swheeler7's observation that react-grid-layout looks like a very promising solution. It is battle tested and seems to solve almost all the "open questions" in the discussion.
2. Instead of predefined widget sizes—whether chosen at insertion (iOS/Android) or adjusted later (Windows tiles, Matomo, etc.)—I think DnD resizing to any size* provides a better experience. Widgets should be fluid and adapt responsively, as seen in react-grid-layout and some Android widgets like ChatGPT. I'd like the words "width" or "size" to not appear in either the code or the admin panel.

*By "any size" I mean within the discrete spaces of the grid.

[xndyz]

This would be incredible. Current Payload dashboard has poor UX.

[busbyk]

This would be an awesome feature!

The part of this that really jumps out at me is the ability to modify the Dashboard component without having to completely replace it. Is there any effort going into making this type of granular customization more possible throughout other parts of Payload too?

For example, I would love to use a custom title component in the Document View but right now I would need to replace the entire Document View.

Not exactly what this RFC is getting at but you mentioned that as part of the value prop here related to the dashboard so just calling out that I would love to see that in other views too!