When we decide what qualifies as a component in a component library or design system, we aim for a separation of concerns: we decouple something that creates whitespace from something that creates frames from something that styles type so that each can be reused in different contexts. Consider a Card component with a title and optional description: Card title {description && {description} From the component library design point of view, this makes sense: Card is responsible for visually framing the component.

Design system components with a strict separation of concerns can easily break this#fn:whyfragments: Out of the top 100 most visited websites, https://meiert.com/en/blog/valid-html-2022/.

Enhancing the behaviour of child nodes: If a component is responsible purely for attaching attributes to its child node, why introduce a wrapper?
Newsletter

Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week

Glimpse streamlines Laravel development by seamlessly deploying GitHub pull requests to preview environments with the help of Laravel Forge. Glimpse streamlines Laravel development by seamlessly deploying GitHub pull requests to preview environments with the help of Laravel Forge.
Fathom Analytics | Fast, simple and privacy-focused website analytics. Fathom Analytics | Fast, simple and privacy-focused website analytics.
Shirts painstakingly handcrafted by under-caffeinated developers. Shirts painstakingly handcrafted by under-caffeinated developers.
Community Partners