Frontend components framework v2

[arkid15r]

We've discussed this recently here (#538, #325) and in Slack. It seems this needs to be revisit as some of you strongly suggest using Chakra UI instead of our current choice shadcn/ui.

Chakra UI

Pros:

1. Pre-styled and Customizable:

   • Chakra UI comes with fully styled components out of the box, but it offers easy theming and customization options.
   • Built-in support for dark mode and responsive design using simple props.

2. Developer Experience:

   • Chakra UI has a user-friendly API and is focused on simplicity. The library encourages best practices such as accessibility (e.g., focus management and ARIA attributes).
   • Excellent documentation and great community support.

3. Built-in Accessibility:

   • Components are designed to be accessible from the start, reducing the effort needed to ensure compliance with accessibility standards.

4. Composable Components:

   • Components are designed to be flexible and composable, meaning you can easily create custom UIs by combining them.

5. Consistent Styling:

   • Chakra UI uses a consistent design system, which makes it easier to maintain a cohesive look across the app.

6. Custom Hooks:

   • Chakra provides custom hooks for various states like useDisclosure (for modals, popovers) to manage UI state.

Cons:

1. Opinionated Styling:

   • While customizable, Chakra UI’s default styles may not be suitable for projects that require a completely different design language or minimal styling. It could lead to more work if a drastically different design system is needed.

2. Bundle Size:

   • Chakra UI can lead to a slightly larger bundle size compared to more minimalistic UI libraries like Radix UI or Headless UI due to its rich feature set.

3. Limited Customization:

   • Chakra UI is quite opinionated on its component structure and behavior, which might make deep customization more challenging for advanced users.

---

Shadcn UI

Pros:

1. Unstyled and Flexible:

   • Shadcn UI is a headless UI library, providing only the logic and behavior without predefined styles. This allows for full control over styling, making it easy to integrate into existing design systems or applications with specific visual requirements.

2. Minimalistic:

   • Because Shadcn UI doesn’t impose any default styles, it's lighter and more suitable for developers who want a clean slate for styling.

3. Customizable Components:

   • Shadcn’s components can be styled completely from scratch, making it easier to align with unique project designs. This provides more flexibility compared to Chakra UI’s default styling.

4. Performance:

   • Being headless and unstyled, Shadcn UI is generally more lightweight, resulting in smaller bundle sizes compared to Chakra UI. This can be important for performance-sensitive applications.

5. Integration with Tailwind CSS:

   • Shadcn UI works well with Tailwind CSS (or other utility-first CSS frameworks), allowing you to leverage utility classes for a streamlined styling experience.

Cons:

1. No Predefined Styles:

   • The lack of predefined styles can be a disadvantage if you need a ready-to-use UI library. This requires you to handle the design from scratch, which might take more time compared to Chakra UI's out-of-the-box components.

2. Learning Curve for Design System:

   • Since Shadcn UI doesn't enforce a design system, you may need to set up your own theming and design rules, which could add complexity for developers unfamiliar with managing a design system.

3. Fewer Components:

   • Shadcn UI, being a headless component library, may have fewer ready-made components compared to Chakra UI, which offers a comprehensive set of UI elements for immediate use.

4. Documentation:

   • Shadcn UI might have less extensive documentation or a smaller community compared to Chakra UI, although it is growing in popularity.

---

Comparison Summary:

Aspect	Chakra UI	Shadcn UI
Design Flexibility	Opinionated, pre-styled components	Highly flexible, unstyled (headless)
Customization	Easy but less control over design	Full control, requires more effort
Accessibility	Built-in, designed with accessibility in mind	You’ll need to handle accessibility manually
Bundle Size	Larger due to its full-featured nature	Smaller, lightweight
Performance	Slightly heavier due to pre-styles	Lighter, more performance-friendly
Integration	Works well with its own design system	Works seamlessly with utility-first CSS frameworks (e.g., Tailwind)
Documentation	Extensive, great community support	Growing, but less established

Consider this as another chance to suggest something else too.

[Dishant1804]

After again carefully reviewing and going through code of chakraUI it seems to be very opinionated as @arkid15r mentioned, ChakraUI has wider range of components no doubt but we would only need a few components out of it, and in the long run, we might not need many of them. ShadCN does have fewer components compared to ChakraUI, but I still believe that ShadCN seems like a better fit for our needs, especially from a flexibility and performance POV. We can always create custom components that closely replicate those in ShadCN if needed. Right now, ShadCN already provides almost all the components we require for this project, and it will also help us focus more on performance. Also not to forget chakraUI has a different custom styling pattern of its components which might not feel very intuitive.
I hope this makes sense, and I’m happy to discuss it further :)

[AbhayTopno]

Yes, I agree with @Dishant1804 . As per our needs, ShadCN would be a better option here, but I’m fine with either of the two

[Rajgupta36]

There are many libraries that offer a variety of components, including some with animations (e.g., Mantine, Aceternity, MUI, etc.). However, I think we should avoid relying too much on any UI library. ShadCN performs well and is built on top of the Radix library, which is highly customizable.

If we decide to fully switch to any UI library, we can even turn a simple div into Card or CardHeader(UI component) , but that might not always be ideal.

UI libraries are great for speeding up development, but relying on them too heavily may lead to issues in the future.
I agree with @Dishant1804, but I’m open to using any UI library we choose.

[arkid15r]

I have a couple questions regarding these 2 options.
My main question is what would be easier to maintain in a long term perspective? It seems that chakra UI was suggested as a better choice here. Also I like its built-in theming (dark mode out of the box) and accessibility options (something that we want to support).

I don't think that variety of components make a big difference for us based on our simple needs.

It also seems that opinions changed recently (which is totally fine). I wonder what influenced that changes?

Thank you everyone for helping with this!

[Dishant1804]

@arkid15r i completely apologise for it and, the only thing that made me change my opinion was it will be difficult for other contributors to contribute to the project because ChakraUI will make project complex due to its highly opinionated styling and it is very less customizable maybe in some cases we will have to even alter the main component file it gives us which is not good in my opinion, and i think that changing opinion after thinking about everyone and betterment of the project is totally okay, i'll take extra care of this and take time to give my inputs from next time :)

[arkid15r]

@yashgoyal0110 this discussion is for assessing pros/cons of both options.

[yashgoyal0110]

@arkid15r yep

[yashgoyal0110]

So the bottom line is that charkra UI doesn't provide any long term maintenance benefits comparing to Shadcn?

yes

[Dishant1804]

So the bottom line is that charkra UI doesn't provide any long term maintenance benefits comparing to Shadcn?

yess from longer term maintenance and readability of component's code, shadcn is better than chakra ui

[arkid15r]

I don't have experience with neither of them. Please take a look at my following comment (ai generated suggestions)

[arkid15r]

Yes, Chakra UI provides long-term maintenance benefits when compared to Shadcn UI, but this largely depends on the specific needs of your project and how much control you want over styling and behavior. Here's a detailed comparison of long-term maintenance considerations:

---

Chakra UI: Long-Term Maintenance Benefits

1. Stable and Mature Ecosystem:

   • Chakra UI has a well-established ecosystem with frequent updates, clear documentation, and a strong community. This means you can rely on it to remain stable and supported for the foreseeable future.

2. Accessible by Default:

   • Chakra’s focus on accessibility reduces the burden of maintaining and ensuring compliance with web accessibility standards. Components come pre-configured with ARIA roles and focus management, which lowers the effort required over time.

3. Comprehensive Theming:

   • Chakra’s design system and theming capabilities allow you to make global updates (e.g., changing primary colors or spacing). This consistency simplifies maintenance as your application grows.

4. Ready-to-Use Components:

   • Pre-styled, production-ready components eliminate the need to reinvent the wheel. This minimizes the effort required to build and maintain reusable UI elements over time.

5. Community and Plugin Support:

   • With a large community, third-party plugins, and extensive documentation, it's easier to find solutions for edge cases or issues without having to solve everything on your own.

6. Backward Compatibility:

   • Chakra UI strives to maintain backward compatibility in its releases, minimizing breaking changes that require updates in your codebase.

7. Reduced Engineering Overhead:

   • Since Chakra UI handles many implementation details (like styling, responsiveness, and interactivity), you can focus on business logic rather than maintaining custom UI logic.

---

Shadcn UI: Long-Term Maintenance Considerations

1. Headless and Unopinionated:

   • Shadcn UI's flexibility comes at the cost of requiring manual setup and ongoing maintenance for styling and accessibility. You'll need to maintain your custom design system, which could increase complexity as your application scales.

2. Reliance on External CSS Frameworks:

   • Shadcn UI is designed to work seamlessly with Tailwind CSS or other utility-first frameworks, which means its maintenance will depend on the stability and updates of the CSS framework you use.

3. No Built-in Accessibility:

   • Accessibility must be implemented manually for most components. Over time, maintaining compliance with accessibility standards (e.g., WCAG) can be challenging without dedicated effort.

4. Limited Out-of-the-Box Features:

   • Because Shadcn UI is focused on being minimal and headless, you may need to build or customize components for use cases that Chakra UI already covers. Maintaining these customizations long-term adds to the maintenance burden.

5. Smaller Ecosystem:

   • Shadcn UI is newer and has a smaller community compared to Chakra UI. This may mean fewer resources (like tutorials, plugins, or pre-built solutions) to assist with maintenance or advanced use cases.

6. Custom Design System Overhead:

   • While flexibility is a strength, building and maintaining a custom design system requires ongoing effort. Any design changes or global updates must be managed manually, which can be error-prone as the project grows.

---

Key Differences in Long-Term Maintenance

Feature	Chakra UI	Shadcn UI
Prebuilt Components	Reduces maintenance overhead by providing pre-styled, ready-to-use components	Requires manual styling for all components
Accessibility	Built-in, reducing the need for manual effort	Must be implemented and maintained manually
Community and Ecosystem	Large community and extensive resources for updates and fixes	Smaller ecosystem, fewer prebuilt solutions
Customization Effort	Moderate effort for customization due to opinionated defaults	High effort but complete flexibility for customization
Design System Maintenance	Comes with a robust and consistent theming system	Requires managing your own design system, adding complexity
Breaking Changes	Rare; typically backward-compatible updates	Dependent on the chosen CSS framework (e.g., Tailwind updates)

---

When Chakra UI is Better for Long-Term Maintenance

• If your team prioritizes ease of use and scalability, Chakra UI will save you time with its prebuilt, accessible components and consistent design system.
• It's ideal for teams that don’t want to invest heavily in creating or maintaining a custom design system.

---

When Shadcn UI Might Be a Better Fit

• If your team has designers and developers who are comfortable maintaining a fully custom design system, Shadcn UI provides unmatched flexibility.
• It's more future-proof for projects where specific branding or heavy customization is a priority, even if it requires more maintenance effort.

---

Conclusion

Chakra UI offers long-term maintenance benefits by reducing the engineering and design overhead, making it an excellent choice for teams looking for stability, scalability, and developer convenience. Shadcn UI, while flexible, shifts much of the maintenance responsibility to your team, which can be a significant challenge over time. If long-term maintainability is a high priority, Chakra UI is generally the safer choice.

[yashgoyal0110]

@arkid15r one major point is that chakra is more relevant for large scale applications and bit complex ui, though can be used in simple web apps as well. its subjective to use or not

[Dishant1804]

yeah like both of these libraries have their pros and cons, lets narrow it down to 2-3 major parameters we are looking forward to and based on then we can choose either of them

[yashgoyal0110]

@Dishant1804 yes

[yashgoyal0110]

I think some key points of discussion should be:

• 1.larger community support
• 2.higher customisability and flexibility
• 3.lesser developer efforts in longer run

[arkid15r]

@Dishant1804 @yashgoyal0110 and folks, this is ai analysis based on a list of goals/non-goals I've provided:

Based on your Goals and Non-goals, Chakra UI is the clear choice for your framework. Here's how it aligns with your needs:

---

Goals Analysis

1. Low Effort Maintenance:

   • Chakra UI is a mature, well-supported framework with a strong community and regular updates, making it low-maintenance.
   • It provides built-in accessibility, responsive utilities, and theming, reducing the burden of manual fixes or adjustments over time.

2. Low Development Overhead:

   • With ready-to-use, pre-styled components, Chakra UI significantly reduces the development overhead compared to building from scratch.
   • Its extensive documentation and preconfigured components let you focus on building features rather than worrying about UI intricacies.

3. The More Features Available Out of the Box, the Better:

   • Chakra UI offers a rich library of components (e.g., buttons, modals, tooltips, menus) that work well together without additional setup.
   • It includes theming capabilities, dark mode support, and built-in responsiveness, saving you from having to implement these features yourself.

---

Non-goals Analysis

1. Create Own Design System:

   • Chakra UI comes with an opinionated and extensible design system, so you don’t need to build one yourself.
   • You can tweak the existing theme if needed, but it’s not required to use Chakra effectively.

2. Low-Level Customization for Specific Needs Like Branding or Complex UI:

   • Chakra’s opinionated defaults mean you don’t have to worry about extensive low-level customization.
   • It provides enough flexibility for moderate branding needs but isn’t focused on granular, custom solutions, which aligns with your non-goals.

---

Why Not Shadcn UI?

Shadcn UI is better suited for projects with the following characteristics:

• A focus on custom design systems and full control over styles.
• Projects where branding or complex UI requirements are a priority.

However, based on your non-goals, Shadcn UI would introduce higher development and maintenance overhead, as it requires:

• Building and maintaining your own design system.
• Manually configuring and styling components.

This contradicts your preference for out-of-the-box features and low-effort maintenance.

---

Conclusion

Given your priorities for low maintenance, low development overhead, and out-of-the-box features, Chakra UI is the ideal framework. It allows you to move fast without reinventing the wheel, while its built-in accessibility and responsive design simplify both development and maintenance in the long run.

[Dishant1804]

Sounds great, so we will move forward with chakra ui then 🚀

[arkid15r]

Please see https://owasp.slack.com/archives/C07JLLG2GFQ/p1737339339712169

[Dishant1804]

our existing components are supported by radix ui so we'll need to modify them as well and we are good to go

[arkid15r]