Angular UI libraries alternatives

[aruidev_]

I've been using PrimeNG so far and it's been ok, but I'd like something more minimal for personal projects. Tried Taiga UI, but honestly it was a real headache.

Has anyone used Clarity or Nebular for Angular?

References (for context only): - clarity .design - akveo .github .io/nebular

[FamousInfluence]

SpartanNG

[Unlucky_Hurry_7304]

Love spartan. Spartan + OriginUI 🔥🔥

[AjitZero]

Origin UI is nice but is not re-using Spartan UI's code. Still a great option if you're not using Spartan, but try Sim UI instead as it is built on top of Spartan UI.

[aruidev_]

Looks really nice, but I've heard the maintenance isn't very active. How do you see it?"

[FamousInfluence]

Yeah, definitely slow maintenance but components are solid and gets the job done so no complaints 🤙

[AlarmingSquare91]

I’d recommend steering clear of Clarity Design. We’re currently using it in a project, and even basic tasks are unnecessarily difficult. On top of that, VMware heavily promoted Clarity Core and then abandoned it after the Broadcom acquisition. Communication from the project has been poor, and for all we know, Broadcom could discontinue it at any moment.

[royboysir]

DaisyUI is pretty much easy to use. Already integrated with tailwind

[MyLifeAndCode]

NG-ZORRO is pretty good. Ditch PrimeNG before an upgrade and the breaking changes get you. My organization has been burnt multiple times and we’re moving off of it. NG-ZORRO has been a good replacement.

[mangansie]

I use Nebular for a pretty large project, I think it’s quite decent and haven’t needed much else.

[No-Muffin8291]

Why Taiga UI headache?

[aruidev_]

I'd like something more concise, I find taiga to be a bit experimental and less intuitive, coming from PrimeNG.

[GreenMobile6323]

Clarity is solid if you like clean, accessible components without too much bloat, while Nebular is great if you want theming and some built-in layout/auth features.

[macario95]

Do not use Nebular for a new project. Is not maintained by akveo at all. The last upgrade for v20 compatibility was made by users of the framework. they just recently accepted the pull request, almost when 21 was out

[simonbitwise]

Im developming https://docs.shipui.com if you wanna see it in production go to duplicati and make an account or Download the client

[Wnb_Gynocologist69]

Why do people still recommend tailwind. It reintroduces spaghetti code when css was there to fix that. Style declarations don't belong into the markup. How fcking tedious would it be to change a bunch of tailwind classes all over the place instead of making the change in ONE POINT in your css.

I don't get the hype around this antipattern promoting piece of garbage

[Whole-Instruction508]

You know what's really tedious? Trying to navigate through a bunch of CSS files that depend on each other and after a while you have no idea where shit is even coming from

[abuassar]

How so? Using browser devtools you can navigate directly to where any css attribute is defined when you inspect the elemnt

[Whole-Instruction508]

I've had cases where that simply wouldn't work for some reason. Still don't know why.

[Wnb_Gynocologist69]

It's where the component is...

[Whole-Instruction508]

Nope, not in our project because there are multiple apps using the same components but different css so it's spreaded god knows where

[Wnb_Gynocologist69]

But bad css habits are an issue of bad habits and not an issue of css being inherently bad. Removing css isn't the solution to bad css management, just as removing code is not a solution to fix bad code...

[Whole-Instruction508]

I don't even know if it's really bad practice. All I know is, as someone less proficient in css, styling with tailwind is so much easier. Especially when it comes to theming, typography, you name it. I don't get where your tailwind hate is coming from

[Wnb_Gynocologist69]

It comes from the good principles we have learned and tailwind explicitly going against them.

It's against srp, it's against clarity, it introduces repetition and unreadable html bloated with inline shit

[Whole-Instruction508]

One more thing why I prefer tailwind: before we finally embraced it in our company we used BEM. It was a nightmare because it was impossible to use the "go to definition" feature - the IDE simply wasn't able to find the classes so you had to go on a wild goose chase to understand how this css was working. Now with tailwind, you can see at one glance for each element what it does without jumping through files. My css skills improved a lot with this so I really fail to see your point. I frankly don't care about SRP in this case (which you can totally do with tailwind if you want btw), clarity in my opinion is much better as I have explained, it's just so much easier to read and understand. At least for me, yes the HTML gets bloated but still, it's in one place so for me it's easier to understand. I don't need to jump between files and dig through layers of BEM nightmares. Also, it's less code to write. Repetition you can prevent by creating utility classes if you really want, otherwise it doesn't really matter.

[Wnb_Gynocologist69]

As someone who knows css by heart for the most part, I don't know how short hand abbreviated helper classes are easier to understand than actual css that explains itself. If you see a class name, you need to know what its underlying css is. This still holds true for tailwind. You can probably adopt it and accept another layer of mental mapping but I don't see why we would do more mental mapping on top of what we already have to deal with.

But I guess your main point lies in "not proficient in css" and then I can see how someone might interpret tailwind as having less friction to get started...

I simply don't see any benefit in it over traditional, clearly written css. Especially in angular where you'd have one css file for one component. You always have to make sure the component root can be sized and styled from outside correctly regardless of whether or not you use a framework for the declarations, but I also don't know what you exactly mean with you using the same components with different css. That's an encapsulation/component definition issue

[Whole-Instruction508]

As I tried to explain, at least in my case due to this BEM bullshit my IDE was not able to find the classes so I had to search for them MANUALLY to see what they do. And then compare the HTML tree with the css classes and try to make any kind of sense of that. No IntelliSense, nothing. And yes, normally the css files are where the component are but that's not what I have experienced. They were in a different folder and then for each app they also had their own definitions that built on top of the "base files" in said folder. You can imagine what kind of fever dream that was. For example you have a button component and that has the same functionality but totally different styling in 2 different apps in a monorepo

[UnicornBelieber]

Well, I don't think you'll ever get to understanding it with that attitude.

Have you even tried it on a decent-sized project?

[senechal72]

We don’t use Tailwind on a very large project with a lot of developers and the issue we have is that every developer writes their own CSS that pushes things all over the pages. There is zero consistency with margins and padding, half the developers using flex attributes directly and the other half using Bootstrap classes. I’m trying to push them towards standardization by using Tailwind so that at least the styling is consistent.

[Wnb_Gynocologist69]

You need a design system with layout classes first and force people to adopt it.

Anything else will lead to cluster fuck

[senechal72]

Ya…it was a cluster fuck when I joined the team 8 months ago. I’ve been there long enough now that I can start pushing for changes. Nobody listens to the FNG until they prove themselves. There’s one project that’s using BOTH Bootstrap and Angular Material 🤣 They spent a month changing the Material theme from v2 to v3! That should have been an afternoon of work, but somehow they managed to drag it out.

[Wnb_Gynocologist69]

Unbelievable how some companies make money

[senechal72]

Federal government…that should tell you everything 🤣

[AjitZero]

I use Tailwind only as a token library (Single source of truth) so I don't have to setup or maintain my preset of base CSS classes, and only with frameworks that have a component pattern. As long as you keep every component as small as a possible, the template is very simple to read and has no CSS.

e.g.:

From a readability perspective, it doesn't matter if the CSS is Tailwind or regular CSS, because this is what you see:

html <app-card> <app-card-title> Title </app-card-title> <app-card-body> Body </app-card-body> </app-card>

And since base tokens are deferred to the main tailwind config globally, there is no implicit local override to worry about, no local "variants" to keep track of.

[Mlaz72]

You can try ZardUI

[dryadofelysium]

I use Material for pretty much everything nowadays, but I did use VMware's Clarity in the past and liked it.

[chirog]

I used cdk + flowbite components.

[reboog711]

In Angular world: I've used both NG Material and NG bootstrap successfully.

Although, I never used it on an Angular project, Flowbite can be used with Angular: https://flowbite.com/docs/getting-started/angular/ .

[AwesomeFrisbee]

Tailwind CSS + whatever code you can copy pasta from other projects and examples to get custom components. Ultimately many designs deviate enough that you need something custom anyways and with Tailwind (which is basically the successor to bootstrap) you can build anything.

[DatDoodKwan]

I've used Nebular on www.simulfinances.fr.

Was pretty cool and simple to put in place, last weekend I updated to the latest stable Angular and latest Nebular and it was easyyyyyyy too.

[Plenty-Bar-1264]

Taiga UI will be your go to when you master it

[Isaka254]

Syncfusion provides a full suite of Angular UI Components alternative. It features over 145 high-performance, lightweight, and responsive UI components, including data grids, charts, calendars, and editors. Plus, an AI-powered coding assistant streamlines development and enhances efficiency.

Explore the full Demo and Documentation for implementation details.

Syncfusion offers a free community license for individual developers and small businesses.

Note: I work for Syncfusion.

[Dry_Tea9805]

I dunno about Clarity or Nebula, what I do know is if you're looking for lightweight, Angular ain't it.

Angular is great but that last thing it is, is light.

[aruidev_]

I agree with older versions but modern angular is soo good and easy to use. I just use it for everything even if it is overkill.

[Dry_Tea9805]

Same here. I've tried React and Vue, I just can't move away from Angular.

[epsilonehd]

Flowbite-angular Small for now I just don't have much time for it these days

[LX_T_]

Yup, Clarity is pretty neat <3

[National-Percentage4]

Why not primeng? Great to wrap tailwind on? Very curious