What does the component 'Dropzone' element do?

I have no idea what the purpose of this is, but I’ve seen many people use it. I also haven’t found any documentation for what it’s supposed to do. :smile:

It lets you drop elements into the component, right? E.g create nestable components.

1 Like

Hey @Micah :slight_smile:
Yes, like @Broberto said.
For example, the Dropdown component is made up of 2 dropzones: one for the Trigger and one for the Dropdown. It allows you to set the logic on the dropzones. So in each instances of that component, you can put whatever you want!
CleanShot 2024-07-12 at 08.02.42

You could apply the same logic for Accordions, Modals, Cards…

1 Like

@jptrinh @Broberto So I figured this is what it was, but I can’t figure out how to actually put something in the dropzone…? If I hover over it, it doesn’t let me drop anything into it :thinking:

Ha, I just refreshed my page and it let me drop things in! Funny because I’ve been trying to figure this element out for weeks and it looks like not being able to drop things in at first might be a bug.

1 Like

it lets you drop elements when you are not editing the component.
in you previous screenshot you are in edit mode of the component so the dropzone is disabled because you can already insert elements.
the dropzone is for adding extra elements into your component, without knowing in advance what it will be. maybe in one page you will use the component with a text inside it, maybe on another page you add an icon. it is similar to the concept of slot, it’s a way to pass elements to the component.

1 Like

The screenshot is a bit cropped, but I’ve exited out of the component edit mode, and just confirmed it again on my side. :slight_smile:

I’m not too sure what causes it to break, but a refresh makes it usable! On immediate refresh, adding the dropzone immediately works. Seem like if I’m in the editor for more than 20 mins without refresh it seems to not allow dropping stuff in.

1 Like

Just to clarify once more in case someone else has the same issue. When you drag and drop a component from your library what you create is an instance. Instance is a ‘copy’ of the root component which you access by clicking ‘Edit’ on an instance.

When you add a dropzone to a component, you can add elements to it on each instance, not the root component. So what you want to do is, exit the component editing and you will see an empty slot on the canvas and in the navigator to drop elements.

1 Like

I briefly covered dropzones in a component walkthrough a few months ago if anyone is curious about them

2 Likes