New Component: Streamlit-Flow allows the display of Argo workflow nodes
3 Likes
New Component: streamlit-comments supports replies and multi-level replies.
2 Likes
New Component: streamlit-file-browser provides the ability of files and folders browser
2 Likes
New Component: streamlit-material provides a beautiful periodic table of elements.
2 Likes
Streamlit Arabic Support Wrapper
This Python package provides tools to support the alignment and proper display of Arabic text in Streamlit applications. It enhances the visual layout of Arabic content by adjusting the directionality and alignment of text and UI components.
Features
- Arabic Text Alignment: Ensures that Arabic text in Streamlit components such as markdown, input fields, and alerts is correctly aligned from right to left.
- Support for Multiple Components: Can apply Arabic text alignment to specific Streamlit components or all supported components at once.
- Easy Integration: Easily integrate with existing Streamlit applications to improve the display of Arabic text.
Installation
You can install the package using pip:
pip install streamlit-arabic-support-wrapper
Usage
First, import the support_arabic_text function from the package and use it in your Streamlit application. Here’s an example of how to use it:
import streamlit as st
from arabic_support import support_arabic_text
# Support Arabic text alignment in all components
support_arabic_text(all=True)
# Application Title
st.title("تجربة دعم اللغة العربية")
# Demonstrating different supported components
st.write("هذا التطبيق يوضح كيفية دعم اللغة العربية في Streamlit.")
Links:
4 Likes
Hey @basel_mather, @y805939188, @yaosikai, @mapix_i! 
Thank you all for sharing your components! They all look amazing, and I have so much to try out now! 
Best,
Charly
2 Likes
Hello Streamlit Community,
I’m excited to share with you a new custom component for Streamlit: st-link-analysis, a tool for visualizing and interacting with graphs directly within your Streamlit apps.
Why I created this component
While there are several options available for visualizing graphs, I wanted a more interactive solution that offers the following within the frontend part:
- Easily switch to fullscreen mode for a more immersive visualization (especially important for link analysis tasks).
- Refresh the layout dynamically without needing to rerun the backend.
- View detailed information about nodes and edges directly within the visualization
- Exporting data along with positions to JSON.
I plan to continue to work on it every once in while to address any reported issues and add additional features (e.g. hide/show nodes).
Links
5 Likes
Hello @AlrasheedA
Thanks for this component. Been using it for an analysis and I love how simplified it is. Question. Is there a layout that always shows the graph from Left to right or from Top to bottom, similar to what Graphviz does?
I am using it to analyse business processes and it would be nice to look at a process from either left to right or top to bottom.
Thank you.
Streamlit-scroll-navigation: scroll-based navigation for single-page applications.
Demo:
1 Like
Introducing the streamlit_chat_widget!
We’re thrilled to announce streamlit_chat_widget, a custom-built chat input component for all Streamlit enthusiasts! Designed with versatility in mind, this widget brings both text and audio input capabilities, perfect for conversational AI, voice assistants, and any chat-based applications you dream up.
Created by Mohammed Bahageel, AI Developer, streamlit_chat_widget offers a seamless and intuitive user experience in your Streamlit app:
Key Features:
- Text Input: Type and send messages effortlessly.
- Audio Recording: Built-in mic functionality for voice messages.
- Fixed Position: Just like
st.chat_input, it stays anchored at the bottom for ease of access.
Installation
Get started with one line of code:
pip install streamlit-chat-widget
Future Releases
The package will be updated regularly and periodically to fulfill the needs of of our beloved streamlit community members and its available here !
Usage
Integrating streamlit_chat_widget into your app is easy! Here’s a quick start:
import streamlit as st
from streamlit_extras.bottom_container import bottom # to position the widget on the bottom
from streamlit_chat_widget import chat_input_widget
def main():
st.title("My Custom Chat Application")
if "chat_history" not in st.session_state:
st.session_state.chat_history = []
for message in st.session_state.chat_history:
st.write(message)
with bottom():
user_input = chat_input_widget()
if user_input:
if "text" in user_input:
st.session_state.chat_history.append(f"You: {user_input['text']}")
elif "audioFile" in user_input:
st.audio(bytes(user_input["audioFile"]))
if __name__ == "__main__":
main()
Additional Customization
Use from streamlit_extras.bottom_container import bottom to position the widget in a floating container for an even more refined look.
import streamlit as st
from streamlit_extras.bottom_container import bottom
from streamlit_chat_widget import chat_input_widget
# this will place it always at the bottom of the screen in a fixed position
with bottom():
user_input = chat_input_widget()
We’d love to see how you bring streamlit_chat_widget into your projects! Share your creations and join the conversation in the Streamlit community today.
Contributions
For contribution to the project please visit my GitHub repository star the repo to help me gain visibility and feel free to make your contributions and enhancements , thank you in advance
Happy Development and Coding!
@andfanilo
@dataprofessor
Custom Components
Community Cloud
Using Streamlit
Deployment
2 Likes
I created a navbar component, aligning to the streamlit style
Its under my streamlit-plugins repo, that is a collection of different component I will upload, but tha main is the navbar integrated in streamlit native multipage.
I posted a detailed explanation here
The repo is here:
quiradev/streamlit-plugins: Components and Frameworks to give new features to streamlit
Also, I will update this component a client side change theme, and not only change from light to dark, you can override the complete underliying style of all native streamlit components, even margins.
I explained here
2 Likes
New Component to display metrics as donut without plotting. alternative to st.metric
3 Likes
Hi! Here is a new component that allows you to use Meta’s Lexical rich text editor in Streamlit. This renders markdown live (within the editor)! Any feedback or PRs appreciated.
Hey,
I needed to get the browser language to automatically set the language for the user on my streamlit app:
pip install streamlit-browser-language
There is already a streamlit-browser-engine component, but it doesn’t return the language. That’s the reason why I made this package.
I am sharing it in case someone might find it useful also.
Cheers.
1 Like
Hey everyone!
I just built a super simple streamlit component: streamlit-clickable-list 
I was looking for something similar but couldn’t find exactly what I needed, so I decided to make my own. Hope you find it useful!
Give it a try and let me know what you think! 
What it does:
col1, col2 = st.columns([1, 1])
with col1:
def on_click(name: str) -> None:
print(f"clicked: {name}")
st.session_state['clicked'] = name
st.header("Clickable list:")
clickable_list(["aaa", "bbb", "ccc"], on_click, key="clickable_list")
with col2:
st.header("Result:")
if "clicked" in st.session_state:
st.write(f"Clicked: {st.session_state['clicked'] or 'none'}")
Here’s what it looks like in action:
Or try the demo! https://clickable-list.streamlit.app/
Installation:
pip install streamlit-clickable-list
Source code:
3 Likes