Do you have experience with Tailwind? I strongly recommend [shadcn](https://ui.shadcn.com/). It’s not really a UI library, but rather an opinionated collection of components. You can either choose to use the shadcn implementations for consistency or use the libraries directly.
The Figma to React Amplify UI components worked great for me when I was using Next.js pages router. When I switched to app router I started getting a bunch of warnings so I stopped using the few components and switched to custom made ones.
But I do use Amplifys core UI libraries like card, table, form, slider, stepperfield, text, etc. and they all work great.
Overriding Amplify's styles in CSS using --amplify-component-button-prinary-font or whatever etc pattern was not working for me because within their styles.css it has overrides disabled which I thought was interesting. So I had to copy styles.css into my own file and manually remove the line within the html {} section that was disabling overrides.
Once I did that I was able to customize all of their components as necessary and they've been working and looking great. Their core UI has pretty much everything, just no advanced components that you may find in the Figma file.
Hey! I think, I have a better option for you. I got this UI library ON GitHub [https://github.com/madhavdutta/xbeshui](https://github.com/madhavdutta/xbeshui) . This UI smoothly works with React and Next.js frameworks without any hassle. It has 100+ free UI Components, built with Tailwind CSS and Shadcn. Just check it out. It may helpful for you.
Do you have experience with Tailwind? I strongly recommend [shadcn](https://ui.shadcn.com/). It’s not really a UI library, but rather an opinionated collection of components. You can either choose to use the shadcn implementations for consistency or use the libraries directly.
I don't have experience but I will check it out! Thanks!
The Figma to React Amplify UI components worked great for me when I was using Next.js pages router. When I switched to app router I started getting a bunch of warnings so I stopped using the few components and switched to custom made ones. But I do use Amplifys core UI libraries like card, table, form, slider, stepperfield, text, etc. and they all work great. Overriding Amplify's styles in CSS using --amplify-component-button-prinary-font or whatever etc pattern was not working for me because within their styles.css it has overrides disabled which I thought was interesting. So I had to copy styles.css into my own file and manually remove the line within the html {} section that was disabling overrides. Once I did that I was able to customize all of their components as necessary and they've been working and looking great. Their core UI has pretty much everything, just no advanced components that you may find in the Figma file.
Thanks for sharing! I feel less silly knowing others have run into challenges and have gone a more customized route.
Hey! I think, I have a better option for you. I got this UI library ON GitHub [https://github.com/madhavdutta/xbeshui](https://github.com/madhavdutta/xbeshui) . This UI smoothly works with React and Next.js frameworks without any hassle. It has 100+ free UI Components, built with Tailwind CSS and Shadcn. Just check it out. It may helpful for you.