# Dash Pip Components 👨🏼‍💻
**URL:** https://community.plotly.com/t/dash-pip-components/84228
**Category:** Dash Python
**Tags:** show-and-tell, community-components
**Created:** [May 3, 2024, 12:04am UTC](https://community.plotly.com/t/dash-pip-components/84228 "2024-05-03T00:04:40Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@PipInstallPython](https://community.plotly.com/u/PipInstallPython)
#### Post date: [May 3, 2024, 12:04am UTC](https://community.plotly.com/t/dash-pip-components/84228/1 "2024-05-03T00:04:40Z")
Hey Plotly Community,
This is a curated list of all the components I’ve designed built and published. With the help of: [GitHub - plotly/dash-component-boilerplate: Get started creating your own Dash components here.](https://github.com/plotly/dash-component-boilerplate) anyone can turn any react or javascript github project into a packaged re-usable dash component for the masses thanks to that repo! Honestly from my initial overview I was intimidated with the processes but after jumping into it completely, I can assure any inspired developer is a lot easier to make custom components then you would assume.
My javascript understanding is probably at a 3rd grade reading level but thanks to support from chatgpt and github copilot it doesn’t matter. Anyone with a small bit of effort can design develop and contribute a new package creating a better ecosystem with more components and options for the entire plotly community.
My advice is to find a worthy javascript project that you believe would be a good addition to plotly and dash.
create a new project in your favorite IDE.
`pip install cookiecutter`
`cookiecutter gh:plotly/dash-component-boilerplate`
After which you will mainly work within `source/lib/components` to structure the javascript. Then you’ll create / test the component through running `usage.py` which will act like a simple dash app.py.
Your two favorite commands are `npm install _______ ` for retrieving the library for which you intend to use as you build out `source/lib/components` as you make changes to the project’s `.react.js` file, you will run `npm run build` after any changes to push the work you’ve made so its reflected in the `usage.py`
from that point just run usage.py, test the project go back to `source/lib/components` tweak, add features until you find yourself with a polished project before publishing it to [https://pypi.org/](https://pypi.org/).
I’d recommend typing in your favorite AI:
* * *
I’m looking to setup a new dash component based on [GitHub - plotly/dash-component-boilerplate: Get started creating your own Dash components here.](https://github.com/plotly/dash-component-boilerplate), The component is based on \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ (provide the full github readme.md or relevant context for the AI to understand.) Then trim the usage.py to remove output and the callback. Reference it next within the chat and then inform the AI of your `source/lib/components/ _______.react.js` file and its layout. Most of the time you’ll be provided with a great starting format for you to continue to build and alter from. Then just ask new questions to resolve features you’d like to include or bugs you face in design. Typically takes a good handful of back and forth till you have a polished package but its a great tool to help you along the development process.
* * *
Now to highlight some of the components I’ve built, most of which took ~ day worth of time to design and publish.
1. Full Calendar Component [](https://pepy.tech/project/full-calendar-component)
2. Dash Summernote [](https://pepy.tech/project/dash-summernote)
3. Dash Emoji Mart [](https://pepy.tech/project/dash-emoji-mart)
4. Dash Charty [](https://pepy.tech/project/dash-charty)
5. Dash Image Gallery [](https://pepy.tech/project/dash-image-gallery)
`pip install dash-image-gallery` offers an elegant image carousel thats mobile friendly with auto play, full screen and other features for pictures and video. You can find more about it here: [Pip Install Dash-Image-Gallery](https://community.plotly.com/t/pip-install-dash-image-gallery/83752)
6. Dash Swiper [](https://pepy.tech/project/dash-swiper)
7. Dash Insta Stories [](https://pepy.tech/project/dash-insta-stories)
8. Dash Credit Cards [](https://pepy.tech/project/dash-credit-cards)
`pip install dash-credit-cards` After you’ve used all these other components to build a power house of an application, this component provides an elegant credit card form for you to monetize the next Facebook, Myspace or whatever company that has sprouted from your work and the Plotly/Dash framework. Offering a changeable card based on the credit card credentials provided and a security check you can professionally provide the UI to save payment information and monetize your ambitions.
With all this, hope you’ve been able to find something interesting, useful or inspiring. To be frank this framework has offered me an outlet for creativity, a worth while job with good pay and benefits and complete freedom as a remote developer. The path for anyone looking for the same is achievable and I’d like to encourage more developers to build out components for this community. If you have a good idea for a package feel open to try and build it out yourself or reply with suggestions on this post and I might built it.
Follow me on github, give stars to your favorite repository to show support and learn more about new releases and my work from:
> **[pip-install-python - Overview](https://github.com/pip-install-python)**
>
> Shaking hands, sailing storms, and building some software. - pip-install-python
[](https://github.com/pip-install-python)
---
### Author:  [@PipInstallPython](https://community.plotly.com/u/PipInstallPython)
#### Post date: [May 20, 2024, 1:34am UTC](https://community.plotly.com/t/dash-pip-components/84228/2 "2024-05-20T01:34:12Z")
Started an official documentation page for the components: [https://pip-docs.onrender.com/](https://pip-docs.onrender.com/)
Special shout out and thanks to @snehilvj and @RenaudLN
I’ll add more examples over time.
---
### Author:  [@snehilvj](https://community.plotly.com/u/snehilvj)
#### Post date: [May 20, 2024, 4:04am UTC](https://community.plotly.com/t/dash-pip-components/84228/3 "2024-05-20T04:04:22Z")
Looks great @PipInstallPython. Did you use markdown-2-dash? If so how was your experience?
---
### Author:  [@PipInstallPython](https://community.plotly.com/u/PipInstallPython)
#### Post date: [May 20, 2024, 4:45am UTC](https://community.plotly.com/t/dash-pip-components/84228/4 "2024-05-20T04:45:34Z")
Thanks, had some issues pushing to production, setup `markdown2dash>=0.1.1` in my requirments.txt file and was able to work around most of the trouble that was preventing publishing the app.