Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xeven777/vite-shadcn-template
Vite + Shadcn template. with theme changer too! Perfect Frontend combo 😎⚡
https://github.com/xeven777/vite-shadcn-template
react shadcn shadcn-ui shadcn-ui-starter vite vitejs
Last synced: 6 days ago
JSON representation
Vite + Shadcn template. with theme changer too! Perfect Frontend combo 😎⚡
- Host: GitHub
- URL: https://github.com/xeven777/vite-shadcn-template
- Owner: Xeven777
- Created: 2024-06-12T09:02:30.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-21T10:12:54.000Z (7 months ago)
- Last Synced: 2024-11-07T09:43:18.236Z (about 2 months ago)
- Topics: react, shadcn, shadcn-ui, shadcn-ui-starter, vite, vitejs
- Language: TypeScript
- Homepage:
- Size: 60.5 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ViteTS + Shadcn : Starter Template for Building Web Apps with ❤️
ViteTS + Shadcn is a minimal, yet powerful starter template for building web applications using Vite, React, Tailwind CSS, Shadcn with Type safety. It's optimized for speed, developer experience, and SEO.
## Features ✨
- **Vite ⚡**: Enjoy a lightning-fast development experience with Vite's out-of-the-box Hot Module Replacement (HMR).
- **React**: Build your UI with the latest version of React.
- **Tailwind CSS**: Style your application with utility-first CSS framework Tailwind CSS.
- **TypeScript**: Improved Typesafety!
- **Shadcn UI**: Use Shadcn UI components to speed up your UI development.
- **ESLint**: Keep your code clean and consistent with ESLint.
- **Lucide Icons**: Decorate with Lucide-icons
- **SEO Optimized**: Meta tags, OG tags, and descriptions are all set up for you.
## Getting Started
Follow these steps to get the project up and running:
1. **Clone the repository:**
Run the following command to create a shallow clone of the repository:
```sh
git clone --depth 1 https://github.com/Xeven777/vite-shadcn-template
```
This will create a new directory named `vite-shadcn-template` in your current directory.
2. **Remove the old `.git` directory and initialize a new one:**
Navigate to the new `vite-shadcn-template` directory and run the following commands:
```sh
cd vite-shadcn-template
rm -rf .git
git init
```
3. **Install the dependencies:**
Run the following command to install the project dependencies:
```sh
npm install
```
4. **Start the development server:**
After installing the dependencies, start the development server by running:
```sh
npm run dev
```
Now, you should be able to see the application running at `localhost:5173` in your web browser! ✨
#### You can also download the code as Zip or use it as a template.
## Project Structure
- `src/`: This directory contains all the React components and CSS for the application.
- `App.jsx`: The main component that wraps the entire application.
- `index.css`: Global styles for the application.
- `main.jsx`: The entry point for the application.
- `home/`: This directory contains the Home component.
- `about/`: This directory contains the About component.
- `components/`: This directory contains reusable components like `Tag.jsx`.
- `public/`: This directory contains public assets that can be referenced in the HTML.
- `index.html`: The main HTML page that is served when someone visits your site.
- `package.json`: This file lists the packages your project depends on and specifies versions of a package that your project can use using semantic versioning rules.
- `vite.config.js`: This file contains configuration for Vite.
- `tailwind.config.js`: This file contains configuration for Tailwind CSS.
- `.eslintrc.cjs`: This file contains configuration for ESLint.
- `postcss.config.js`: This file contains configuration for PostCSS.
### Contributing
Contributions are welcome! Please feel free to submit a Pull Request.