Add a slot

Canvas guides how business users work with your front-end design. Configure your project's design system and style guide so Canvas can make composing pages and experiences intuitive and consistent.

Manage this configuration through slots (or placeholders) and slot restrictions. In the previous lesson, you created a new component for your project. Now you'll walk through creating a new slot in that component.

For this exercise you'll add a new, related content slot in the Video Player component. With this, users can add related content (such as a CTA) to a video. During the lesson you will:


  1. Add a slot to the component definition (Related)
  2. Add a slot to the component source code
  3. Configure the slot in Uniform (allowed components)
  4. Add a component to the new slot in the composition
  1. In Uniform, navigate to Experience > Components.
  2. Open the component Video Player.
  3. Click Slots.
  4. Click Add slot.
  5. Enter the following values:
    Slot NameRelated
    Public IDrelated
    Allowed ComponentsSpecify allowed components
  6. From the list of components, select Call to Action.
  7. Click OK.
  8. Click Save and close.
  1. In the component code, make the following changes:


    /* eslint-disable */ // @ts-nocheck import { FC } from 'react'; import classNames from 'classnames'; import { UniformText, UniformSlot } from '@uniformdev/canvas-react'; import { getTextClass } from '@/utilities/styling'; import { VideoPlayerProps } from '.'; export const VideoPlayer: FC<VideoPlayerProps> = ({ title, description, source, id }) => ( <div className={classNames('hero min-h-[500px] relative', 'text-secondary-content')}> <div className={classNames('hero-content text-center p-0')}> <div className={classNames('flex flex-col mx-1 md:mx-10')}> <h1 className={classNames('font-bold', getTextClass('h5'))}> <UniformText parameterId="title" /> </h1> <div className={classNames('py-6')}> <UniformText parameterId="description" /> </div> <div className="border-dashed border-4 border-gray-300 p-5 text-gray-300"> {source === 'YouTube' && ( <iframe width="560" height="315" src={`${id}`} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> )} {source === 'Loom' && ( <iframe width="640" height="360" src={`${id}`} frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe> )} {!source && <div className=" text-gray-300">Select a video source</div>} </div> <UniformSlot name="related" /> </div> </div> </div> );
  1. In Uniform, open the project map.
  2. Navigate to Home > Articles > The Golden Ratio of Coffee.
  3. Select the video player component.
  4. Click Add Call to Action.
  5. Enter content for the new component.
  6. Click Publish.