These look beautiful, but the react requirement makes it harder for me to want to use them.
As someone whos just built terrible frontends using plain CSS + JS + HTML, what's the currently preferred method for building simple sites that look good? I'm looking for the sweet spot between:
* Gentle learning curve
* Powerful
* Looks good
I'm currently using Bootstrap because it's what was popular a decade ago the last time I built UIs, but there must have been some advancement since then
I still just use Bootstrap and vanilla JS for all my projects. I also write CSS manually to adjust and fine tune the design.
This allows me to have total control over every aspect of the project, while ensuring top notch performance.
Native web components are also a very powerful tool if you take the time to understand how they work properly.
I looked into updating my setup many times over the years, but the only advancements I feel are concrete seem to come from new native html APIs and CSS capabilities.
For everything else, the introduced convenience does not justify the huge overhead in terms of complexity, performance loss and added fragility.
I also still use Bootstrap. After adjusting it via the .scss files, it looks custom. Tailwind keeps popping up on my radar, but Bootstrap's utility classes are good enough for now.
I even exchanged the bit of Vue.js functionality with htmx.
And I use a bit of Alpine.js and vanilla JavaScript here and there, but it's very minimal.
I paid for TailwindUI and Flowbite but I actually like DaisyUI the most. They're all TailwindCSS based. The difference is that DaisyUI is more like Bootstrap in that they create complete CSS components you can apply using a single class. Flowbite could be higher quality for the money, e.g. there is a "Navbar with multi-level dropdown" that doesn't really work that well on mobile. They're also using JS for dropdowns where DaisyUI is relying on pure CSS.
I use Quasar and Vue. This is my hammer for all nails, no matter the size of the nail.
I only write amateur apps for personal use (or a small number of people), on good networks etc. So even when I need to say "hello" centered on the screen I would fire up a full app environment.
I do this because I can reuse my knowledge in all situations.
Because I am curious and like to break what I did to the despair of the users, I recently started to use Vue + Vite + TailwindCSS + DaisyUI as a replacement. Again - a single hammer for everything, nail or not nail.
As for components, I really liked the idea behind PrimeVue/PrimeReact/PrimeNG/PrimeFaces (https://www.primefaces.org/) because I'm not aware of any other attempts of creating components that actually work similarly across different frameworks/libraries and it's really good because your skills carry over pretty well if you ever find yourself exploring a slightly different stack.
I actually look forwards to the day where most of these concerns are less of an artisanal craft but rather a set of boring and well known things that just work well for quickly putting together a CRUD or whatever you need.
That said, I also explored VueRequest for handling network requests a bit more easily (https://www.attojs.org/guide/gettingStarted.html) and VueUse for stuff like LocalStorage (https://vueuse.org/guide/) and while it doesn't feel like I'm building a crappy alternative to Vuex and the complexity is reasonably manageable and the usability present, occasionally it all still feels a bit annoying to deal with - reactivity, ways to shuffle around data that I get from the back end, props, various bugs... so it's not all good, but still less complex than some of the things I've seen with React or Angular.
Thanks for pointing out Primefaces, I did not know it. It looks really good - I am just not sure about their licensing and price (I developed apps for personal use). The components look great and apparently one can also use TailwondCSS natively.
VueRequest also looks nice - I use fetch to get the data but this library avoids the boilerplate.
Thansk for these ideas - I will jump once again in something new :)
There have been plenty of suggestions here already, but here's one I prefer personally:
https://fomantic-ui.com/ (fork of Semantic-UI)
Like other CSS-Frameworks, this can be used by adding the CDN Links for CSS/JS to the Page, and then using the components/classes.
I have tried countless other frameworks, but this one really stood out to me due to the semantic class writing, like class="compact secondary button" (a smaller, secondary theme color (black by default), button)
Of course, good looks are subjective, but I like the look a lot.
I am currently supporting legacy bootstrap & jquery web app and planning to move to something modern. I am waiting for Oracle to complete migration to preact to give their framework another try. But we have shortlisted react.
I also dislike the React requirement for so many UI frameworks. Preline UI is a Tailwind CSS framework although it doesn’t work with CDN, you still need to build Tailwind. I too am looking for easy ways to build nice UIs without too much overhead.
No but 99% of the goodness is in the style and whatever React is doing is trivial usually for these kinds of component libraries. So easy to convert to vanilla JS or even sometimes possible in pure css (for example
tabbing)
Because the way React or Vue render and update things is very different from the vanilla JS approach. What if I want, let's say, tooltip contents to be bound to some state. Your JS implementation has no idea about the state. At best, you will provide a function to update tooltip contents.
You can write it in vanilla JS and then offer framework specific wrappers. A function to update the contents of a tooltip is probably to do it in vanilla JS. Then in your react wrapper you can tie this to a component property or something.
I wonder if https://shoelace.style/ is what @ch33zer is looking for? Web components often seem overlooked in this crazy dash complicated js frameworks.
> Is it accessible? Yes. It adheres to the WAI-ARIA design patterns.
I've only checked the Tab component (as one of the more complex one from accessibility perspective), but the WAI-ARIA patterns are well implemented.
However, WAI-ARIA patterns are a necessary but not a sufficient condition. E.g., the Tab component has _detectable_ issues, i.e., run Lightroom in Chrome and you will find some problems (like contrast ratio issues). Finally, a manual test is necessary, which will show things like the insufficient focus ring in the "New York" style.
Great compilation. Thanks for putting that together.
Curious what your take is on these UI libraries that "claim" they are accessible:
https://mantine.dev - "Build fully functional accessible web applications faster than ever"
https://nextui.org - "NextUI components are built on top of React Aria ensuring exceptional accessibility support as a top priority."
You can always get a first impression by checking a website with Chrome Lightroom. For Mantine, Lightroom returns a few ARIA and a lot of contrast ratio issues. NextUI is built upon React Aria, which indeed puts accessibility first. Nonetheless, NextUI includes some contrast ratio issues as well. I think that claims like "fully accessible" or "exceptional accessibility" give a false sense of security to people using those UI frameworks. Accessibility is not something a UI framework can guarantee for your app or website.
EDIT: I've added Mantine to my post. I've left out NextUI, being more of a "skin" over React Aria.
I tried it last week with the nextjs option and it doesn’t theme the components, and the automatic installation ignores the theme colors https://ui.shadcn.com/themes
Adobe has just released v1 of their own React components library focused on accessibility[0] similar to Shadcn. It gives you the ability to bring your own styles including TailwindCSS. Side note: their webpage provides really nice, fully interactive demos.
I really like the idea but I wish there were equivalents for Angular.
According to Stack Overflow developer survey[0], Angular is used by ~20% professional respondants (for comparison, React is ~43%).
Personally if I'm building a full SPA I prefer Angular over React as I find the opinionated way takes a lot of the thinking and troubleshooting away. I've worked with large React codebases and without the opinionation they quickly devolve into spaghetti code with a multitude of libraries trying to solve the same problems just in slightly different ways.
I've tried NextJS but with each release they seem to add more complexity and the niceities that attracted me there in the first place get overshadowed by bugs and continously having to refactor because "there's a new, better way of doing things".
I'm hopeful that with the recent releases of Angular (performance; standalone components; signals being some of the main ones) will help increase popularity again but it may be that Reacts popularity keeps it on a positive spiral upward.
It has been a while since I asked so I'll try again: is there anyone working on some type of frontend "framework" (for lack of a better term) that truly separates content from presentation?
My dream is to have something like headless-ui fully standardized, so that designers could create the styling for components against that structure and then have each "design system" as a simple set of CSS (or maybe SASS) packages.
I love radix & shadcn! it's super popular for side projects and young startups since the defaults take you very far, and are very easy to customize. everyone I've introduced them to loves it. It's harder to work into existing projects / design systems at larger co's, though
71 comments
[ 3.5 ms ] story [ 127 ms ] threadhttps://www.shadcn-svelte.com/
As someone whos just built terrible frontends using plain CSS + JS + HTML, what's the currently preferred method for building simple sites that look good? I'm looking for the sweet spot between:
* Gentle learning curve * Powerful * Looks good
I'm currently using Bootstrap because it's what was popular a decade ago the last time I built UIs, but there must have been some advancement since then
https://nuejs.org/
No templates yet so the "looking good" part requires CSS skills.
https://bui.js.org/
This allows me to have total control over every aspect of the project, while ensuring top notch performance.
Native web components are also a very powerful tool if you take the time to understand how they work properly.
I looked into updating my setup many times over the years, but the only advancements I feel are concrete seem to come from new native html APIs and CSS capabilities.
For everything else, the introduced convenience does not justify the huge overhead in terms of complexity, performance loss and added fragility.
I even exchanged the bit of Vue.js functionality with htmx.
And I use a bit of Alpine.js and vanilla JavaScript here and there, but it's very minimal.
https://daisyui.com/
Laravel:
- https://filamentphp.com/
- https://bladewindui.com/
Rails:
- https://zestui.com/ (Disclaimer: my project)
Alpine+Tailwind:
- https://devdojo.com/pines
- https://sailboatui.com/ (minimal alpine)
WebComponents:
- https://shoelace.style/
Others:
- https://daisyui.com/
- https://flowbite.com/
- https://preline.co/index.html
https://shadcn.rails-components.com
I only write amateur apps for personal use (or a small number of people), on good networks etc. So even when I need to say "hello" centered on the screen I would fire up a full app environment.
I do this because I can reuse my knowledge in all situations.
Because I am curious and like to break what I did to the despair of the users, I recently started to use Vue + Vite + TailwindCSS + DaisyUI as a replacement. Again - a single hammer for everything, nail or not nail.
Vue is great, especially with their Composition API (https://vuejs.org/guide/extras/composition-api-faq.html#why-...) and something like Pinia for state management, without the hassles of something like Redux: https://pinia.vuejs.org/
As for components, I really liked the idea behind PrimeVue/PrimeReact/PrimeNG/PrimeFaces (https://www.primefaces.org/) because I'm not aware of any other attempts of creating components that actually work similarly across different frameworks/libraries and it's really good because your skills carry over pretty well if you ever find yourself exploring a slightly different stack.
For what it's worth, the components also work decently (there's a whole list https://primevue.org/autocomplete/) and look okay (with various themes available, https://primevue.org/theming/), plus you can get examples (https://blocks.primevue.org/). Oh yeah, they also have their CSS utilities (a bit like Tailwind, https://primeflex.org/installation) and icons (https://primevue.org/icons).
I actually look forwards to the day where most of these concerns are less of an artisanal craft but rather a set of boring and well known things that just work well for quickly putting together a CRUD or whatever you need.
That said, I also explored VueRequest for handling network requests a bit more easily (https://www.attojs.org/guide/gettingStarted.html) and VueUse for stuff like LocalStorage (https://vueuse.org/guide/) and while it doesn't feel like I'm building a crappy alternative to Vuex and the complexity is reasonably manageable and the usability present, occasionally it all still feels a bit annoying to deal with - reactivity, ways to shuffle around data that I get from the back end, props, various bugs... so it's not all good, but still less complex than some of the things I've seen with React or Angular.
VueRequest also looks nice - I use fetch to get the data but this library avoids the boilerplate.
Thansk for these ideas - I will jump once again in something new :)
Like other CSS-Frameworks, this can be used by adding the CDN Links for CSS/JS to the Page, and then using the components/classes. I have tried countless other frameworks, but this one really stood out to me due to the semantic class writing, like class="compact secondary button" (a smaller, secondary theme color (black by default), button)
Of course, good looks are subjective, but I like the look a lot.
We do it this way and it amazing because we can use the same design across all of our apps no matter how they are built.
If a backend team wants to whip up a simple dashboard. They have components for it.
JS + HTML is more powerful than you think.
Kind of feel sorry for Radix because Shadcn gets all the hype when Radix does all the heavy lifting.
> Is it accessible? Yes. It adheres to the WAI-ARIA design patterns.
I've only checked the Tab component (as one of the more complex one from accessibility perspective), but the WAI-ARIA patterns are well implemented.
However, WAI-ARIA patterns are a necessary but not a sufficient condition. E.g., the Tab component has _detectable_ issues, i.e., run Lightroom in Chrome and you will find some problems (like contrast ratio issues). Finally, a manual test is necessary, which will show things like the insufficient focus ring in the "New York" style.
I've updated my post, where I compare different UI libraries on a subset of accessibility criteria, to include shadcn: https://darekkay.com/blog/accessible-ui-frameworks/
Curious what your take is on these UI libraries that "claim" they are accessible:
https://mantine.dev - "Build fully functional accessible web applications faster than ever" https://nextui.org - "NextUI components are built on top of React Aria ensuring exceptional accessibility support as a top priority."
EDIT: I've added Mantine to my post. I've left out NextUI, being more of a "skin" over React Aria.
So left it at that,
I really like the idea but I wish there were equivalents for Angular.
- [0] https://react-spectrum.adobe.com/react-aria/
Personally if I'm building a full SPA I prefer Angular over React as I find the opinionated way takes a lot of the thinking and troubleshooting away. I've worked with large React codebases and without the opinionation they quickly devolve into spaghetti code with a multitude of libraries trying to solve the same problems just in slightly different ways.
I've tried NextJS but with each release they seem to add more complexity and the niceities that attracted me there in the first place get overshadowed by bugs and continously having to refactor because "there's a new, better way of doing things".
I'm hopeful that with the recent releases of Angular (performance; standalone components; signals being some of the main ones) will help increase popularity again but it may be that Reacts popularity keeps it on a positive spiral upward.
- [0] https://react-spectrum.adobe.com/react-aria/
Answer: it’s super fast to write, easy to read, and has really great defaults.
My dream is to have something like headless-ui fully standardized, so that designers could create the styling for components against that structure and then have each "design system" as a simple set of CSS (or maybe SASS) packages.
Every one I’ve seen seems to allude to adding one in the future but it never happens.
Is a good multi-select dropdown really that hard?
Have only used ReactSelect but it’s a bit annoying and over-complicated and painful to style.
Would love something with good defaults out of the box in the style of shadcn
[1]: https://ui.shadcn.com/docs/components/dropdown-menu#checkbox...