One big plus of using Streamlit is how simple it
is. Yet, that simplicity comes with a downside - there aren't many styling options available.
All the UI elements, like sliders, date pickers, and select boxes, they all look the same. So, I
was looking around and found a cool package that lets you use Shadcn components in Streamlit. What
that is and how to use it is what I will show you in this video. But to give you an idea of how it
looks, I've created this sample dashboard for you. So, you'll notice that the elements look different
from the typical Streamlit style. And in my opinion, it looks pretty clean and professional.
So, if you want to implement the same style in your Streamlit app, then stick around.
First off, let me quickly explain what Shadcn is. In a nutshell, Shadcn is a collection of
beautifully designed, accessible, and customizable React components that you can use to build modern
web applications with Next.js. So, it is mainly used by front-end developers. And on the official
shadcn page, you can see some examples. You will notice that his dashboard looks pretty similar to
the one I created. That's because there's actually a package that lets you use those components in
your Streamlit app. I will, of course, link the GitHub repo of the package in the description
below. To get started, you just need to copy this command and run it in your command prompt or
terminal. Once installed, let me grab this sample code. On my desktop, I have already prepared an
empty Python file. So, let me open it up and paste the code in here. With that in place, we can now
spin up our app. Alright, so now we have a button, and when I click on it, we get this cool Alert
dialog. Of course, there are many other elements available. Here on the following page, you can
see all examples and how to implement them. Once again, you can find the link in the description
below. I will not go through all the examples here, but let me scroll through the page so that
you get an idea of what the different elements look like. Here, on top, you can see the tabs
element, which I also used in my dashboard; below that, we have a beautiful date picker, a nice
data table, a button, a slider, text input boxes, and a couple more elements. On the left, you will
find the documentation on how to implement those elements. Let's say you are interested in the
Metric card. To get started, just copy the sample and paste it into your text editor. You will
notice the syntax is pretty straightforward. You just need to import the streamlit_shadcn_ui
package, and then you can use the different elements within your app. So, when I go back to my
page and refresh it, we can see our metric cards. Now, to give you a more real-life example, I've
put together the following dashboard for you, which I showed you in the intro. It's
actually fully functional. On top, you can see the total sales by city and also
a comparison to the previous year. Below that, we have the tab element to group sales either
by month or product category. Then, you can also select the city and decide if you want to switch
to the previous year's sales view. Now, I might actually make a separate video to give you a full
walkthrough of the code and explain everything in more detail. However, in this video, I will keep
my explanation brief. After the imports, I've created a small section for some configurations
and also the URL to the dataset. By the way, feel free to use this dataset to play around with
it. It's just some dummy sales data chatGPT and I put together. It's hosted on GitHub. And you
guessed it already, but you can find the link to it in the description box as well. So, after
the configurations, I wrote a function to read in that data and add a month and a year column to it.
Also, I am using here a caching decorator, so that my app is more responsive when filtering the data
later on. Then, I am calculating the total yearly revenue for each city and year. And like we have
seen earlier, I am using the metric card here. Below the metrics, I am using the tab element
to switch between the monthly view and sales by product category. Afterwards, I used the select
component to choose a city, and after that, I also included a toggle switch to switch to the previous
year's view. Alright, and then in the last part, I am just filtering my data based on the selection
I have made above. As a result, I will now have my filtered data, which I now need to plot. You
can use a standard Streamlit bar chart for that, however, I wanted to have rounded corners for
the bars, so that's why I am using a Vega-Lite chart here. This block of code just defines
how the chart should look. To actually plot it, I am embedding the chart in a card container. And
that's basically it. As I said, I might actually make a separate video to go into more details
of the actual code. Okay, and before you go, let me also point out some current limitations
of the package. My initial idea was actually to create a dashboard in dark mode. However, I
noticed that the dark theme is not yet fully supported. For example, the toggle here is pretty
hard to see. And if you open the select box, you will notice the white space around the
selection items. So, for now, it seems to me that it only works with the light theme of Streamlit.
So, keep that in mind when you are using that package. Okay, and with that said, thanks for
watching, and I will see you in the next video.
