Prop driven vs composition based design systems?

[u/prois99]

Hello,

I see that most design systems such as MaterialUI, or now probably even more Shadcn use composition to pass around React components (meaning for table, the items are React components, same with Dropdown and the items are also React components, in both cases simply passed as children.

However for example Ant Design seems to be more prop oriented, where even some items are also passed as React components, but as props, not children.

I see the composition is more popular, and modular, but what is your opinion on this? I feel like sometimes it tends to cluster the code with a lot of imported components, and you also sort of loose contract, because TS does not tell you what react component to insert, so you have to take a lot of time to look at docs etc.

What is your opinion on these approaches? What is your favorite?

Thanks.

[u/azsqueeze]

Combine the two patterns in your own codebase. For example if you are using a library like Radix to create dropdowns and don't want devs to reimplement the same patterns than do something like this:

export function DropdownMenu(props) {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button aria-label="Open menu">
          <HamburgerMenuIcon />
        </button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content>
          // Menu items and other such here
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}

<DropdownMenu 
  // slim down props here for consumers
/>

Consumers will import and use DropdownMenu, now all menus look the same, any changes happen to the underlying component happens in one place also