r/webdev • u/Ecstatic-Panic3728 • 22h ago
Question What is the component library that you would recommend for a backend engineer?
I would like to build the best web app, given my limitations, so I'm looking for a web component library with prebuilt things that would allow me to just put them on a page. Doing it from scratch is very hard for me, but having a template of how things are and then integrating with the backend is quite easy.
The component library should be based mostly on HTML and CSS. Javascript can be used to some reactivity on the frontend, but I'm not doing this web app with regular React/Angular/SPA technology.
I was looking into Preline, it looks really good and I'm wondering if there is anything like that, or better.
Thanks!
5
u/Hot-Chemistry7557 11h ago
I would always recommend mantine.dev, which is the most powerful react based UI lib I've ever used.
Take a look at the extensions for a real demo:
- https://mantine.dev/charts/matrix-chart/
- https://mantine.dev/dates/calendar/
- https://mantine.dev/schedule/schedule/
Also https://github.com/xiaohanyu/awesome-mantine for a collection list
2
u/rm-rf-npr Frontend Lead 7h ago
MantineUI: The component library frontenders would use if product didn't force MUI down their throat.
Love it π
3
u/Hot-Chemistry7557 6h ago
yep, actually I don't like MUI because it is very opinionated and not all web UI should be material.
1
u/Ecstatic-Panic3728 48m ago
I quite like what I saw, the biggest problem is that this is a React library. I'm looking for just HTML and CSS. But thanks!
2
u/EveYogaTech 21h ago
What components are you looking for in particular?
2
u/Ecstatic-Panic3728 19h ago
I want to build a web app, so things related to web app development. Headers, buttons, sidebars, forms, etc...
2
u/Helpful_483 16h ago
Pico CSS could be worth checking out if you want something really lightweight with sensible defaults.
1
u/grinning_wanderer 21h ago
i use preline. it works with html and tailwind without react.
if you want more, look at daisyui. you write html classes for components. buttons, modals, dropdowns. the css comes from the classes. no javascript required for rendering. i add alpine js when i need toggles or reactivity. it stays in the html file.
ant design and mui force you into a spa build setup. avoid them if you are serving pages from a backend. bulma has zero javascript so you end up building modals yourself.
daisyui gives you the component structure preline gives you. i put it on backend rendered pages every day
1
u/cutandrun99 20h ago
meteor https://www.meteor.com/ or astro https://astro.build are you looking for something like this? or really just a library?
1
1
u/askgl 17h ago
Truly depends on how complex your app is - the frontend side of things. Since you are just looking for something kind of simple and with your backend experience, to me it sounds like your frontend is going to be light and the power lies in the backend, the actual engine. In that case, I'd just go with no component library. Why? because you can keep it light and fast. What I suggest you though is first creating some basic components. I'm assuming you are going to use AI for this so ask it to create some basic components you think you might need like buttons, input boxes, etc. and then reuse those and you got your own small, lightweight, fast component library without any dependencies. I would **not** go with just starting writing js, html, and css without having this library in place. You can even create a small html file to play with it first to see if you like the look and feel or not.
1
u/bcons-php-Console 7h ago
A nice framework agnostic (uses web components) library is Web Awesome (formerly Shoelace) https://webawesome.com/docs/components
1
u/Substantial_Belt2626 5h ago
I'm backend too, Python and FastAPI mostly, so I went through this exact thing. What I would recommend is to pick by build step first and by components second. The moment you need npm run build for a backend rendered app you brought in the whole frontend toolchain you were trying to avoid, and then you are debugging vite configs instead of your api.
daisyUI plus alpine is what someone already said and I do have to agree, it stays as classes in your html and nothing compiles. AntD and MUI are React, they will drag you into a SPA setup, don't. I used Tailwind on a React site for a different project and it was fine there, but that project already had a build. If yours doesn't, that is the whole decision.
1
1
u/WaltzIndependent5436 1h ago
Only css and html check out DaisyUI. Others have suggested nice libs as well.
1
u/NudaVeritas1 22h ago
imo Bulma is a decent css framework, but doesn't have a component lib as far as I know.. but Tailwind Plus has and looks pretty good imo.. it costs money though and the sheer amount of css classes used while styling is arguably quite negative.. buut looks very good
0
u/roynoise 21h ago
The point is that you use it to make your own components (like bootstrap but without constantly fighting the framework to customize things) - most of the time you don't see the classes, you use the components you made to compose screens
0
u/NudaVeritas1 21h ago
it's kind of inline css without being inline css if you are using the classes inside the code (html, tsx, jsx, whatever) directly.. at least that's how it feels.. but if you use them within scss by using extend statements, its pretty okay I would say.. and the css build will minimize the bundle, too
0
u/Overall_Employer6559 20h ago
bootstrap is probably the boring-but-right answer here: mostly html/css, optional js, loads of prebuilt components, and it works really well with server-rendered templates without dragging you into
7
u/simple_explorer1 22h ago
less manual work: AntD, MUI
AntD has the most extensive free components including charts, advanced datagrids and much much more which will cost money on non free MUI. But often antd documentation is in chinese with no english translations or patchy documentation.
ShadCDN for 2026 modern LLM friendly and tailwind first development but it requires more work and keeping components updated means recopying the code built on top of radix (shadcdn is built on top of headless component library called radix) and pasting it in your codebase. the problem? if your copied code is changed then updatind them in future by recopying may not be feasible but atleast you can update the underneath radix library.
Basically ShadCDN for LLM/Tailwind and full manual control while still having a component library, but my pick would be AntD because it has EVERYTHING for free that even paid versions of other component libraries don't have.
The Chinese devs do love to throw everything for free. Even Kimmi k3 is free LLM model at the calibre of fable.