UI Libraries & Design Systems
Scope
This section covers libraries and frameworks primarily focused on providing UI components (buttons, forms, modals, etc.), CSS methodologies or utility frameworks for styling, and tools related to building, documenting, and maintaining design systems.
Overview
ADOPT
Proven technologies we have high confidence in; our default choices.
Technologies Breakdown
shadcn/ui ADOPT
Recommended approach for building custom UIs in React/Next.js projects. Use its CLI to add components directly into the codebase. Requires Tailwind CSS.
Provides highly customizable and accessible components by leveraging Radix UI and Tailwind CSS. The approach of copying components into the project gives teams full ownership and control. Proven effective and preferred by development teams for building bespoke interfaces efficiently.
Material UI (MUI) ADOPT
Approved component library for React projects, particularly suitable for internal tools or projects where rapid development with pre-built components is prioritized and alignment with the Material Design aesthetic is acceptable or desired.
Comprehensive set of components, good documentation, and strong community support. Our team has considerable experience with it. Provides a faster path to building complex UIs compared to building everything from scratch, especially for back-office applications.
Origin-UI ADOPT
Adopted component library built on shadcn/ui. Use as a primary source for standardized components in projects utilizing the shadcn/ui and Tailwind CSS stack.
Offers a curated and potentially extended set of components based on the shadcn/ui philosophy. Provides a consistent layer and potentially additional utilities/features that streamline development within our chosen stack. Adopted based on positive evaluation of its benefits over using base shadcn/ui components directly in many cases.
Chakra UI TRIAL
Explore on specific new React projects (especially internal tools or PoCs) as an alternative to MUI or the shadcn/Origin stack, particularly where its specific component set or style-prop DX is desired.
Offers a highly accessible, composable set of React components with a strong focus on developer experience (style props). Trialing continues to evaluate its niche compared to our adopted solutions, particularly for projects where MUI or shadcn/Origin might be overkill or less suitable.
Ant Design (Antd) TRIAL
Explore on specific new React projects, particularly complex data-intensive applications or back-office systems where its vast component set (tables, forms, data visualization) could provide significant value.
A very comprehensive, enterprise-focused UI library with a distinct aesthetic and a huge number of out-of-the-box components. Trialing to evaluate its suitability for specific types of complex applications, assess its customization capabilities (theming), performance implications, and compare its developer experience to MUI and other alternatives for building feature-rich interfaces quickly.
Tailwind UI ASSESS
Investigate as a potential accelerator for projects using Tailwind CSS that require professionally designed, complex components quickly. Evaluate component quality, variety, cost, and licensing model.
A commercial offering from the creators of Tailwind CSS, providing a large library of pre-built, fully responsive UI components and templates. As we heavily use Tailwind CSS, this is a relevant resource to be aware of.
Storybook ASSESS
Evaluating its potential benefits for component development, documentation, and testing. Investigate setup, workflow, and maintenance requirements through small PoCs or on non-critical projects.
Storybook is recognized as an interesting and powerful tool for developing UI components in isolation, widely used in the industry. However, our team currently lacks significant prior experience with its setup, maintenance, and integration into different project types.
Bootstrap HOLD
Avoid for all new projects. Used in some legacy applications which should be considered for UI upgrades or migration.
While foundational, it has largely been superseded by utility-first frameworks (Tailwind) and more modern component libraries (MUI, shadcn/Origin) within our stack. Often requires significant customization and overrides, reducing its benefits compared to newer approaches.