DEV Community

How to start a Shadcn project from scratch

To set up a React project from scratch with Tailwind CSS and Shadcn without using a pre-built boilerplate, you can manually configure the setup using Webpack. First, create a new project directory and initialize a new npm project. Then, install React, ReactDOM, Webpack, and other dependencies. Next, install Tailwind CSS and its peer dependencies, and create a `tailwind.config.js` file. After that, create a `webpack.config.js` file to configure Webpack and a `.babelrc` file for Babel configuration. Update the `tailwind.config.js` file to include the paths to your components. Set up your project structure by creating necessary folders and files for your React application. Install the Shadcn package and its components using the Shadcn CLI. Update your `package.json` file to add a start script to run the Webpack development server. Finally, run the development server with `npm start` to see your app in the browser, styled with Tailwind CSS.
favicon
dev.to
dev.to
Create attached notes ...