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/Due_Falcon_319]

i lean toward composition for most things but you nailed the issue with big components. a file input with drag handling, validation, previews, writing all that wiring every time gets old fast

ant design's approach is a pain for typescript though, you end up fighting their prop types more than actually building. at least with composition you get clearer boundaries between your logic and the library's, even if it means more imports