When creating a composed component you might want to use a component as a prop or allow a user to not use a component in the composition if they choose not to. This is where slots come in.

Card component Card component

Card component

For example, let's look at the Card component. Its composition includes several nested boxes an image and some typography. Now we want a user to be able to add either an image, SVG, or an icon in the place where the image is located but we want it to be accessible out of the composition but render in the same place.

If we select the components Component Configuration menu we will have a modal with an option to add Slots.

Component Configuration Menu with Slots highlightedComponent Configuration Menu with Slots highlighted

Component Configuration Menu with Slots highlighted

After selecting the + icon I named the slot media.

named slotnamed slot

named slot

I can now move my media slot to where I want it to render in my tree in this case where the image component is located. The image has also been removed as we will add it to our new media slot outside of the composition.

slot moved to the location of the renderslot moved to the location of the render

slot moved to the location of the render

Select the x on the Card component to close the composition. Now we see the media slot in the tree as a child to the Card component.

Slot in the composition tree as a child to the Card componentSlot in the composition tree as a child to the Card component

Slot in the composition tree as a child to the Card component

Insert the Image or your media of choice and it will now render in your components composition where you placed the slot.

📘

Slot Notes

Slots are created on the component configuration.
They are not associated directly with a property in the UI.
They support passing vars down.