Comment on page
Custom Components

Creating custom components is currently in a private beta testing phase. If you want to join the private beta program, see this post in the Community: Be a part of testing our latest Beta feature, Custom Components!​
Overview
Creating custom components allows you to save combinations of components and blocks to reuse in your projects and share them for other Creators to use. Create the component in the component editor once and use it as often as you need in any of your projects.
Create a New Custom Component
1.Navigate to your Thunkable Project page.
2.Click the My Components tab.
3.Click Create A New Component.

4.Name your custom component.
5.Click Create.
6.The component editor opens. It is similar to the editor you’re used to designing in, but you’ll notice the screen has a default group component within which to build your custom component.

7.From the components library, drag and drop components into the group on the screen.
8.Resize the group as necessary to achieve your desired design.
9.Navigate to the Blocks tab.
10.Build your component’s functionality with blocks.
11.When you’re happy with your component, click the Publish icon in the upper right. 
​
12.Select Publish Component.
13.Include Release Notes. For future iterations, you’ll include what changed in the version.
14.Click Publish.
Share a Custom Component
You can share custom components with other Creators using the component's unique URL. When you're ready to share a custom component:
1.In the component editor, click the Share icon in the upper right.
​
2.The custom component's unique URL is copied to your computer's clipboard.
3.Share the URL with another Creator. To import your shared custom component, they will follow these instructions: Import a Custom Component (choosing option 2 in step 4).
Import a Custom Component
1.Navigate to your Thunkable Project page.
2.Open an existing project or create a new one.
3.On the project’s Design tab, click the plus icon at the top of the Add Component library. 

4.In the modal provided, either:
1.My Components tab - Select a custom component from the list.

2.Component Link tab - Type or paste the custom component's link.

5.Click Import.
6.The newly imported component is available under the heading Custom Components in the components library.
​
7.Drag the new component onto your screen.
Copy a Custom Component
1.Navigate to your Thunkable Project page.
2.Click the My Components tab.
3.Click the Copy associated with the component you want to make a copy of.
4.A copy of the custom component is created.
Edit a Custom Component
To make a change to an existing custom component: 
1.Navigate to your Thunkable Project page.
2.Click the My Components tab.
3.Click the Edit associated with the component you want to edit.
4.Make the necessary changes on the Design and Blocks tabs.
5.When you’re happy with your component, click Publish in the upper right. 
6.Select Publish Component.
7.Include Release Notes that state what has changed in this version.
8.Click Publish.
To apply the edits to a previously imported custom component:
1.Open your project containing the imported custom component.
2.When you hover over the imported custom component in the component library, a vertical ellipsis appears.
3.Hover over the vertical ellipsis to display the custom component's details.
4.To apply the changes you made in the component editor to the components you added to your screens within this project, click Update. 
​
5.Click Update to confirm the update. 
This action can't be undone and will change all of the instances of this imported component used in this project.
Add an Event
An event is a block that allows the project to react to behavior that occurred inside of the component.
1.Navigate to your Thunkable Project page.
2.Click the My Components tab.
3.Click the Edit associated with the component you want to edit.
4.Navigate to the Blocks tab.
5.Click the gear icon next to the Component Workspace in the component tree.
6.Click Add an Event.
7.Give the event a descriptive name (e.g. continue button clicked).
8.Input the parameters the event will take in.

Once you drag and drop a block that refers to the parameter or publish the component, the event's parameters cannot be edited.
9.Click the X in the upper right to close the modal.
Add a Method
A method is a block that allows the project to trigger behavior to occur inside of the component.  When you call a method, it is possible to provide additional information in parameters. When a project calls a component's method, the component has access to the values in the parameters.
1.Navigate to your Thunkable Project page.
2.Click the My Components tab.
3.Click the Edit associated with the component you want to edit.
4.Navigate to the Blocks tab.
5.Click the gear icon next to the Component Workspace in the component tree.
6.Click Add a Method.
7.Give the method a descriptive name (e.g. change color).
8.Input the parameters the method will take in (e.g. color).
9.Press your keyboard's enter or return key. 
Once you drag and drop a block that refers to the parameter or publish the component, the method's parameters cannot be edited.
10.Click the X in the upper right to close the modal.
Known Limitations
As part of this private beta release, some functionality is not supported. This includes the following:
Custom components can't be added to a layout component.
Custom components can't be in shared screens.
Creators can't update a custom component that they do not own.
​
Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedback. Your valuable insights will help us improve and better serve you in the future.
Rating Component
Generative AI
Last modified 2d ago