Hello everyone :waving_hand: I’m happy to announce the release of Streamlit Elements :tada: This component will allow you to create beautiful applications with Material UI, Nivo charts, with hotkeys and callbacks support, and with even more other widgets and features. In addition, you will be abl…

I installed streamlit-elements to make a dashboard. But I don’t know how to use custom font with streamlit-elements. Even if you apply a custom font to streamlit itself, it will not be reflected in streamlit-elements parts. How can I use custom fonts with streamlit-elements?

[image] Hello Gaku. Yokoyama, is this what you want? import streamlit as st from streamlit_elements import elements, mui with elements(key='test'): mui.Typography( 'Hello Gaku. Yokoyama, is this what you want?', sx={'font-family': 'serif'} # 'fantasy' 'cursive' )

[image] lkdd-ao: 'serif'} # 'fantasy' 'cursive' Thanks for the advice. I tried that too. ‘serif’, ‘fantasy’ and ‘cursive’ seem to be set to be used in streamlit-elements (mui?). I want to use a font found on goggle fonts. Even if I add a font so that it can be used with streamlit, it see…

[35FF8668-3814-4384-8A68-1B676AAD4340] I understand, now it should be what you want. :blush: import streamlit as st from streamlit_elements import elements, mui, html with elements(key='test'): with html.head(): html.link(rel='stylesheet', href='https://fonts.googleapis.com/css?family…

Wonderful. Exactly what I wanted. Thank you.

Did you found a solution to use streamlit and other plotting packages like ploty or altair in the dashboard

Hello Could you please help an example like this please: I would like to put multiple st-annotated-text items inside dashboard component and achieve drag and drop like function. Could anyone please help. Desperately looking for some help/direction Thanks Sai

Hi @okld , I’m trying to use your component and create the List from mui components. I’m not sure how to use it and pass necessary list of items into elements, and also images. Could you please suggest me how to approach the List element with diff kind of list types described in Mui Documentation? …

Hi @Dusan_P , This is how I did it for a streaming message queue I was creating: with elements("new_element"): with mui.Paper(key = 'some_key') with mui.List(dense = True): with mui.ListItem(key = item_idx, divider = True): mui.ListItemIcon(mui.icon.CheckCir…

✨ Streamlit Elements - Build draggable and resizable dashboards with Material UI, Nivo charts, and more!

Custom Components

121810403020_VINUKON September 2, 2023, 1:01pm 72

I want to develop this type of dashboards, Just want to see for reference. But I couldn’t able to open this link, Could you please help me?

Topic		Replies	Views
New tomj0311/streamlit_mui_elements Streamlit App Show the Community! session-state , streamlit-elements , ui , button-animation	1	112	June 9, 2025
Streamlit Elements Problem Custom Components	3	1860	April 5, 2024
Streamlit Components - Community Tracker Custom Components discussion	80	72896	February 20, 2026
New Component: Streamlit-antd-components，more widgets to extend streamlit! Custom Components components	61	12607	February 28, 2026
My first Cyberpunk Base UI! 🐄 - Thank you Streamlit team! Show the Community!	0	90	February 26, 2026

✨ Streamlit Elements - Build draggable and resizable dashboards with Material UI, Nivo charts, and more!

Related topics