Unveiling 5 Design Systems: A Comparative Study (Part 2)
In the previous part we talked about the first 3 design systems: Material design, Shadcn UI and Preline UI. We talked about the pros and cons of each one of them. In this article, we will show the pros and cons of the last 2 design systems with us in this comparison.
4.0 Chakra UI:
Pros:
- Built with accessibility and developer experience in mind.
- Many components are already existed in the form of Typescript files.
- Offers a highly customizable and composable component architecture.
- Excellent support for theming and dark mode out of the box.
Cons:
- Relatively new compared to some other design systems, so may not have as large a community or ecosystem.
- Some components are not complete in the figma file which could lead to more work.
5.0 Ant Design
Pros:
- Feature-rich and robust component library.
- Designed specifically for enterprise-level applications.
- Provides extensive customization options and support for internationalization.
Cons:
- No official figma file available (At least I did not find one). Which could lead to inconsistency between code and design.
- Might feel overwhelming for smaller projects or non-enterprise applications.
- Developers side: Requires familiarity with React.js for optimal usage.
Conclusion
As we have seen from the comparison, there is no complete system design and there is no right or wrong in the choosing process. You can choose based on the project you are working on and the developers you are working with. For me, sometimes, I like to mix 2 of them. I like Preline UI but the color palette in it is very bad so I use the color palette of Shadcn UI. Now, The question is “Are you ready to choose?”
Resources
- Chakra UI. https://chakra-ui.com/getting-started
- Ant Design. https://ant.design/
