A slot in Uniform is a named container within components that can hold other components. Slots provide flexibility for content editors while giving developers control over the structure. Without any code, you can:
From code perspective, the UniformSlot
React component provides various ways to access, render, and manipulate the components within a slot, with special behavior in the Canvas editor to improve the editing experience. It accepts an array of components and offers numerous ways to customize how it renders the assigned components.
NextJS page router has the wrapperComponent
documented here with sample code here. App router accepts the same function as a child component. You can find ready to use components (such as table, accordion) in the Uniform Component Starter Kit.
If you want to see the source code of particular component with the latest CSK app router v6, execute npm run component:extract
and select the needed components.
Empty slot isn't technically empty when you are in Canvas editor. For better user experience, Uniform adds an empty placeholder component, which looks like an area with a plus icon so you can add components by clicking on it (read more here):
You can customize what you want to be rendered instead, for example a component that matches you design system or nothing, see an example here.
It might be useful when you want to show different content based on components being added to the slot or not.
For page router, you could pass the actual slot, for the app router, you’d access the component?.slots
Sometimes using UniformSlot
on its own might be not enough. For example, if you render tabs or a carousel, you also need to render the navigation buttons, such as tabs with titles or link to a next slide. You can access an array of components under the slot as component.slot.slotName
which means you can do something like component.slot.slotName.map
. Here is an example how to use it in a simple tabs component:
You can find full examples in the Component Starter Kit repo for tabs and carousel. Or when using the latest CSK v6 by running npm run component:extract
and selecting the tabs
or carousel
component.