cva VS shadcn/ui

cva.style

* use cva https://github.com/joe-bell/cva to style generic ui components (like buttons) to archive same grouping as in semantic css

Highly recommended with this: https://github.com/joe-bell/cva

Yes, and a library like https://github.com/joe-bell/cva makes this a breeze. See https://cva.style/docs/getting-started#your-first-component for an example

There is also class variance authoriy

https://github.com/joe-bell/cva is great for this

Also have you heard of class variance authority? https://github.com/joe-bell/cva; personally looked into stitches & vanilla-extract but i'm preferring the simplicity of this package the most.

It’s Headless so you can use it with whatever UI components you have in your project and as with everything in TanStack it’s type-safe! In this example we'll use components from shadcn/ui to build the form but you can really make it work with any UI library.

Shadcn UI

You can access shadcn/UI using the following links. Official Site Github Repo

I build an Angular or React app or smart component that uses the store in an Nx monorepo. I use the Shadcn UI in React apps, and the Shadcn-based spartan/ui in Angular apps, so I can use almost the same app architecture both in Angular and React.

Finally, for our front end, we’re going to be pairing Next.js with the great combination of TailwindCSS and shadcn/ui so we can focus on building the functionality of the app and let them handle making it look awesome!

Shadcn/ui: I've never tried it before but have always wanted to switch from MaterialUI

Honestly the ergonomics of heavily customizable generic component libraries aren't great. Copy and pasting a simple component to make the specific customizations you want helps reduce JS ecosystem churn and dependency pain. Popularity of libraries like shadcn/ui [1] are good acknowledgements of that.

[1] https://ui.shadcn.com/

shadcn/ui

This model is very similar to the popular shadcn workflow. After files are creating in your local repo, you can modify them and check them into source control.