xg's Introduction

React Shadcn Starter

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

Getting Started

git clone https://github.com/hayyi2/react-shadcn-starter.git new-project
cd new-project
npm install
npm run dev

Getting Done

Single page app with navigation and responsif layout
Customable configuration /config
Simple starting page/feature /pages
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

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

Features

React + Vite + TypeScript
Tailwind CSS
react-router-dom
shadcn-ui
radix-ui/icons

Project Structure

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