File size: 2,782 Bytes
909a85b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
dfe5dd5
909a85b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4ac90cc
909a85b
 
4ac90cc
909a85b
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
# React + Vite + TypeScript Template (react-vite-ui)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Dan5py/react-vite-ui/blob/main/LICENSE)

A React + Vite template powered by shadcn/ui.

## πŸŽ‰ Features

- **React** - A JavaScript library for building user interfaces.
- **Vite** - A fast, opinionated frontend build tool.
- **TypeScript** - A typed superset of JavaScript that compiles to plain JavaScript.
- **Tailwind CSS** - A utility-first CSS framework.
- **Tailwind Prettier Plugin** - A Prettier plugin for formatting Tailwind CSS classes.
- **ESLint** - A pluggable linting utility for JavaScript and TypeScript.
- **PostCSS** - A tool for transforming CSS with JavaScript.
- **Autoprefixer** - A PostCSS plugin to parse CSS and add vendor prefixes.
- **shadcn/ui** - Beautifully designed components that you can copy and paste into your apps.

## βš™οΈ Prerequisites

Make sure you have the following installed on your development machine:

- Node.js (version 16 or above)
- pnpm (package manager)

## πŸš€ Getting Started

Follow these steps to get started with the react-vite-ui template:

1. Clone the repository:

   ```bash
   git clone https://github.com/dan5py/react-vite-ui.git
   ```

2. Navigate to the project directory:

   ```bash
   cd react-vite-ui
   ```

3. Install the dependencies:

   ```bash
   pnpm install
   ```

4. Start the development server:

   ```bash
   pnpm dev
   ```

## πŸ“œ Available Scripts

- pnpm dev - Starts the development server.
- pnpm build - Builds the production-ready code.
- pnpm lint - Runs ESLint to analyze and lint the code.
- pnpm preview - Starts the Vite development server in preview mode.

## πŸ“‚ Project Structure

The project structure follows a standard React application layout:

```python
react-vite-ui/
  β”œβ”€β”€ node_modules/      # Project dependencies
  β”œβ”€β”€ public/            # Public assets
  β”œβ”€β”€ src/               # Application source code
  β”‚   β”œβ”€β”€ components/    # React components
  β”‚   β”‚   └── ui/        # shadc/ui components
  β”‚   β”œβ”€β”€ styles/        # CSS stylesheets
  β”‚   β”œβ”€β”€ lib/           # Utility functions
  β”‚   β”œβ”€β”€ App.tsx        # Application entry point
  β”‚   └── index.tsx      # Main rendering file
  β”œβ”€β”€ eslint.config.js     # ESLint configuration
  β”œβ”€β”€ index.html         # HTML entry point
  β”œβ”€β”€ postcss.config.js  # PostCSS configuration
  β”œβ”€β”€ tailwind.config.ts # Tailwind CSS configuration
  β”œβ”€β”€ tsconfig.json      # TypeScript configuration
  └── vite.config.ts     # Vite configuration
```

## πŸ“„ License

This project is licensed under the MIT License. See the [LICENSE](https://choosealicense.com/licenses/mit/) file for details.