""" Streamlit Element Explorer - Theme Demo A comprehensive single-page app showcasing all major Streamlit components with custom theming. Use this to preview how your theme looks across different element types. """ # DO NOT EDIT — managed by manage.py, edit _shared/streamlit_app.py instead import numpy as np import pandas as pd import streamlit as st st.set_page_config(page_title="Element Explorer", page_icon="🎨", layout="wide") # Initialize sample data in session state if "chart_data" not in st.session_state: np.random.seed(42) st.session_state.chart_data = pd.DataFrame( np.random.randn(20, 3), columns=["a", "b", "c"] ) chart_data = st.session_state.chart_data st.title("Streamlit Element Explorer") st.markdown( "Explore how Streamlit's built-in elements look with this theme. " "Select a category below to preview different components." ) # Navigation using segmented_control for better performance section = st.segmented_control( "Section", ["Widgets", "Data", "Charts", "Text", "Layouts", "Chat", "Status"], default="Widgets", label_visibility="collapsed", ) st.divider() # ----------------------------------------------------------------------------- # WIDGETS SECTION # ----------------------------------------------------------------------------- if section == "Widgets": st.header("Widgets") # Buttons st.subheader("Buttons") cols = st.columns(4) cols[0].button("Primary", type="primary") cols[1].button("Secondary", type="secondary") cols[2].button("Tertiary", type="tertiary") cols[3].link_button("Link", url="https://streamlit.io", icon=":material/open_in_new:") # Form with st.form(key="demo_form"): st.subheader("Form") form_cols = st.columns(2) form_cols[0].text_input("Name", placeholder="Enter your name") form_cols[1].text_input("Email", placeholder="you@example.com") st.form_submit_button("Submit", type="primary") # Selection widgets st.subheader("Selection Widgets") sel_cols = st.columns(2) with sel_cols[0]: st.checkbox("Checkbox option") st.toggle("Toggle switch") st.selectbox("Selectbox", options=["Option A", "Option B", "Option C"]) st.multiselect("Multiselect", options=["Tag 1", "Tag 2", "Tag 3"], default=["Tag 1"]) with sel_cols[1]: st.radio("Radio buttons", options=["Choice 1", "Choice 2", "Choice 3"], horizontal=True) st.pills("Pills", options=["Small", "Medium", "Large"], default="Medium") st.segmented_control("Segmented", options=["Day", "Week", "Month"], default="Week") st.caption("Feedback widget") st.feedback("stars") # Numeric & Sliders st.subheader("Numeric Inputs") num_cols = st.columns(3) num_cols[0].number_input("Number input", value=42) num_cols[1].slider("Slider", 0, 100, 50) num_cols[2].select_slider("Select slider", options=["XS", "S", "M", "L", "XL"], value="M") # Date/Time st.subheader("Date & Time") dt_cols = st.columns(2) dt_cols[0].date_input("Date input") dt_cols[1].time_input("Time input") # Text inputs st.subheader("Text Inputs") txt_cols = st.columns(2) txt_cols[0].text_input("Text input", placeholder="Type something...") txt_cols[1].text_area("Text area", placeholder="Longer text goes here...", height=100) # File upload st.subheader("File Upload") st.file_uploader("Upload a file", type=["csv", "txt", "pdf"]) # ----------------------------------------------------------------------------- # DATA SECTION # ----------------------------------------------------------------------------- elif section == "Data": st.header("Data Display") # Metrics st.subheader("Metrics") m_cols = st.columns(4) m_cols[0].metric("Revenue", "$45,231", "+12.5%") m_cols[1].metric("Users", "2,847", "+8.2%") m_cols[2].metric("Conversion", "3.24%", "-0.4%", delta_color="inverse") m_cols[3].metric("Avg. Session", "4m 32s", "+1.2%") st.divider() # Dataframe st.subheader("Dataframe") df = pd.DataFrame({ "Name": ["Alice", "Bob", "Charlie", "Diana", "Eve"], "Department": ["Engineering", "Sales", "Marketing", "Engineering", "Sales"], "Salary": [95000, 78000, 82000, 105000, 71000], "Start Date": pd.date_range("2022-01-15", periods=5, freq="3M"), "Active": [True, True, False, True, True], }) st.dataframe( df, hide_index=True, column_config={ "Salary": st.column_config.NumberColumn(format="$%d"), "Start Date": st.column_config.DateColumn(format="MMM DD, YYYY"), "Active": st.column_config.CheckboxColumn("Active?"), }, ) # Table st.subheader("Static Table") st.table(chart_data.head(5)) # JSON st.subheader("JSON Display") st.json({"name": "Streamlit", "version": "1.41.0", "features": ["themes", "widgets", "charts"]}) # ----------------------------------------------------------------------------- # CHARTS SECTION # ----------------------------------------------------------------------------- elif section == "Charts": st.header("Charts") chart_cols = st.columns(2) with chart_cols[0]: st.subheader("Line Chart") st.line_chart(chart_data, height=250) st.subheader("Bar Chart") st.bar_chart(chart_data, height=250) with chart_cols[1]: st.subheader("Area Chart") st.area_chart(chart_data, height=250) st.subheader("Scatter Chart") st.scatter_chart(chart_data, height=250) # ----------------------------------------------------------------------------- # TEXT SECTION # ----------------------------------------------------------------------------- elif section == "Text": st.header("Text Elements") # Headers st.subheader("Headers") st.title("Title Element") st.header("Header Element") st.subheader("Subheader Element") st.caption("Caption text - smaller, muted") st.divider() # Markdown st.subheader("Markdown Formatting") st.markdown( "**Bold text**, *italic text*, ~~strikethrough~~, " "`inline code`, [link](https://streamlit.io)" ) st.markdown("Math: $E = mc^2$ and $\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}$") st.markdown("Emojis: 🚀 🎨 📊 ✨ and icons: :material/home: :material/settings:") # Colored text st.subheader("Colored Text") color_cols = st.columns(3) color_cols[0].markdown(":red[Red text] and :orange[Orange text]") color_cols[1].markdown(":green[Green text] and :blue[Blue text]") color_cols[2].markdown(":violet[Violet text] and :rainbow[Rainbow text]") # Code blocks st.subheader("Code Block") st.code( '''import streamlit as st # Create a themed dashboard st.set_page_config(page_title="My App", layout="wide") st.title("Hello, Streamlit!") # Display metrics col1, col2 = st.columns(2) col1.metric("Users", "1,234", "+5%") col2.metric("Revenue", "$56K", "+12%")''', language="python", ) # ----------------------------------------------------------------------------- # LAYOUTS SECTION # ----------------------------------------------------------------------------- elif section == "Layouts": st.header("Layout Elements") # Columns st.subheader("Columns with Borders") layout_cols = st.columns(3, border=True) layout_cols[0].write("**Column 1**\n\nFirst column content") layout_cols[1].write("**Column 2**\n\nSecond column content") layout_cols[2].write("**Column 3**\n\nThird column content") # Tabs st.subheader("Tabs") tab1, tab2, tab3 = st.tabs(["📈 Chart", "📋 Data", "⚙️ Settings"]) with tab1: st.write("Chart tab content") st.line_chart(chart_data["a"], height=150) with tab2: st.write("Data tab content") st.dataframe(chart_data.head(3)) with tab3: st.write("Settings tab content") st.checkbox("Enable feature X") st.checkbox("Enable feature Y", value=True) # Expander st.subheader("Expander") with st.expander("Click to expand"): st.write("This content is hidden by default.") st.image("https://placehold.co/400x200/29B5E8/white?text=Expanded+Content") # Popover st.subheader("Popover") pop_cols = st.columns(3) with pop_cols[0].popover("Open popover", icon=":material/info:"): st.write("Popover content here!") st.slider("Popover slider", 0, 100, 50) # Container st.subheader("Container with Border") with st.container(border=True): st.write("**Bordered Container**") st.write("Content inside a container with a visible border.") st.button("Button inside container") # ----------------------------------------------------------------------------- # CHAT SECTION # ----------------------------------------------------------------------------- elif section == "Chat": st.header("Chat Elements") # Chat messages st.subheader("Chat Messages") with st.chat_message("user"): st.write("Hello! How can I analyze my sales data?") with st.chat_message("assistant"): st.write("I can help you with that! Here are a few options:") st.markdown(""" 1. **Revenue trends** - View monthly/quarterly patterns 2. **Top products** - Identify best sellers 3. **Customer segments** - Analyze by region or category """) with st.chat_message("user"): st.write("Show me the revenue trends please.") with st.chat_message("assistant"): st.write("Here's your revenue trend for the past 20 periods:") st.line_chart(chart_data["a"], height=200) # Chat input st.chat_input("Type a message...") # ----------------------------------------------------------------------------- # STATUS SECTION # ----------------------------------------------------------------------------- elif section == "Status": st.header("Status Elements") # Alert messages st.subheader("Alert Messages") st.error("Error: Something went wrong with the data pipeline.") st.warning("Warning: API rate limit approaching (80% used).") st.info("Info: New features available in the latest release.") st.success("Success: Data exported successfully to warehouse.") # Exception st.subheader("Exception Display") try: raise ValueError("This is an example exception for demonstration") except ValueError as e: st.exception(e) # Interactive status st.subheader("Interactive Status") status_cols = st.columns(3) if status_cols[0].button("Show Toast", icon=":material/notifications:"): st.toast("This is a toast notification!", icon="🔔") if status_cols[1].button("Balloons", icon=":material/celebration:"): st.balloons() if status_cols[2].button("Snow", icon=":material/ac_unit:"): st.snow() # Progress st.subheader("Progress Indicators") st.progress(0.7, text="70% complete") with st.spinner("Loading..."): st.write("Spinner is active (non-blocking in this demo)") # ----------------------------------------------------------------------------- # SIDEBAR # ----------------------------------------------------------------------------- with st.sidebar: st.header("Settings") st.selectbox("Time Period", ["Last 7 days", "Last 30 days", "Last 90 days", "All time"]) st.multiselect("Metrics", ["Revenue", "Users", "Sessions"], default=["Revenue", "Users"]) st.slider("Confidence threshold", 0.0, 1.0, 0.8) st.divider() st.caption("Element Explorer v1.0") st.caption("Theme: **Solarized Light**")