Customize tabs

Using Streamlit
1

I’m using streamlit with python 3.11.2 on a MacBook Pro. I use the tabs widget and I’d like to customise my tabs in color, font, etc.
How can I do that?

1 Like
2

Hello @Jose_Quijado,

For specific customization like changing the color or font of just the tabs, you’ll need to inject custom CSS. You can do this by using st.markdown with the unsafe_allow_html=True parameter. Here’s how you could change the tab colors and font:

import streamlit as st

# Custom CSS to inject
custom_css = """
<style>
    /* Custom style for the active tab */
    .stTabs > .tablist > .react-tabs__tab--selected {
        background-color: #0e1117;
        color: #ffffff;
        font-family: 'Courier New', Courier, monospace;
    }
    /* Custom style for all tabs */
    .stTabs > .tablist > .react-tabs__tab {
        background-color: #e8e8e8;
        color: #4f4f4f;
        font-family: 'Courier New', Courier, monospace;
    }
</style>
"""

st.markdown(custom_css, unsafe_allow_html=True)

# Example usage of tabs
tab1, tab2 = st.tabs(["Tab 1", "Tab 2"])

with tab1:
    st.write("Content in tab 1")

with tab2:
    st.write("Content in tab 2")

Hope this helps!

Kind Regards,
Sahir Maharaj
Data Scientist | AI Engineer

P.S. Lets connect on LinkedIn!

➤ Want me to build your solution? Lets chat about how I can assist!
➤ Join my Medium community of 30k readers! Sharing my knowledge about data science and AI
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ 100+ FREE Power BI Themes: Download Now

1 Like
3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.