> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/~/changes/1175/core-resources/bubble-elements/element-properties/reusable-element-properties.md).
# Reusable element properties
{% tabs %}
{% tab title="Experience level" %}
This core reference entry is suited for **intermediate-level builders****.**
[Learn more about experience levels.](#user-content-fn-1)[^1]
{% endtab %}
{% tab title="In-depth articles (12)" %}
To learn about this topic more in-depth, we recommend reading the suggested articles below:
#### Reusable elements
Article: [Reusable elements](/~/changes/1175/help-guides/design/elements/reusable-elements.md)
***
**Elements**\
In this article series, we cover how to work with different element types:
* Article series:[ Elements](/~/changes/1175/help-guides/design/elements.md)
* Article series: [The element hierarchy](/~/changes/1175/help-guides/design/elements/the-element-hierarchy.md)
* Article: [The page](/~/changes/1175/help-guides/design/elements/web-app/the-page.md)
* Article series: [Container elements](/~/changes/1175/help-guides/design/elements/web-app/containers.md)
Elements that contain other elements.
* Article: [Visual elements](/~/changes/1175/help-guides/design/elements/web-app/visual-elements.md)\
Elements like text, buttons, icons and images.
* Article series: [Input forms](/~/changes/1175/help-guides/design/elements/web-app/input-forms.md)\
Elements that accept input, such as text and file uploads.
* Article: [Conditional expressions](/~/changes/1175/help-guides/logic/conditions.md)
Making your elements change appearance in response to varying conditions.
***
**The design tab**\
In this article we cover the different tools available in the design tab.
Article: ´[The design tab](/~/changes/1175/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/design-tab.md)
***
#### Design
Article series focusing on design in general, explaining terminology and offering resources to help you set up a user-friendly, good looking design.
* Article series: [Design](/~/changes/1175/help-guides/design.md)
* Article: [Responsive design](/~/changes/1175/help-guides/design/responsive-design.md)
Building pages that work on all devices, such as a laptop and a phone.
***
**Previewing your app**
In this section about how to [preview your app](#user-content-fn-2)[^2] in the development environment.
* Article: [Previewing your app](/~/changes/1175/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app.md)
{% endtab %}
{% tab title="Videos (2)" %}
Bubble Academy: [Converting to a Reusable Element](https://www.youtube.com/watch?v=3GEH_hCaAWk)\
Bubble Academy: [Designing a Navbar](https://www.youtube.com/watch?v=iO-rJAu36w8) (using reusuable elements to create a navigation bar)
Webinar: [Building a Scalable Design System with Gregory John \[BubbleCon 2023\]](https://www.youtube.com/watch?v=jsHPfn5antc)\
Webinar: [Building Modular: How Bubble Builds Bubble for Scale \[BubbleCon 2023\]](https://www.youtube.com/watch?v=3lJXMwah8tE)
{% endtab %}
{% endtabs %}
A reusable element is a container (similar to a group) that holds other elements and can be placed in multiple locations throughout your app.
It’s useful when you need the same layout or functionality in more than one place. By centralizing those elements in a reusable element, you reduce duplication, keep the app lighter, and make updates easier to manage.
## Visual
### Content
#### Type of element
A reusable element can be a *Group*, *Popup*, or *Floating Group*.
If set as a popup, the reusable element behaves like a standard popup: it appears modally and greys out the background until it is shown or closed.
#### Type of content
Defines the type of thing the reusable element displays.
### Properties
#### Custom properties
Reusable elements support custom properties, which let you pass data into (and out of) the element. Click the + icon to add a new custom property.
You can define different types of properties:
* **Dynamic value**: accepts any basic data type (text, number, date, yes/no, etc.) or a custom data type.
* **Color picker**: accepts a hex color value or a saved color variable.
* **Checkbox**: passes a yes/no value to or from the reusable element.
Custom properties act as inputs for the reusable element. When you place the reusable element on a page, you can set these properties using static values or dynamic expressions. Inside the reusable element, child elements can reference those properties just like any other data source.
#### How custom properties differ from custom states
Custom properties are similar to custom states, but there are important differences:
* Their value can be fully dynamic. If you assign a dynamic expression, the property updates automatically when the underlying data changes.
* They can be set directly with a dynamic expression — no workflow is required.
* They are designed for passing data between the page and the reusable element, whereas custom states are typically used for internal state management within a single element.
* Reusable elements are treated as isolated instances. This means each instance of the same reusable element maintains its own set of custom property values. You can assign one value to a custom property in one instance, and a different value in another instance, without them affecting each other.
* Reusable element custom properties are also useful to store dynamic variables on a page.
### Configuration
#### Page folder
Defines what page folder the reusable element is in.
{% hint style="info" icon="folder-open" %}
Page folders help you organize and categorize pages in the editor.
They are purely for structure and clarity during development and have no effect on how the app behaves at run-time. Folders do not change URLs, permissions, navigation, or performance — they simply make it easier to manage larger apps by grouping related pages together.
{% endhint %}
[^1]: In the Bubble docs, experience levels are categorized into beginner, intermediate, and advanced.
To assist with learning, especially for more complex topics, we'll recommend prerequisite reading where it could be beneficial.
[^2]: Every chance that you make in your app can be instantly previewed so that you can see how your app looks to your users.
User manual article: [Previewing your app](/~/changes/1175/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app.md)