This is a boilerplate code that is all set to be used, routing powered by React Router.
- shadcn/ui docs to use for future reference.
- tailwind css docs to use for future reference.
- Download the zip by clicking on the green
Codebutton and then clicking Download. - Extract the downloaded files in your desired location.
- Open Command Prompt in that folder or you can use VS Code's integrated terminal as well {for that you have to first open the folder in VS Code}
- run
npm install - run
npm install -D @types/nodein case if its not installed for some reason, if it is then ignore this step. - Development environment is all set, you can now run the dev server by running
npm run dev - Now start building your application.
Let us see how this code has been setup:
- Just like any other React App, this uses
srcfolder as the root folder for our app so that our root files are separate from our app files. - In your vite configuration file, which is in
vite.config.js, you'll see an import alias that has been set which helps us to make the imports look clean. It looks like this.
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},,- If you want to configure your Tailwind CSS setup for the app, you can check the
tailwind.config.jsfile. - Please take a look at the
components.jsonfile which holds the configuration for our shadcn/ui library just in case you want to change something. - Global CSS file is set to
src/index.css. You can modify the color codes and other stuff in there to theme the application according to your need. src/assetswill hold your app assets.src/componentswill hold all your app components both from shadcn/ui and your custom components.src/libwill hold your helper files and other config files.src/pageswill hold your all the pages that the app might contain.