GitHub - src-thk/ding-dong: A modern template built with React 19, RSpack, Tanstack Router and Query, Tailwind CSS v4, and shadcn/ui components.

A modern template built with React 19, RSpack, Tanstack Router and Query, Tailwind CSS v4, and shadcn/ui components. - src-thk/ding-dong

Summary

Ding Dong is a starter template for React 19 applications, bundling Rspack, TanStack Router, TanStack Query, Tailwind CSS v4, and shadcn/ui in a TypeScript project. It provides a pre-wired project structure with type-safe routing, server-state management, and a component library so engineers can skip the initial configuration work. The repository is intended as a foundation for new React projects rather than a runnable application on its own.

What it is useful for

This template is useful when you need to bootstrap a new React 19 project and want the choices for build tool, router, data layer, styling, and UI primitives already made and integrated. Concretely, it is helpful for:

• Starting a new SPA or SSR-ready React app where you want type-safe routing without setting up TanStack Router's file-based generator yourself
• Projects that need server-state caching and synchronization, since TanStack Query is pre-installed
• Building UIs quickly with shadcn/ui primitives (built on Radix UI) and Tailwind v4 utility classes
• Teams that prefer pnpm for dependency management

The shipped project structure includes src/routes/ for route files (with example about.tsx and index.tsx pages), src/components/ui/ for shadcn components, src/lib/utils.ts for shared helpers, and configuration files for Rsbuild (rsbuild.config.ts), PostCSS (postcss.config.mjs), and shadcn (components.json).

Limitations to be aware of: the README's clone command contains a literal placeholder <repository-url>, so you would need to use GitHub's "Use this template" feature or replace it with the actual URL. The documented scripts are limited to dev, build, and preview — the README does not document a test or lint command.

How engineers can use it

The README documents the following workflow:

1. Clone the repository or use it as a GitHub template, then cd ding-dong-template
2. Install pnpm if you don't have it (npm install -g pnpm), then run pnpm install
3. Start development with pnpm run dev, which runs the Rsbuild dev server with HMR
4. Produce a production build in dist/ with pnpm run build
5. Preview the built output locally with pnpm run preview

After setup, the next concrete step is to edit src/routes/__root.tsx, src/routes/index.tsx, and src/routes/about.tsx to define your own pages, and to add shadcn components into src/components/ui/ as your UI grows. If anything is unclear, refer to the README's "Getting Started" and "Project Structure" sections for the canonical walkthrough.