Hi! First of all, thank you for your work on Basecoat – it's a great project and a pleasure to use.

Motivation

Currently, Basecoat includes all components by default when imported. In some projects, for me it would be beneficial to have more granular control over which components are included in the final CSS bundle. This is especially important for avoiding conflicts with existing components in legacy projects.

DaisyUI provides a great example of this approach: https://daisyui.com/docs/config/#include

With DaisyUI, you can use the @plugin directive with include and exclude flags to specify which components to load or skip. For example:

daisyui: {
  include: button, input, select;
}

or:

daisyui: {
  exclude: card, modal, footer;
}

Moreover, this approach would make it possible to use DaisyUI and Basecoat together in the same project without conflicts or duplicated styles. This is especially valuable to me, since some components are really well implemented in DaisyUI, while Basecoat offers unique solutions that have no alternatives. The ability to selectively pick components from both libraries would greatly enhance customization options and improve the overall DX.

Feature Proposal

It would be great if Basecoat could support similar functionality, allowing users to:

• Include only specific components (e.g., only "button" and "alert")
• Exclude certain components from being loaded (e.g., load everything except "modal" and "dropdown")

This could be implemented via @plugin directive options, similar to DaisyUI.

Benefits

• More control for developers over which components are available in their project
• Faster-ish build times

Discussion

• Is this something that would fit the vision for Basecoat?
• Are there technical challenges or architectural considerations that would make this difficult?
• Would you be open to a PR for this feature, or do you have a preferred approach?

Thanks for considering this! Looking forward to your thoughts.