Streamlit Components
Streamlit components are basically UI elements that allows users to interact with your app,
and displays data visualizations, forms, charts and more.
Need a Streamlit developer? Click here
Streamlit Built-in Components
| Component | Description | Example |
|---|---|---|
st.title | Displays a large title | st.title("My Streamlit App") |
st.header | Displays a header | st.header("Section Header") |
st.subheader | Displays a smaller header | st.subheader("Subsection") |
st.write | General-purpose text display | st.write("This is Streamlit!") |
st.markdown | Renders Markdown text | st.markdown("**Bold Text**") |
st.code | Displays code snippets | st.code("print('Hello')", language="python") |
Lets write code to see how they look like.
we start by importing streamlit
import streamlit as st
st.title("This is the title component.")
st.header("This is streamlit header!")
st.write("This is some random write up")
st.markdown("""
This is **bold text**
This is *italic text*
This is ***bold & italic***
This is ~~strikethrough~~
This is `inline code`
""")
st.markdown(
"<h3 style='color:green;'>Custom Green Heading with Streamlit markdown</h3>",
unsafe_allow_html=True
)
st.code("Print(hello streamlit)")
Input Component
These allow users to provide data
| Component | Description | Example |
|---|---|---|
st.title | Displays a large title | st.title("My Streamlit App") |
st.header | Displays a header | st.header("Section Header") |
st.subheader | Displays a smaller header | st.subheader("Subsection") |
st.write | General-purpose text display | st.write("This is Streamlit!") |
st.markdown | Renders Markdown text | st.markdown("**Bold Text**") |
st.code | Displays code snippets | st.code("print('Hello')", language="python") |
Lets write code to see how this works
import streamlit as st
st.text_input("Enter your name")
st.number_input("Enter yor age", min_value=0)
st.date_input("Pick a date")
st.slider("Select range", 0, 100, 20)
st.selectbox("Choose", ["Apple", "Grapes", "Carrots"])
st.multiselect("Pick fruits", ["Apple","Banana","Mango"])
st.checkbox("Accept terms")
st.radio("Gender", ["Male","Female"])
st.file_uploader("upload a file")
Button Components
Other button-like components:
st.download_button(): For file downloads
st.form_submit_button(): Inside forms
import streamlit as st
if st.button("Click"):
st.success("Button clicked")
Media Components
| Component | Usage | Example |
|---|---|---|
| Image | Displays an image | st.image("photo.jpg", width=300) |
| Audio | Plays audio files | st.audio("music.mp3") |
| Video | Plays videos | st.video("video.mp4") |
import streamlit as st
st.image("sunrise.jpg", caption="Sunrise by the mountains")
st.audio("audio.mp3")
st.video("video.mp4")
Charts and Visualization Components
Streamlit integrates with Matplotlib, Plotly, Altair, Seaborn, and Pandas.
#Matplotlib Chart
import matplotlib.pyplot as plt
import numpy as np
import streamlit as st
x = np.linspace(0, 10, 100)
y = np.sin(x)
fig, ax = plt.subplots()
ax.plot(x, y)
st.pyplot(fig)
Data Display Components
| Component | Description | Example |
|---|---|---|
| Table | Displays static tables | st.table(df) |
| Dataframe | Interactive Pandas tables | st.dataframe(df) |
| Metric | Display KPIs | st.metric("Revenue", "$10K", "+5%") |
| Json | Pretty-print JSON | st.json({"name": "John", "age": 25}) |
import streamlit as st
import pandas as pd
data = {
"Fruit": ["Apple", "Banana", "Orange"],
"Sales": [10, 20, 30]
}
st.table(data)
st.dataframe(data)
st.metric("Revenue", "$10K", "+5%")
st.json({"name": "John", "age":25})
Layout Components
| Component | Usage | Example |
|---|---|---|
| Sidebar | Adds components to the sidebar | st.sidebar.selectbox(...) |
| Columns | Split page into columns | col1, col2 = st.columns(2) |
| Tabs | Organize content in tabs | tab1, tab2 = st.tabs(["Tab1","Tab2"]) |
| Expander | Collapsible sections | with st.expander("See details"): |
| Container | Group widgets together | with st.container(): ... |
import streamlit as st
st.sidebar.selectbox("Names", ["hulk", "Iromman", "Kane"])
col1, col2 = st.columns(2)
with col1:
st.write("Column1")
with col2:
st.write("Column2")
tab1, tab2 = st.tabs(["Tab1","Tab2"])
with tab1:
st.write("Tab1")
with tab2:
st.write("Tab2")
st.expander("See details")
with st.container():
st.write("This is container")
Streamlit Forms
Forms are useful for collecting multiple inputs before submission.
import streamlit as st
with st.form("my_form"):
name = st.text_input("Enter Name")
age = st.number_input("Enter Age", 1, 100)
submit = st.form_submit_button("Submit")
if submit:
st.success(f"Name: {name}, Age: {age}")
Streamlit components make apps interactive and powerful.
Want to learn more about Streamlit? Click here
Watch Videos on Streamlit:
