Genstyl — Design System tool | Component slots
#DesignSystems #UIDesign #UIUX #FrontEnd #BuildInPublic #WebDesign #ComponentLibrary #DesignToCodebase
Join the waitlist 👇🏻
https://genstyl.ovidiu.works/?utm_sou...
Back in August 2025, I wrote a comment in my code “TODO: SlotModule for CustomComponentModule”. Last week I came back to it and now it’s finally done! Here’s how it works.
When you develop components for UI interfaces for a living, you work with “slots” all the time. Slots are the backbone of how interfaces are built, albeit they’re not always referred to by that name.
It’s a simple idea: poke holes in your component’s structure, so you can nest custom content in them, making the original component flexible and reusable.
How do you poke holes, though?
In Genstyl, I’ve added two types of modules you can work with: a “template slot” (used only in component templates—aka the “hole”) and a “content slot” (used only as direct children to components—aka your content container to place in the “hole”).
What about multiple poked holes? :D
At the moment, I didn’t find a reason to limit the amount of slots you can configure in your template. But how do you know what content goes where when using them?
You link the two by an identifier. When you add a slot in your component’s template, you give it an identifier (e.g. “content”, “sidebar”, “left” or “right”, etc.). When you use that component in your layout (or within other components) content slots are automatically added to your component instance—upon creation—ready to be used, preconfigured with the template slot identifiers. If you remove a content slot, you can always add it back and there’s a handy dropdown with the available slots to choose from to re-link it.
What if I add multiple content slots with the same identifier?
I discovered a useful use case by allowing the same identifier to be referenced by multiple content slots. Genstyl picks the first visible one to render. This means, I can work on multiple variations of the same section of my layout, being able to easily switch between them in the UI. I was working on a multi-step setup wizard and having the ability to design the content for each step in the app was enough proof that allowing this behaviour was definitely useful.
How would this translate to exported Front-End framework components?
When Genstyl will be ready to generate code for different frameworks, slots will easily translate to the already well-known development pattern: slots become renderable props where you can configure children.
I’m so excited about this! Every week I get closer and closer to that initial vision!