Composition over Configuration

In React codebases, you’ll pretty commonly come across components that look something like this:

<Dialog time="" />

This removes the alert dialog wrapper component and reverts usages to a more compositional style. (ie. Composition, not Configuration).

The argument for doing this is that it reduces coupling and enhances maintainability. ie. If you notice an issue with a dialog you can target that modal directly, without creating unanticipated side effects. The downside is there is marginally more boilerplate code.

So, rather than

description = "This is a dialog.";

You have to write:

<DialogDescription>This is a dialog.</DialogDescription>

In the above example, using a prop seems preferable. The problem is when you start needing to add additional branching. For example:

Description={<MyDescriptionWithSomeExtraFunctionality />}
descriptionClassName="py-4"

<DialogDescription className={descriptionClassName}>
  {typeof Description === "string" ? Description : <Description />}
</DialogDescription>

And then you end up with a component that looks like this:

<Dialog
  description={...}
  descriptionClassName={...}
  title={...}
  titleClassName={...}
  cancelText={...}
  onCancel={...}
  // ...more props
/>

The larger argument is that we must be very cautious about making updates to any code that is extensively reused (ie. all UI components, which inherently have high degrees of coupling). In most cases it is best to defer to the pre-established patterns defined by shadcn/ui, because these patterns have already undergone extensive testing/development and are designed for scalable reuse. Additionally any developer already familiar with the library will have an easy time contributing.