What is the general advice for extracting components that wrap Headless UI for styling purposes?

[mdwheele]

Hello!

I'm really enjoying @headlessui/vue and am starting to feel the familiar CSS class "copy+paste" friction.

Outside of Headless UI, when I feel this friction (usually after the 2nd or 3rd occurrence of a UI pattern, I simply extract that concept into a component, wire any behaviour I need and keep on moving. Using <Menu> as an example, I desire to have a common styling for Menus across the application and currently am simply using the component straight from here and applying my own styling; being careful to make sure it is the same in 8-9 different places. I would like to extract a <Menu> component local to my project that "extends" or "wraps" the Headless UI version.

So I end up with a project structure like this:

These are components owned by my application and more or less basically wrap the Headless UI versions, apply appropriate CSS classes, additional markup, and slots for nesting other components that wrap Headless UI ones. For example, my MenuItem component accepts an icon property that is used to load an appropriate Heroicon to the left of the Menu Item.

This kinda works but... I feel like there must be another way. So... I'm curious what others are doing!

My end-goal is to be able to write markup that looks like:

<Menu>
  <MenuButton>Options</MenuButton>
  <MenuItems>
    <MenuItem icon="pencil">Edit</MenuItem>
    <MenuItem icon="document-duplicate">Duplicate</MenuItem>
    <MenuItem icon="archive">Archive</MenuItem>
    <MenuItem icon="cursor-click">Move</MenuItem>
    <MenuItem icon="trash">Delete</MenuItem>
  </MenuItems>
</Menu>

And is presented like:

Am I way off-base or is there a better way?

[mdwheele]

For some added color, here is a proof of concept that shows what I am currently doing.

https://github.com/mdwheele/wrapping-headless-ui-components