What is the best way to have a 'page' or list of reusable components for your PG project?

I have a ‘Master Page’ for each ‘bare bones’ page in my site - I still can’t get the ‘active’ link working on my offcanvas menu despite having ‘active’ class added and adding my css… but that’s another problem.

What I’m asking here, is I want to create a palette, let’s say, ‘page’ that has a ‘card’, a ‘button’, a ‘text block with heading’, a ‘hero’ or a ‘cta’ component that are styled as I want them. That I can then either ‘drag and drop’ or use the ‘insert component’ button into a page on my site so that I can build my site quicker and more like the WYSIWYG editors.

From my time with PG, that’s what having ‘components’ is all about - my question is how do I create this ‘library’ of components? Do I just make a bootstrap 5 html page and add them to it? Or is there a better/proper way?