React-Tailwind-Shadcn-Template Tailwind Templates

React Tailwind Shadcn Template

Vite-React-Tailwind-Shadcn Template

This repository serves as a template for kickstarting projects using Vite, React, React Router DOM, Tailwind CSS and Shadcn. The template includes pre-configured routes and basic pages to help you quickly set up and start building your application.

Features

  • Vite: Lightning-fast development environment.
  • React: Modern library for building user interfaces.
  • React Router DOM: Pre-configured routes for navigation.
  • Tailwind CSS: Utility-first CSS framework for rapid styling.
  • Shadcn: Beautifully designed components built with Radix UI and Tailwind CSS

Getting Started

Prerequisites

Make sure you have the following installed on your machine:

Installation

  1. Create a new folder for your project and navigate into it (Replace with the name of your actual project):

    mkdir <Your-Project-Name> && cd <Your-Project-Name>
    
  2. Clone the repository:

    git clone https://github.com/ARK018/React-Tailwind-Shadcn-Template.git
    
  3. Install dependencies:

    npm install
    

    or

    npm i
    
  4. Remove the Existing Git Repository if you want to create a new one. (Optional):

    rm -rf .git
    
  5. Start the development server:

    npm run dev
    
  6. Open your browser and navigate to http://localhost:5173 to see the application in action.

Available Scripts

  • npm run dev: Start the development server.
  • npm run build: Build the application for production.
  • npm run preview: Preview the production build.

Routing

The project uses React Router DOM for routing. You can easily add new routes by creating new components in the pages folder and updating the App.jsx file.

Example Routes

  • Home Page: /
  • SignIn Page: /signin

Tailwind CSS

Tailwind CSS is pre-configured in the project. You can start using utility classes directly in your components. The index.css file includes the necessary setup.

Top categories

Loading Svelte Themes