Adopting shadcn/ui as the Component Library

[singhlify]

Overview

The goal of this proposal is to address the need for a component library that provides full control over all components while ensuring accessibility and ease of development. After careful consideration, I propose adopting shadcn/ui as the component library for our project.

Why shadcn/ui?

Fine-grained Control and Extensibility

shadcn/ui provides direct access to each component's source code, enabling us to adjust the code to fit unique use cases and application needs. This level of control and extensibility sets shadcn/ui apart from other UI solutions and makes it a delight to work with. Easy access to component code also improves flexibility and makes it easier to scale and maintain applications.

Accessibility

shadcn/ui's components are fully accessible and adhere to Web Content Accessibility Guidelines (WCAG) standards. It supports screen readers, keyboard navigation, and other accessibility features, ensuring our application is inclusive and user-friendly for all users.

Built on Reliable Dependencies

shadcn/ui is built on top of well-known and battle-tested libraries, including:

• radix-ui for headless components
• Tailwind CSS for styling
• react-day-picker for the Calendar component
• date-fns for date and time formatting
• @tanstack/react-table for the Table and DataTable components
• react-hook-form for form and form state management
• zod for schema validation and error handling in forms
• Embla Carousel for the Carousel component
• Lucide for icons

By leveraging these robust dependencies, shadcn/ui provides a solid foundation for our component library, reducing the need to reinvent the wheel and ensuring compatibility and maintainability.

Adoption and Community Support

shadcn/ui is gaining traction in the open-source community, with a growing number of projects adopting it. Notable projects using shadcn/ui include Vercel's AI Chatbot and v0.dev, a project hosted by Vercel. Additionally, numerous developers have shared positive experiences and opinions about shadcn/ui on various platforms, further validating its value and quality.

• https://www.linkedin.com/posts/iampava_ive-been-hearing-a-lot-about-shadcn-lately-activity-7100775851209687040--iRS
• https://manupa.dev/blog/anatomy-of-shadcn-ui
• https://www.youtube.com/watch?v=AqmMx_JidGo
• https://www.linkedin.com/pulse/i-love-shadcn-heres-top-5-reasons-m-showkat-hxl1c

Conclusion

By adopting shadcn/ui as our component library, we can ensure full control over components while adhering to accessibility standards and leveraging the expertise of a well-established and widely adopted solution. This decision will streamline our development process, reduce the need to create components from scratch, and provide a solid foundation for our application. Furthermore, the active community support and adoption by reputable projects contribute to the long-term sustainability and evolution of shadcn/ui.

[Neha]

Thank you @singhlify.

A few questions:

1. Who all are using this ui library

2. How stable it is?

3. Have we compared it with other component libraries, or design system? What were the pros and cons?

4. How old it is?

5. Currently we have all the components from shadcn/ui in our repo which are not getting used anywhere. We should have only those components in our code which are required.

6. I need to go through shadcn/ui to understand the advantages of it over component libraries. Early opinion: I would avoid "having all control". The reason to have components (from 3rd party) is that someone else maintains it. Apart from "full control" everything else is available in a lot of component libraries.

For now, this is just adding build size.

[singhlify]

1. Who all are using this ui library?

• I mentioned all my findings above under "Adoption and Community Support" section. I will add them here as well:

Notable projects using shadcn/ui include Vercel's AI Chatbot and v0.dev, projects hosted by Vercel. Additionally, numerous developers have shared positive experiences and opinions about shadcn/ui on various platforms, further validating its value and quality.

• https://www.linkedin.com/posts/iampava_ive-been-hearing-a-lot-about-shadcn-lately-activity-7100775851209687040--iRS
• https://manupa.dev/blog/anatomy-of-shadcn-ui
• https://www.youtube.com/watch?v=AqmMx_JidGo
• https://www.linkedin.com/pulse/i-love-shadcn-heres-top-5-reasons-m-showkat-hxl1c

2. How stable it is?

• I'm sorry but exactly what metric are you asking for?

3. Have we compared it with other component libraries, or design system? What were the pros and cons?

• In our first meeting, Ekas explained that they are going towards building a custom component library because they want full control over all components but, they are open to a component library that gives full control. shadcn/ui was the only one that met this requirement.

4. How old it is?

• 1st official version (@shadcn/[email protected]) was released on Mar 8, 2023.

5. Currently we have all the components from shadcn/ui in our repo which are not getting used anywhere. We should have only those components in our code which are required.

• Yes, all the shadcn/ui components were added because:

  1. The project's version 1 is still in progress.
  2. As we are creating a web app with multiple roles & features including admin dashboards then, most if not all of these components will be used.

  So, even if you do decide to remove the unused components, I would recommend to do this after version 1 of the app is completed.

6. I need to go through shadcn/ui to understand the advantages of it over component libraries. Early opinion: I would avoid "having all control". The reason to have components (from 3rd party) is that someone else maintains it. Apart from "full control" everything else is available in a lot of component libraries.

• I would avoid "having all control"

• The exact opposite of this statement was conveyed during the meeting 😅 and yes, I agree there could many better component libraries available but, shadcn/ui was the only one that met the requirement.

• If you do find any alternatives to shadcn/ui then please do share here as well 🙏. Would love to check them out.

7. For now, this is just adding build size.

• Can you please share the current build size including shadcn/ui?
• Have you compared shadcn/ui's build size with any other component library?

8. @tanstack/react-table : Do we need this?

• It's a shadcn/ui dependency. And, yes we do need a table component. How do you propose we create tables? Custom built from scratch or use a library? If we go with a library then we can compare it with this package.

9. react-hook-form: We have action, and Form in NextJS. Do we need this?

• It's also a shadcn/ui dependency. It's popular alternative is formik but its still less popular than react-hook-form.
• As for NextJs's form & action, IIRC at that point we were exploring the possibility of deploying the website on Firebase Cloud functions and Jaswant told as that these server features might not work there. So, let's finalize our deployment strategy & platform first and then, we can discuss further on this.

10. Lucide: Is there any advantage over other icon libs?

• Again, it's a shadcn/ui dependency. If you have any other library in mind then we can compare it with Lucide and also, check its compatibility with shadcn/ui (if you decide to go with shadcn/ui, that is).

11. in short, I don't see the dependencies are the selling points of shadcn/ui

• The main selling point is that, it's in TailwindCSS and we get full control over the components.

[Neha]

Adding few more points:

1. @tanstack/react-table : Do we need this?

2. react-hook-form: We have action, and Form in NextJS. Do we need this?

3. Lucide: Is there any advantage over other icon libs?

in short, I don't see the dependencies are the selling points of shadcn/ui

[Neha]

@singhlify can you share SLA for this please. TIA

[singhlify]

SLA??

[Neha]

Expected time to finish/revery on the given task.

[singhlify]

I am so sorry 🙏 but I still don't get it. You are asking for expected time of which task exactly?

[Neha]

You have mentioned in discord you will add your points: https://discord.com/channels/708526181627985980/1004323773694099546/1251952204764545117

these were my points:

1. Adopting shadcn/ui as the Component Library #40 (comment)
2. Adopting shadcn/ui as the Component Library #40 (comment)

My Ask:

1. Share a date when you will add your points.

Thanks,
Neha

[singhlify]

Oh OK!! I will share by 22nd June.
Thanks! 🙏