https://github.com/aver005/shadcn-vite-template
Шаблон для быстрого старта проектов на React + TypeScript + Vite + ShadCN UI + Tailwind CSS + Lucide Icons. Идеально подходит для создания современных веб-приложений! 🌟
https://github.com/aver005/shadcn-vite-template
lucide-icons lucide-react react reactjs shadcn shadcn-ui shadcnui tailwindcss ts typescript vite vitejs
Last synced: 8 months ago
JSON representation
Шаблон для быстрого старта проектов на React + TypeScript + Vite + ShadCN UI + Tailwind CSS + Lucide Icons. Идеально подходит для создания современных веб-приложений! 🌟
- Host: GitHub
- URL: https://github.com/aver005/shadcn-vite-template
- Owner: Aver005
- Created: 2025-02-12T10:59:12.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-12T11:19:59.000Z (8 months ago)
- Last Synced: 2025-02-12T12:32:31.084Z (8 months ago)
- Topics: lucide-icons, lucide-react, react, reactjs, shadcn, shadcn-ui, shadcnui, tailwindcss, ts, typescript, vite, vitejs
- Language: CSS
- Homepage:
- Size: 43.9 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shadcn Vite Boilerplate
A simple **React** boilerplate with **TailwindCSS**, **ShadCN UI**, powered by **Vite** with a fully configured **TypeScript** environment, pre-configured tools such as **ESLint** and **Prettier** and **OpenGraph** support.
[](https://vercel.com/import/project?template=https://github.com/mxpanf/shadcn-vite-starter) [](https://app.netlify.com/start/deploy?repository=https://github.com/mxpanf/shadcn-vite-starter)
## 🚀 Features
- **TailwindCSS & ShadCN UI** - Easily customize and use components from ShadCN UI.
- **TypeScript Support** - Fully configured TypeScript project.
- **Pre-configured ESLint & Prettier** - Code quality and formatting tools out of the box.
- **Vite-Powered** - Lightning-fast build tool for React projects.
- **ShadCN UI Components** - Rich UI components such as Avatar, Dialog, Slider, Tabs, etc.
- **Optimized for Development** - Ready to go with fast hot-reload and dev server.
## 📂 Project Structure
```
.
├── LICENSE
├── NOTICE
├── README.md
├── components.json
├── eslint.config.js
├── index.html
├── package.json
├── public
│ ├── index.html
│ └── og-image.jpg
├── src
│ ├── App.tsx
│ ├── components
│ │ ├── Button.tsx
│ │ ├── Heading.tsx
│ │ ├── MetaTags.tsx
│ │ └── ThemeToggle.tsx
│ ├── lib
│ │ └── utils.ts
│ ├── main.tsx
│ ├── styles
│ │ └── global.css
│ └── vite-env.d.ts
├── tailwind.config.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
```
## 🛠️ Installation & Setup
### 1. Clone the repository
```sh
git clone https://github.com/aver005/shadcn-vite-template.git
cd shadcn-vite-starter
```
### 2. Install dependencies
```sh
yarn install
```
### 3. Run the development server
```sh
yarn dev
```
### 4. Open the project
Open your browser and navigate to `http://localhost:3000`.
## 🎨 Customization
### Update Meta Tags
For better SEO and social media previews, make sure to update the `` component in `src/components/MetaTags.tsx`:
```tsx
```
> Open Graph Сompatible
> [!WARNING]
> Changes in this section are required for full - fledged integration into final application. Check the markup before publishing, some SEO & OG functions may not work.
### Add New Components
Add new UI components to the `src/components` folder and reference them in `App.tsx`.
## 🔧 Configuration
### TailwindCSS
Tailwind is pre-configured with Vite. You can customize your Tailwind setup by modifying the `tailwind.config.ts` file.
### ESLint & Prettier
This project comes pre-configured with ESLint and Prettier for code quality and consistency. To run ESLint and Prettier:
```sh
yarn lint # Run ESLint
yarn format # Format code with Prettier
```
You can also automatically fix linting issues:
```sh
yarn lint:fix
```
## 📜 License
This project is licensed under the **MIT License**. You are free to use, modify, and distribute this code with proper attribution.
## 🤝 Contributing
Contributions are welcome! Feel free to submit a pull request or open an issue.
## 💡 Acknowledgments
Built with ❤️ using **React**, **TailwindCSS**, **ShadCN UI**, and **Vite**.