New Component: st-card for displaying KPI metrics in your apps

Custom Components
1

Hi,

I just finished creating a card component for streamlit,
It also supports delta values and progress bars,

st-card demo

pip install st-card

from st_card import st_card
st_card('Completed Orders', value=76.4, show_progress=True)

Hoping to see some cool apps built with this

Thanks,
Akshansh

Open in Streamlit GitHub

2

Ah, this is so cool @akshanshkmr ! Thank you :grinning:
I’ll make sure to use it !

3

That’s a lovely and useful new component (another one! :raised_hands:)

Thanks for creating it and sharing it with the community, Akshansh! :pray:

Best,
Charly

4

Nice!

Could you add your component to the tracker :smiley: Streamlit Components - Community Tracker - Show the Community! - Streamlit ? So w don’t lose it in the forum?

Thanks, one day I should build a Discourse bot for this :rofl:

Fanilo

5

Haha :joy:
Sure

6

Awesome @akshanshkmr, the card looks really cool.

May I make a suggestion: is there a way to change the card’s background colour?

Thank you for this lovely component.

7

Hi @Shawn_Pereira

I made the background colour dependent on the app theme, but surely i can add an argument for it in the next version.

Thanks for the suggestion,
Akshansh

8

@akshanshkmr - Nice to see you having loads of fun Streamlitin’ :100: Great component.

Thanks,
Arvindra

9

Thank you for creating this ! Kudos

10

Thanks @arky and welcome to the community🎈

11

Hello, can you make a serious tutorials to teach us to make streamlit component and publish them.
more simple will be more popular.
Thank you.

12

Hi,

Streamlit’s youtube channel has a great 2 part series on this very topic.

You can check it out.

Thanks,
Akshansh

13


BeyondMyself活跃用户

1 分钟

I had saw that, it is not easy for me to understand that.
I hope we can have more simple tutorials.

14

Oh, okay

Maybe @Charly_Wargnier can pass on the feedback to the dev team.

Thanks,
Akshansh

15

how can we control the digits of decimal values? If I want to show a value of 2.1322, how can we do that?

16

Hi @Shikun_Chen,

This is not currently supported, I can implement it in the next version
Thanks for the suggestion

Akshansh

17

Hey @BeyondMyself you can also try https://streamlit-components-tutorial.netlify.app/ .
Maybe if we were to make a more specific components tutorial, what resonates with you and what needs more clarity for you in those tutorials?
Fanilo

18

Thank you. I will learn it carefully.

19

Hey @akshanshkmr,

This component is something I have been waiting for a long time.
I once implemented something similar. The challenge is
to make it stackable with other streamlit components as well.
For example, could you include a ‘st.image()’ as a value?
Just a suggestion you could consider :slight_smile: .

EDIT:
I totally forgot to mention that return events from on_click on/in elements of the card would be
something wanted to!

Best regards
Chris

20

Thanks for the suggestions chris,
I’ll definitely experiment apong these lines

Thanks,
Akshansh