ViteReactStarter

react-shadcn-starter — Vite Starter Template

By hayyi2

A starter template based on Vite, React, and TypeScript, integrating shadcn/ui, Tailwind CSS, and react-router-dom, with a GitHub Pages deployment workflow.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

React + Vite + TypeScript combination, with Tailwind CSS and shadcn/ui for the UI

02

Built-in react-router-dom, with a single-page application featuring navigation and a responsive layout

03

Includes a customizable /config configuration directory and /pages starter pages

04

Source structure divided into components, context, config, hook, lib, and pages

05

Comes with a GitHub Action that builds and deploys to GitHub Pages

06

Uses the MIT license, allowing free use, modification, commercial use, and distribution

Template Details

This is a starter template for building front-end applications, combining React + Vite + TypeScript, with Tailwind CSS and shadcn/ui for the UI layer and react-router-dom for routing. The README states that it already includes a single-page application with navigation and a responsive layout, customizable `/config` configuration, simple starter pages under `/pages`, and a GitHub Action for deploying to GitHub Pages.

The project structure is organized by responsibility: `src/components` holds React components, `src/context` holds context, `src/config` holds configuration data, `src/hook` holds custom hooks, `src/lib` holds utility functions, and `src/pages` holds page/feature components. Entry-related files are `src/App.tsx`, `src/main.tsx`, `src/Router.tsx`, and `src/index.css`, while the root directory contains `index.html`, `tsconfig.json`, and `vite.config.ts`.

Usage involves pulling the template with `npx degit hayyi2/react-shadcn-starter my-project`, then running `npm install` and `npm run dev`. Deploying to `gh-pages` requires modifying `basenameProd` in `vite.config.ts`, creating a `GITHUB_TOKEN` deployment secret in the repository settings, committing and pushing the code, pointing GitHub Pages to the `gh-pages` branch, and then running the `Build & Deploy` workflow. For automatic deployment, modify `.github/workflows/build-and-deploy.yml`, comment out `workflow_dispatch`, and uncomment `push`.

Regarding licensing, the repository uses the MIT license, allowing free use, modification, commercial use, and distribution of this version of the code. When distributing copies or substantial portions, the copyright notice and the full MIT license notice must be retained; the code is provided as is. Third-party assets such as demo images, fonts, and icons, as well as external services such as domains, hosting, and databases, require separate verification of their respective licenses and fees.

ViteReactStarter

Is it right for your project?

Use Cases

  • Quickly starting a React single-page application using the shadcn/ui component library
  • Front-end projects that need react-router-dom routing and a responsive navigation layout
  • Deploying a static site to GitHub Pages via a GitHub Action
  • As a reference template for learning Vite + React + TypeScript project directory organization

Suitable For

  • Developers familiar with React and TypeScript who want to use shadcn/ui directly
  • Personal projects or demo sites that need a ready-made GitHub Pages deployment process
  • Projects planning to extend interface styles on top of Tailwind CSS

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Pull the template with npx degit hayyi2/react-shadcn-starter my-project, then run npm install and npm run dev

  2. 2

    Before deploying gh-pages, modify basenameProd in vite.config.ts

  3. 3

    Create a GITHUB_TOKEN deployment secret in the GitHub repository settings and point Pages to the gh-pages branch

  4. 4

    For automatic deployment, edit .github/workflows/build-and-deploy.yml, comment out workflow_dispatch, and uncomment push

  5. 5

    The MIT license covers only the code itself; demo images, fonts, icons, and external services require separate license and fee verification

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing covers the free version in the public repository under the MIT license; the free scope is this version of the code and does not mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version of the code are allowed.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Deploying to GitHub Pages requires creating a deployment secret named GITHUB_TOKEN in the GitHub repository settings, which is an external platform account configuration requirement.
  • Before using GitHub Pages deployment, you must manually modify the basenameProd configuration in vite.config.ts, otherwise paths may be incorrect.
  • Enabling automatic deployment requires manually editing .github/workflows/build-and-deploy.yml, commenting out workflow_dispatch, and uncommenting the push trigger.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional fees.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

create deploy key `GITHUB_TOKEN` in github `/settings/keys`

Original README

change `basenameProd` in `/vite.config.ts`

Original README

Comment on `workflow_dispatch` - Uncomment on `push`

Original README
https://github.com/hayyi2/react-shadcn-starter/blob/main/LICENSEhttps://github.com/hayyi2/react-shadcn-starter/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 86 / 100
Technologies
Vite · React
Website type
Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2025-03-19
Screenshot last checked
2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 0ff46e0b605ed09eae9fc849d3ede102eccf5f6e28fcd9c912a2e2cbc9d3ce4c

2026-10-02T18:14:49.624Z

Source file / repository
# React Shadcn Starter

React + Vite + TypeScript template for building apps with shadcn/ui.

## Getting Started

```bash
npx degit hayyi2/react-shadcn-starter my-project
cd my-project
npm install
npm run dev
```

## Getting Done

- [x] Single page app with navigation and responsif layout
- [x] Customable configuration `/config`
- [x] Simple starting page/feature `/pages`
- [x] Github action deploy github pages

## Deploy `gh-pages`

- change `basenameProd` in `/vite.config.ts`
- create deploy key `GITHUB_TOKEN` in github `/settings/keys`
- commit and push changes code
- setup gihub pages to branch `gh-pages`
- run action `Build & Deploy`

### Auto Deploy

- change file `.github/workflows/build-and-deploy.yml`
- Comment on `workflow_dispatch`
- Uncomment on `push`

```yaml
# on:
#   workflow_dispatch:
on:
  push:
    branches: ["main"]
```

## Features

- React + Vite + TypeScript
- Tailwind CSS
- [shadcn-ui](https://github.com/shadcn-ui/ui/)
- [react-router-dom](https://www.npmjs.com/package/react-router-dom)

## Project Structure

```md
react-shadcn-starter/
├── public/            # Public assets
├── src/               # Application source code
│   ├── components/    # React components
│   ├── context/       # contexts components
│   ├── config/        # Config data
│   ├── hook/          # Custom hooks
│   ├── lib/           # Utility functions
│   ├── pages/         # pages/features components
│   ├── App.tsx        # Application entry point
│   ├── index.css      # Main css and tailwind configuration
│   ├── main.tsx       # Main rendering file
│   └── Router.tsx     # Routes component
├── index.html         # HTML entry point
├── tsconfig.json      # TypeScript configuration
└── vite.config.ts     # Vite configuration
```

## License

This project is licensed under the MIT License. See the [LICENSE](https://github.com/hayyi2/react-shadcn-starter/blob/main/LICENSE) file for details.
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

react-starter-kit

react-starter-kit

A full-stack SaaS monorepo starter built on Vite and React, with Bun, TypeScript, tRPC, Drizzle ORM, Better Auth, Stripe, and Cloudflare Workers. It includes email OTP, passkey, Google OAuth, organizations, subscription billing, Drizzle migrations, seed scripts, and Terraform infrastructure.

Vite · SaaS

cove

cove

Cove is a minimal TanStack Start starter template maintained by mugnavo, integrating React, TanStack Router/Query, Tailwind CSS, shadcn/ui, Drizzle ORM with PostgreSQL, Better Auth, Vite Plus, and Nitro.

Vite · SaaS

vite-react-boilerplate

vite-react-boilerplate

A production-ready Vite + React starter template with TypeScript, Tailwind CSS, TanStack Router/Query/Table, Storybook, React Hook Form + Zod, Vitest and Playwright testing, plus Husky/Commitizen/Commitlint commit conventions.

Vite · Starter

react-vite-admin

react-vite-admin

A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.

Vite · Admin dashboard

typescript-react_best_practices-vite_template

typescript-react_best_practices-vite_template

A Vite + React + TypeScript starter template by CodelyTV, preconfigured with Jest and React Testing Library unit tests, Cypress end-to-end tests, ESLint and Prettier using Codely's shared configuration, GitHub Actions workflows, a Makefile, and Sass.

Vite · Starter

cloudflare-starter-kit

cloudflare-starter-kit

A Cloudflare Workers project scaffolding template maintained by kriasoft, using Vite and TypeScript, with three built-in workspaces: api, app, and edge, and preconfigured local testing, multiple environments, and a GitHub Actions deployment workflow.

Vite · Starter