Skip to main content

​
Prerequisites

Before you start, make sure you have the following installed:
  • Node.js 18 or later
  • npm (included with Node.js)

​
Get the template

You have two ways to start a new project from this template: 
gh repo create my-app --template R0N7w7/vite-ts-react-tailwind-shadcn-router-template --clone
cd my-app
You can also click Use this template on the GitHub repository page to create a new repo under your account without the original git history.

​
Run the app

1

Install dependencies

npm install
2

Start the dev server

npm run dev
Vite starts a local server at http://localhost:5173 with hot module replacement enabled. Changes to any file in src/ are reflected instantly in the browser.
3

Open the app

Navigate to http://localhost:5173 in your browser. You should see the home page of the template app.

​
Build for production

1

Compile and bundle

npm run build
This runs tsc -b to type-check the project, then bundles everything with Vite (powered by rolldown-vite). Output goes to the dist/ directory.
2

Preview the production build

npm run preview
Serves the dist/ directory locally so you can verify the production build before deploying.

​
Lint the codebase

npm run lint
Runs ESLint with rules for React hooks, TypeScript, and React Refresh across all source files.

​
What you get

After setup, you have a fully working app with the following structure:

​
Three pages

The router is configured with three pages under a shared layout:
RouteComponentFile
/HomePagesrc/pages/HomePage.tsx
/featuresFeaturesPagesrc/pages/FeaturesPage.tsx
/aboutAboutPagesrc/pages/AboutPage.tsx
The routing is defined declaratively in src/routes/AppRoutes.tsx:
src/routes/AppRoutes.tsx
const AppRoutes: RouteObject[] = [
    {
        path: '/',
        element: <Layout />,
        children: [
            { index: true, element: <HomePage /> },
            { path: 'features', element: <FeaturesPage /> },
            { path: 'about', element: <AboutPage /> },
        ],
    },
];

​
Shared layout

All pages render inside the Layout component (src/components/Layout), which provides a consistent navigation bar and footer. Child pages are injected via React Router’s <Outlet />.

​
UI components

The template includes three shadcn/ui-style primitives built on Radix UI and styled with Tailwind CSS:

Button

Accessible button with variants powered by class-variance-authority.

Card

Container component for grouping related content.

Input

Styled text input with full TypeScript props forwarding.

​
Path aliases

The @ alias resolves to the src/ directory, so you can import from anywhere without relative path traversal:
vite.config.ts
resolve: {
  alias: {
    "@": path.resolve(__dirname, "./src"),
  },
},
example usage
import { Button } from "@/components/ui/button";

​
Next steps

Project structure

Understand how the template is organized.

Adding pages

Add new routes and pages to the app.

UI components

Explore the included shadcn/ui primitives.

Customizing styles

Extend or override Tailwind CSS styles.

Build docs developers (and LLMs) love

Get started for freeTalk to us