[FRONTEND] Tipos de Component/Libraries

React component and library libraries provide pre-built, reusable components to speed up the development process. These libraries can be styled using CSS in various ways, such as traditional CSS files, CSS modules, or CSS-in-JS solutions like styled-components.

Libraries are categorized into three main groups based on the balance between functionality, appearance, and control they offer to developers. Styled libraries deliver ready-made components with defined visual identity. Popular examples include Material UI (MUI), Ant Design, and Chakra UI, which all follow this approach. The benefit is speed, as buttons, modals, tables, and forms come consistent out of the box.

However, the downside is limited customization, requiring theme and internal style overrides, and potentially larger bundle sizes.

Headless libraries, on the other hand, provide only behavior and accessibility features such as focus management, keyboard navigation, ARIA attributes, and open/closed states. Radix UI, React Aria, and Headless UI are prominent examples. Developers apply their own CSS, be it with Tailwind, CSS Modules, or styled-components, granting complete design control without having to reimplement accessibility.

This approach ensures the critical aspect of accessibility is handled, which can be challenging to get right in components like dropdowns, dialogs, and comboboxes.

The copy-and-paste model, popularized by shadcn/ui, is a different approach. Instead of installing a package, the component code is copied into the project. The components are built on top of Radix UI and styled with Tailwind CSS. Since the code now belongs to the project, there's no version dependency or limitation to modify the implementation. The trade-off is that updates and bug fixes need to be applied manually.

When it comes to styling, the approaches differ. Traditional CSS is simple and universal but can lead to global scope conflicts in large projects. CSS Modules provide local scope per file with automatically generated class names and don't require additional runtime. CSS-in-JS, such as styled-components and Emotion, defines styles within components, supports dynamic props and themes. However, this comes with runtime costs and limited support for React Server Components in libraries that rely on runtime style injection.

The choice of library depends on factors like the level of customization required, whether a design system is being built, accessibility needs, bundle size and performance, compatibility with the ecosystem, and maintenance and community support. There's no universally better library, as the chosen approach depends on the context of the product, how much the design needs to diverge from the standard, the timeline, and who will maintain the code.