How about a LIST component ?

[dukesx]

I have been an Ant Design User for a long time and the biggest thing that has always kept me bound to it is the LIST component. Although a simple thing, but saves a heck lot of time. Now, with Mantine,, I have the same wonderful dev experience but with the lightest possible size (SPEEEED) and a damn fine, easy peasy, dark mode (Ant Design doesn't have a proper dark mode as it needs work arounds, at the cost of serving over 2 x 500kb worth of CSS Files, Light and Dark Theme LOL)

But Why?

Because, websites serve users best if the data is "vertically scrollable" and at the same time, gives more data without a compromise on responsiveness (Thanks to our mobile phones, we are accustomed to vertical scrolling) and tbh Cards don't work best in vertical scrolling. They just don't, their structure and padding ratio makes it impossible to fit enough data in one place without awkwardly sizing them.

Point to Ponder : I Wonder why Medium was the first of the few top websites to follow "list" based articles layout 🤔

A LIST component + lazy loading/virtualization examples would be an awesome addition. I just hope to see it someday here. I am very happy with the documentation and hooks and I have decided to shift all my projects to Mantine full time.

[rtivital]

Hi, thanks for feedback, I've been thinking about adding List component, but could not find the most common usecases apart from those on Ant Design website. So if you can send a couple examples where you would use this component, that would be great

[rtivital]

So List component should render just a regular list which items are separated with optional divider and margins?
While I was researching this, I thought that this is too little feature for an individual component

[dukesx]

As I said, this is a small thing but if it were that small, why would a company like Medium or anyone else bother with it ? I mean surely Card without shadow and simple gray border could do it but a simple, modern, clean LIST was the obvious choice. Trust me, when it comes to building a list component, the hardest part is the responsiveness, how would you fit a title, picture, subtitle, actions, author, together in same axis ? how should it adapt to size, what about the font size ? what about if the actions of a list increase ? You can check Ant Design's implementation for reference (Actions come below subtitle, actions like edit icon, etc)

They have made different variants, all of which come handy, especially the plain ones (without image) vs the article oriented ones + the lazy loading/pagination/virtualization ones, all are required, especially by people who build Blogs/CMS.

All of this, makes it a HUGE deal for a component, now doesn't it ? I think today the most common thing to encounter is a CMS/Blog, of any type. Even websites like HashNode, Dev.to, Envato/Themeforest Employ List Component. You know what's funny ? Although List is not material spec, at least not when Google thought of it but Material.io, THE Go to Framework of Choice when it comes to REACT, also has a List as Individual Component. Check Screenshots (2nd one is Material.io)

[dukesx]

Now I don't expect this complexity to be delivered that easily or quickly so take your time but make it the way it's meant to be. I want this ONE component to be perfect by all aspects. Make it worthwhile. LIST is a layout that we can safely assume to be utilized and integrated in enterprise platforms. A Genuine need.

[rtivital]

Alright, I'll add List component in one of 2.x minor releases, thanks for your examples

[dukesx]

Thank you

[Phosphorus-M]

Maybe add scroll snapping in the list?

[spion]

The MUI list https://mui.com/components/lists/ has some interesting features to consider too (although it's a bit more restrictive / opinionated):

• image, primary and secondary text (or content)
• optional selection and item selected state
• primary and secondary actions
• collapsible nested lists
• subheaders, sticky while scrolling

[dukesx]

Need contributors. That's all, it's taking to delay the advanced features we all wanna see in a list component.

[sharadbhat]

I just moved to Mantine after using Ant for years. It's crazy to me that this library has everything I can think of, but an Ant-like List component is missing. I hope it gets added soon.

[mikomonday]

this captures my feelings so perfectly, having to use NavLink as a workaround for now just to have something that has hover, click styling defined for me and it feels dirty. Having an easy way to render a list of data and have slots on the left and right (Like Mantine's NavLink or MUI's ListItem) is something that's pretty vital. I don't want to have to mess with css definitions to get something as simple as this to work seamlessly

[OrkhanAlikhanov]

I'm also interested in a list component. The Menu.Dropdown is kinda a list, but cannot rely on it

[msiric]

Any updates on this?

[ronnyek]

This would be nice... just to setup lists with appropriate background color, and border etc if that fits the default styles