npm i @tchvan/primereact-theme-sidebar

in file where render <html>: import { ThemeContextProvider } from "@tchvan/primereact-theme-sidebar"

Then wrap this below html:

 <html lang="en">
    <ThemeContextProvider>
    ...
    </ThemeContextProvider>
</html>

in file where to render the Theme Button: import { ButtonAndSidebar } from "@tchvan/primereact-theme-sidebar"

copy node_modules/@tchvan/primereact-theme-sidebar/dist/themes folder in to your public folder

add this line into your <head>, href is your referred start up theme:

 <link id="theme-link" rel="stylesheet" href="/themes/bootstrap4-light-blue/theme.css" />

generate these tailwind class (how to do this better?):

<div className="w-14 h-8 my-4  justify-between font-semibold text-xl gap-4 grid grid-cols-4"></div>
<div className="flex bg-blue-400 bg-indigo-400 bg-purple-400 bg-teal-400 w-40 mt-3 gap-3"></div>

THIS IS NOT TRUE CAUSE: if it says useContext(null) when used <Image></Image>: the (types) folder need to stay inside src folder
