# Custom component step by step

**URL:** <https://community.glideapps.com/t/custom-component-step-by-step/75029>\
**Category:** Project Showcase\
**Tags:** custom-code\
**Created:** [July 20, 2024, 1:07pm UTC](https://community.glideapps.com/t/custom-component-step-by-step/75029 "2024-07-20T13:07:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marc-Olivier](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@Marc-Olivier](https://community.glideapps.com/u/Marc-Olivier)\
**Post date:** [July 20, 2024, 1:07pm UTC](https://community.glideapps.com/t/custom-component-step-by-step/75029/1 "2024-07-20T13:07:04Z")

</div>

I’ve been exploring how to connect a data source input from Glide to a custom component and create an action output within Glide. If you’re interested in diving in, here’s a step-by-step guide. Using a single JSON data source, you’ll build a plan price table in a custom component with a buy button linked to an action. Check it out here: [Step-by-Step Guide](https://marcos-app-57eb.glide.page).  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/82f33a1b3d62f830cf97d086b40cdb670754ca17.gif)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 20, 2024, 3:15pm UTC](https://community.glideapps.com/t/custom-component-step-by-step/75029/2 "2024-07-20T15:15:39Z")

</div>

This is golden and anyone who wants to work more with custom components should study this.

---

<div class="post-metadata">

**Author:** ![Daniel\_Altman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daniel_altman/32/80805_2.png) [@Daniel\_Altman](https://community.glideapps.com/u/Daniel_Altman)\
**Post date:** [October 16, 2024, 8:52pm UTC](https://community.glideapps.com/t/custom-component-step-by-step/75029/3 "2024-10-16T20:52:49Z")

</div>

Does this still work? I see “Not Found” in the published app and get the same when I follow the steps in my own fresh new app

 ![Screenshot 2024-10-16 at 1.52.14 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/ab19d7f2be4cb33823ed44f91919baaf02671e29.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 17, 2024, 12:12am UTC](https://community.glideapps.com/t/custom-component-step-by-step/75029/4 "2024-10-17T00:12:49Z")

</div>

It has been like that for a while, you should try the AI Component instead of Code, at least for now.