UI design system needs to be removed for the code optimization

[Neha]

Describe the bug
Currently in the code there is UI folder with ui components and most of them are not getting used anywhere in the code.
this is going to create the code size, and cause performance issues.

Design system should be implemented in a way that only required component should be imported when required.

To Reproduce
Steps to reproduce the behavior:

1. Go to code
2. Click on components/ui

Expected behavior
Design system should be implemented in a way that only required component should be imported when required.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[singhlify]

components/ui contains all the components of shadcn/ui. These are all basic components that are almost always required.

[Neha]

components/ui contains all the components of shadcn/ui. These are all basic components that are almost always required.

are we using all these components in our project? Which all components are we using from this?

[djhemath]

This should not be an issue. NextJS automatically removes unused components from the bundle during tree-shaking. So we can live with that, and as @singhlify mentions, we probably might need these components in future.

[Neha]

This should not be an issue. NextJS automatically removes unused components from the bundle during tree-shaking. So we can live with that, and as @singhlify mentions, we probably might need these components in future.

This is an issue for sure. Having code which is "may be" need/use in future is just adding junk or unnecessary code in the code-base. Always keep the code which is required now. When the "future" will come then can import/add the required code.

Secondly, I would sill prefer a design system over this shadcn/ui. Reasons are:

1. Only those components would be imported as required
2. 3rd party can take care of it (we don't need to worry about it much)
3. tokens , accessibility, etc everything is supported
4. community support would be great. As design system (if we decided to pick) would be more stable and mature)
5. we are already using tailwind. So, we don't need to stress much about themes etc.

[IdrisGit]

shadcn/ui is a use what you need as you go type of library, it runs on the philosophy of you own your code and components, which is the reason behind all the components being defined in the source code instead of a library import.

To answer your concerns:

1. We can remove all the components that are not being used and later import them using shadcn CLI or copy-paste the code from their website when needed.
2. This is kind of a 50/50 thing, shadcn provides all the components and then we have to own it afterward.
3. shadcn uses Radix UI for accessibility, we can use Tailwind's default tokens (they are pretty sensible) and shadcn is backed/funded by Vercel and it's the hot thing in component libraries right now (so, community support is not an issue).
4. shadcn uses Tailwind.

On the other hand, if we want to use some other component library, here are some Tailwind based libraries:

1. Preline: It is similar to something like antd or chakra but based on Tailwind
2. Headless UI: Unstyled and Accessible component library by TailwindLabs, they provide primitive components that we can use to create derived components.
3. Daisy UI: It is similar to Preline but a bit more opinionated and fewer components(last time I used it)

These are the ones I know about.