Style your app components with st_yled. Unique colors, fonts and background for your buttons & co

[JonathanAlles]

With st_yled you can simply style most Streamlit elements like button or containers - right from you app code. This helps you build unique UIs using your personal tone or brand.

Visit st-yled studio, the accompanying app, to test and configure layouts for your own apps.

Styled integrates naturally with your Streamlit dev workflow, just replace st. with st_yled. and activate elements for passing style parameters.

# Use enhanced elements to style the (text) color and background of a single button
st_yled.button("Styled Button", color="white", background_color="blue")

# Or the color and size of the title
st_yled.title("Welcome!", color="#57cf1cff", font_size="24px")

A quickstart can be found in the st_yled docs.

You can configure elements globally for the whole app or for individual elements. With this you can include you branding style guides and re-use style sheets between apps.

What parts of Streamlit elements would you like to st_yle? Leave a comment.

[JonathanAlles]

The st-styled package (Docs) now also supports font weights for nearly all components which have text.

This lets you easily create variants for button groups or create nuanced info boxes.

Use is similar to all other st_yled properties:

import st_yled

st_yled.init()

st_yled.button("Click Me", font_weight="bold", background_color="blue")

What styling properties would you like to see next?