St_yled studio: Explore and configure your Streamlit Theme and Style Components

Show the Community!
1

image
image1305×782 47.1 KB

st_yled studio - unique branding for your Streamlit apps

st_yled studio let’s you interactively explore Themes and customize Streamlit components like colors, buttons, etc.

Here’s the link to the community app

You can right away export a config.toml file and use it in your app. You can also download your custom component configuration and make use of button or input widgets with unique backgrounds, borders and colors.

st_yled studio works with the st_styled package which you can use to apply custom component styling in your app.

Your workflow

  1. Configure theme and element in st_yled studio
  2. Export config.toml and st-styled.css into your apps .streamlit folder
  3. Install st_styled (st-styled) package in your app to load st-styled.css files

Do you have feedback, questions, or ideas for more styling? Leave them here!

5 Likes
5 New UI components in st_yled package: Cards, Sticky Header, Container Padding, and more
2

image
image947×672 27.3 KB

Hey there!

The latest update of the st-styled package introduces font weights (normal, bold, light, …) for Streamlit elements like buttons or text.

You can not also preview and experiment with font weights for your elements in the st_yled studio app. Check the app under https://styled-studio.streamlit.app/

From here you can also export your configuration directly to your own streamlit app.

Let me know which other styling options you would like!

1 Like