Today we're going to have a look at how we can build custom components in Streamlit using React and external libraries like Material UI. So there are already plenty of components that you can use directly from Streamlit and also from the Streamlit community but obviously you may find something to use something that doesn't already exist.

So we'll go through that process fortunately it's not too difficult it does require a little bit of like front end code but Streamlit does make it pretty straightforward. So let's have a quick look at what this card might look like or this component is a card. So all we have for our custom component is this little card in the middle here.

The rest of this is just Streamlit and then this bit here is based on a Material UI component. So if I go back we just have a title, subtitle, text or body of text and a link here which is a Material UI button. Click on it and for now let's just take this to Google.

But we can essentially like an object in Python we can pass whatever values we like to this component. So here are the actual cards from Material UI that we're basing this on and with these cards we can include much more than what I've shown you this is just the absolute basics like we can include these little profile images, drop-downs, options and so on even little expanders, pictures.

So yeah there's a lot we can do with it and as far as I know there isn't anything like this available directly within Streamlit. So let's go ahead and set up our environment for developing this component. So if you are on Mac and you have homebrew installed you can just go to brew, install node and this will install node.js and the node package manager.

I already have it installed so I'm not going to rerun it. If you are not on Mac or you don't have homebrew you can download it from the node.js website. So over here this here node.js.org and then download. Okay you have Windows, Mac and so on. So once you have that installed you also need to install Streamlit.

I'm going to assume you already have it installed but if not you just pip install Streamlit. Now I have Streamlit in another environment so I'm going to activate that. I'm going to activate Streamlit and the Streamlit side of things I will run from this terminal window. Now to build our component for Streamlit we need to follow a certain structure and fortunately Streamlit provides us with a few templates that we can start from to make our lives a little bit easier.

So let me show you where you can find those. So if we just type in Streamlit GitHub or maybe we can go Streamlit components template. It's probably easier. Click on here. Okay we have a Streamlit component template repo. We just want to git clone this so we click on code over here, copy this and then switch back to our terminal.

Navigate to whatever folder you're going to store the template folder within. So I'm going to go to documents, projects and I'm just going to write git clone and then I'm going to clone the component template repository. Okay let's open that VS Code and we'll have a look at what we have in here.

Okay so on the right over here we have our directory structure. We have a few different templates so we're going to go this template here which uses react and within this template directory this is our actual project so we can almost ignore the rest of this stuff here. Just anything within template is what we care about.

We have set up Pi so we're going to use this and manifest for creating a pip package which will contain our components. So to actually use that component we install our component and then we just import it into our streamlit app script or app.py usually and then use it and within here we just have the default file names here or default directory names of my component we're going to change some of these inside.

Here we have init.py so that's where we're initializing our streamlit server or app from. We'll go through that it's fine. We have this front end which is anything in here is the react side of things so if we go a little further we have some styling the index and then in here we have these TSX files okay.

So in here we're using TypeScript so if you know TypeScript it's really good if not it's not too much different from Python I mean it's fairly different but it's not unbelievably different so I think if you know Python probably read this at least and kind of follow what we're doing but I also don't really know TypeScript I'd like to just get through putting something simple together with this.

So most of the work we're gonna do is going to be my component TSX but we are going to modify a lot of these files as well. So first let's rename everything because everything at the moment is using default names and we obviously are building a custom component we want to give our own name that makes it a little more identifiable.

So we'll start by going to my component up here and rename that to STCardComponent. So ST just streamlet CardComponent. Down here we have my component going to rename that to CardComponent. Basically anywhere that we have my component we modify to CardComponent we update these imports. Okay so inside CardComponent here if we just find and replace so find my component and replace that with CardComponent.

Place all of those see if we have anything for my component. No okay. Save that and let's have a look at the index. I think we also have something here just just my component here. Okay and replace those. So we have everything in there and in set of pi we also want to update the name here.

So this will change it to Streamlet CardComponent. Okay so this defines it for our package later on and it's actually sorry so this should align with the directory folder that we have here. So not Streamlet but ST. And in our manifest here we also need to update this to be STCardComponent.

So this needs to point to the front end /build. We don't have the build directory yet but we will. So that needs to go STCardComponent. Okay so that should pretty much be everything we need to rename. Maybe other little bits are actually in knit. Here we also want to change this to STCardComponent.

So here STCardComponent. Anything else? Okay now that's good. So let's go ahead and actually initialize the current or the basically default other than the things we've renamed version of this component and see how that looks. So we'll go to and here we have the component template. Inside there's a template.

So yeah template and then we have STCardComponent. So in here we also front-end directory and inside here we have all of our packages and everything. So like the node side of stuff. So first first things we need to do is actually install the node packages we need for our component.

So to start we just do npm install and let's just try to install everything from this package.json file. So run that. It might take a moment so just give it a second. Okay so that's done and next thing we want to do is install the node packages that are required specifically for the card that we're going to build.

So these are all the node packages we've just installed. They're extremely to function like the core of the packages that we need but because we are using this material UI card thing we need a few extra things. So we need to npm install again. This is kind of similar to like a pip install.

Although specific to this directory. Okay so when we pip install, we install them to our Python environment. In this case it's almost like the environment is this directory in this project or react project. So npm install. We need a mui material, mui icons material, icons material, motion react and also in motion styled.

Now I think this is probably going to give us an error. I see. Okay so yes we get this error. We have a dependency conflict with I think I remember correctly. Yeah so we have a stream component template and this throws some dependency conflicts with the mui material stuff.

So it's annoying but we can just get around it by adding this legacy peer depths. Now I haven't I've been playing around this I haven't noticed any issues pop up from using this legacy peer depths but obviously you just need to be aware like don't just throw it in there all the time.

But in this case it seems to work fine. Okay so with that we can we should be able to run everything. So let's go ahead and do that. First thing we want to do is so we're going to run two things here. We're going to run within this front-end directory we write npm start.

This is going to initialize or execute the server that hosts our react component and then we also need to open another terminal window. We also need to navigate to our template directory so cd documents projects it is component template templates. Okay cd template and in here we have stcard component.

Okay we have this initpy. Initpy is like a what it's not exactly that but whilst in development it is just like a template app for just running and testing our component. So we just write streamlit run init.py. So previous videos you've probably seen me write streamlit run app.py. This is kind of acting as our app.py whilst we're in the development stage but once we switch to a release version this initpy we will modify a little bit and it will not be for doing this streamlit run.

It will do something slightly different. It will extract everything from a compiled build distribution. So now we have these we're hosting two servers. We have this localhost 3001. If we if we go over there open that we're going to see nothing. So this is just hosting our react component but a react component by itself doesn't actually show anything.

So we actually need to go over and open the streamlit localhost. So that is in 8.5.0.1 Okay and now we have this like template component. So we can click here and it updates this basically. Maybe you can change this. Enter. Yeah we get this. Okay so that's cool but obviously we want to build a custom component and we'll go ahead and we'll do that in the in the next video.

For now I think we'll leave it there. We've sort of set up the environment. We've started running the default component and I think that's good enough now and yeah in the in the next video we'll be able to really focus on actually building the component itself which means we're going to be toying with code over in Card Component TSX quite a bit and clean this up and yeah creating our card.

So I hope that's been useful. Thank you very much for watching and I will see you in the next one.