
Help with list group component architecture
Hey everyone,
I’m working on updating a component and I’m not fully sure what the best architecture approach would be, so I’d love some input.
It’s a List Group component that contains multiple list items. I have different types of list items, ranging from very simple to quite complex.
The challenge is:
- The list group can have two background styles (white / light grey)
- Each list item has a hover state that depends on the background
- I want the background type to be controlled at the List Group level, so when it changes, all child items automatically adapt without uploaded content loss.
On top of that:
- The number of items inside the group is dynamic
- I’m unsure whether this should be handled via slots, or props/booleans/variants
- Or if it makes sense to define variants like 1–10 items
I’m trying to figure out the cleanest way to structure this from a design system / component architecture perspective.
How would you approach this? Thanks!