Knowledge Base/Tips and tricks on using Uniform Slot

Tips and tricks on using Uniform Slot

how-toDeveloperNextJS page routerNextJS app routerCanvasPreviewCSK

Understanding Slots in Uniform Components

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:

  • Limit number and type of allowed components (learn more here).
  • Setup default components in a slot and decide where you can allow adding other components using component or composition patterns with slot section here.

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.

How to customize the way child components are rendered in a slot

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.

Customize empty slot behavior in Canvas editor

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):

Empty placeholders are only added in Canvas editor and they are never displayed on the live site.

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.

How to identify if a slot has no components

It might be useful when you want to show different content based on components being added to the slot or not.

const isSlotEmpty = (components: Pick<ComponentInstance, '_id'>[] | undefined) => { if (components && components.length > 0) { const [firstComponent] = components; return isComponentPlaceholderId(firstComponent._id); } // Handle the case where the array is undefined or empty return true; };

For page router, you could pass the actual slot, for the app router, you’d access the component?.slots

How to map over components in the slot

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:

const [activeTabId, setActiveTabId] = useState(component?.slots?.tabItems?.[0]?._id as string); const tabItemsSample = component.slots.tabItems.map(tabComponent => ({ ...(flattenValues(tabComponent) as { title?: string }), id: tabComponent._id as string, })); ... return ( ... {tabItemsSample.map(tabItem => ( <button key={tabItem.id} onClick={() => setActiveTabId(tabItem.id)}> {tabItem.title} </button> ))} <UniformSlot data={component} context={context} slot={slots.tabItems}> {({ child, component }) => (component._id === activeTabId ? <>{child}</> : <></>)} </UniformSlot>

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.

Published: May 9, 2025