[Refactor] Use UI component library

[marcusschiesser]

Currently, we're using self-made UI components (ui-lib.tsx) this was a problem when we needed a drop-down menu - we had to add the one from headless. As the target is a complicated enterprise UI, it's better to use an existing UI library.

Requirements:

1. Easily stylable for different customers (Unc is a white-label solution)
2. Sophisticated components that can be used in enterprise UIs.

https://ui.shadcn.com/ looks like a promising candidate. @LaDoger and @thucpn what are valid alternatives?

[LaDoger]

@marcusschiesser @thucpn One of our guys suggests https://tailwindcss.com/ but I'm not sure if this is something we can use. I'm not a web guy haha.

[marcusschiesser]

https://tailwindcss.com/ is not a component library - it's for styling. Actually, it's used by headless and shadcn. Shadcn is based on https://www.radix-ui.com/ Here's a voice on shadcn: https://medium.com/front-end-weekly/seven-reasons-why-i-love-shadcn-ui-bccaee4ae46d Another alternative recommended by @thucpn is https://nextui.org/

[marcusschiesser]

Also using TailwindCSS 😆

[thucpn]

I have reviewed Shadcn's document and feel that this library is very suitable to help improve Unc. It provides a complete set of ready-made components for us to quickly develop new features. Shadcn also supports custom theming, making it easy for us to change the colors of the components to match Unc's branding. And finally, it uses Tailwind CSS behind the scenes, which means we can easily customize the user interface and reduce a lot of code(removing SCSS files). I think it is the most suitable candidate for refactoring Unc's UI. @marcusschiesser

[marcusschiesser]

@thucpn thanks. That was also my hunch. Furthermore, the default theme also looks very nice.

[marcusschiesser]

done in https://github.com/marcusschiesser/unc-llamaindex