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

16 Likes
2

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

3 Likes
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

3 Likes
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 Likes
5

Haha :joy:
Sure

1 Like
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.

2 Likes
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

1 Like
8

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

Thanks,
Arvindra

3 Likes
9

Thank you for creating this ! Kudos

2 Likes
10

Thanks @arky and welcome to the community🎈

1 Like
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.

1 Like
12

Hi,

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

You can check it out.

Thanks,
Akshansh

1 Like
13


BeyondMyself活跃用户

1 分钟

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

1 Like
14

Oh, okay

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

Thanks,
Akshansh

1 Like
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?

1 Like
16

Hi @Shikun_Chen,

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

Akshansh

1 Like
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

2 Likes
18

Thank you. I will learn it carefully.

1 Like
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

1 Like