The st_yled package now contains a first set of 5 UI components which makes your Streamlit app development even faster and more versatile.
With st_yled 0.3 there you can find new
Card Components: Badge Card, Image Card
Sticky Header
Split Button
Programmatic redirect
Besides there is new styling for existing Streamlit elements:
Padding for Container & Expander content
Separate label and value styling for st.metric
st_yled enables you style nearly all Streamlit components through a simple extension - no CSS needed.
As always you can explore and try new elements styling & components in st_yled studio on the Streamlit Community Cloud
Welcome and thanks for sharing this update! The st_yled package now offers 5 new UI components—Badge Card, Image Card, Sticky Header, Split Button, and Programmatic Redirect—plus enhanced styling for containers, expanders, and st.metric, all without needing to write CSS. You can try these features interactively in the st_yled studio app on Streamlit Community Cloud, and style most Streamlit elements directly from Python code, making custom UIs and branding much easier and faster to implement. For example, you can now set padding, font weight, and color for many components right in your app code, and even export your theme from the studio for reuse across projects.
If you have ideas for new components or want to see more styling options, the st_yled team encourages you to share your suggestions! For more details and examples, check out the st_yled studio app and the st_yled docs. Community feedback is always welcome, and everyone is encouraged to join the discussion and contribute ideas.
That is precisely the motivations as many data science colleagues find it quite difficult to fiddle with CSS selectors. At least now many CSS properties can directly be set when calling python functions, and there will be more styling options coming in the future
agreed - the styled studio webpage is not optimized for mobile yet.
It is however not necessarily an issue of the sticky header component, more that there is too many buttons for a mobile header which get pushed beyond the header boundaries.
I an responsive web layout the buttons should probably be replaced by a dropdown or hamburger button when the viewports is set on mobile.
I am currently evaluating how responsive layouts could work with Streamlit as part of the st_yled package or another solution.
Probably there will some way of defining breakpoints in the package init, combined with the option to assign different app pages or contains directly to a device.
Anyhow would be great to learn if the community would like to see more option for styling responsive layouts, so any throughts / ideas are very welcome.
The st_yled package now offers 5 new UI components—Badge Card, Image Card, Sticky Header, Split Button, and Programmatic Redirect—plus enhanced styling for containers, expanders, and st.metric, all without needing to write CSS. You can try these features interactively in the st_yled studio app on Streamlit Community Cloud, and style most Streamlit elements directly from Python code, making custom UIs and branding much easier and faster to implement. For example, you can now set padding, font weight, and color for many components right in your app code, and even export your theme from the studio for reuse across projects.
