DEV Community

OpenSource
OpenSource

Posted on

How to start a Shadcn project from scratch

To set up a project from scratch using React, Tailwind CSS, and Shadcn, but without using any pre-built boilerplates like create-next-app or create-react-app, you can manually configure the setup using Webpack or other similar bundlers. Below is a guide for setting this up with Webpack:

Step 1: Initialize an npm Project

Create a new project directory and initialize a new npm project:

mkdir my-shadcn-app
cd my-shadcn-app
npm init -y
Enter fullscreen mode Exit fullscreen mode

Step 2: Install React and Dependencies

Install React, ReactDOM, webpack, and webpack-dev-server:

npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin
Enter fullscreen mode Exit fullscreen mode

Step 3: Install Tailwind CSS

Install Tailwind CSS and its peer dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

This creates the tailwind.config.js file.

Step 4: Configure Webpack

Create a webpack.config.js file for configuring Webpack:

touch webpack.config.js
Enter fullscreen mode Exit fullscreen mode

Inside webpack.config.js, add the following:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: './dist',
    hot: true,
  },
};
Enter fullscreen mode Exit fullscreen mode

Step 5: Configure Babel

Create a .babelrc file for Babel configuration:

touch .babelrc
Enter fullscreen mode Exit fullscreen mode

Inside .babelrc, add the following:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
Enter fullscreen mode Exit fullscreen mode

Step 6: Configure Tailwind CSS

Update your tailwind.config.js file to include the paths to your components:

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Step 7: Set Up Your Project Structure

Create the necessary folders and files for your React application:

mkdir src public
touch src/index.jsx src/App.jsx src/index.css public/index.html
Enter fullscreen mode Exit fullscreen mode

public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Shadcn App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

src/index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(<App />, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode

src/App.jsx:

import React from 'react';

const App = () => {
  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold">Hello Shadcn!</h1>
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Step 8: Install Shadcn Components

Now that you have the basic setup, install the Shadcn package and its components. Install the Shadcn CLI and Tailwind components for your React project:

npx shadcn-init
Enter fullscreen mode Exit fullscreen mode

Follow the on-screen instructions to install components and generate the Shadcn library for your project.

Step 9: Update npm Scripts

Update your package.json to add a start script to run the Webpack development server:

"scripts": {
  "start": "webpack serve --open"
}
Enter fullscreen mode Exit fullscreen mode

Step 10: Start the Development Server

Run the development server with:

npm start
Enter fullscreen mode Exit fullscreen mode

This should open up your app in the browser, and you'll see "Hello Shadcn!" styled with Tailwind CSS. You can now continue adding Shadcn components to your React project.

(Generated with AI assistance)

Top comments (0)