Complete front-end configuration with Next.js App Router, React, TypeScript, shadcn/ui and TailwindCSS preconfigured
Next.jsReactHTMLCorporate WebsiteStarter
next-ts-shadcn-ui — Next.js Business Template
By doinel1a
A TypeScript starter template based on the Next.js App Router, preconfigured with shadcn/ui, TailwindCSS, TanStack Query, theme switching and Playwright testing, for quickly building corporate websites, landing pages or single-page applications.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
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-03View source
What stands out
A quick read of the recorded project description.
Built-in next-themes light/dark theme switching, plus basic page components such as a navigation bar, footer and GitHub corner badge
Integrated TanStack Query for server state management, with development tools configured
Environment variable validation using Zod and the T3 Env pattern, with support for skipping validation via SKIP_ENV_VALIDATION
Includes Playwright end-to-end testing, ESLint, Prettier, Husky and Commitlint and other code quality tools
Provides npm scripts such as dev, build, preview, typecheck, lint, format and test
Template Details
This is a starter template for front-end projects. The repository is named next-ts-shadcn-ui, maintained by doinel1a, and licensed under MIT. Its purpose is to eliminate the repetitive configuration work before starting a new project: Next.js App Router, React, TypeScript, shadcn/ui, TailwindCSS, as well as ESLint, Prettier, Husky, Commitlint and other tools are pre-wired so developers can go straight to writing components.
The template includes a basic page structure, including a root layout and home page, a navigation bar, a footer, a GitHub corner badge and an example interactive component counter; the components directory distinguishes between providers and ui, and the style entry is TailwindCSS's globals.css with an accompanying SCSS override file. At the feature level, it integrates next-themes for light/dark theme switching, TanStack Query for server state management, environment variable validation with Zod and the T3 Env pattern, and Playwright end-to-end testing.
There are some clear prerequisites for use: Node.js 24 or higher is required, or Bun can be used as an alternative runtime; the default package manager is pnpm, but npm, yarn and bun are also supported; when switching, you need to delete the pnpm lock file and reinstall according to the instructions. By default, environment variables only validate NODE_ENV; other variables must be added in src/env.ts following the T3 Env pattern; setting SKIP_ENV_VALIDATION=true skips validation, which is useful for Docker builds. The template itself does not include a backend, database or deployment configuration, and third-party assets such as demo images, fonts and icons in the repository need to be checked separately under their respective licenses.
Next.jsReactHTMLCorporate WebsiteStarter
Is it right for your project?
Use Cases
- Quickly starting a corporate website or product landing page that needs TypeScript and component library support
- Building the front-end skeleton of a single-page application or web app, then integrating business logic as needed
- Using it as a starting repository for a team's unified front-end engineering standards, reusing the configured lint, formatting and commit hooks
- In projects with existing shadcn/ui experience, directly adopting its component and theme system
Suitable For
- Front-end developers familiar with the Next.js App Router and TypeScript
- Corporate website or landing page projects that need a ready-made UI component library and theme switching
- Teams that want to unify code checking, formatting and Git commit standards
- Projects willing to use any of pnpm, npm, yarn or bun as the package manager
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js 24 or higher, or Bun can be used as an alternative runtime
- 2
After cloning the repository, run the install command for your chosen package manager; pnpm is used by default
- 3
The development server is started via the corresponding script such as npm run dev, accessible by default at localhost:3000
- 4
By default, environment variables only validate NODE_ENV; other variables must be added in src/env.ts following the T3 Env pattern
- 5
When switching from pnpm to another package manager, delete pnpm-lock.yaml first and then reinstall dependencies
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean that external services or third-party assets are free.
Must comply with when using
- You are allowed to use, modify, commercially use and distribute the code of this version for free.
- 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
- Prerequisite: Node.js 24 or higher is required, or Bun 1.x can be used as an alternative runtime; environments below that version cannot run it directly.
- The default package manager is pnpm 11 or higher, but npm, yarn or bun can also be used; when switching, delete pnpm-lock.yaml first and then reinstall dependencies.
- By default, environment variables only validate NODE_ENV; other variables must be added in src/env.ts following the T3 Env pattern; the template does not include variables required by your business.
- To skip environment variable validation in scenarios such as Docker builds, you must explicitly set SKIP_ENV_VALIDATION=true.
- Demo images, fonts, icons and other third-party assets need to be checked under their respective licenses; they cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
- **[Node.js][node]** ≥ 24 - or **[Bun][bun]** ≥ 1.x as an alternative runtime
Original README
- **[pnpm][pnpm]** ≥ 11 - or npm, yarn, or bun (see [switching package manager](#switching-package-manager))
Original README
Only `NODE_ENV` is validated by default - add your own variables to `src/env.ts` following the [T3 Env](https://env.t3.gg/) pattern.
Original README
https://github.com/doinel1a/next-ts-shadcn-ui/blob/main/LICENSEhttps://github.com/doinel1a/next-ts-shadcn-ui/blob/main/README.mdSet `SKIP_ENV_VALIDATION=true` to bypass env validation (useful for Docker builds).
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-03. 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 · 88 / 100
- Technologies
- Next.js · React · HTML
- Website type
- Corporate Website · 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
- 2026-08-04
- Screenshot last checked
- 2026-10-03
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 Next.js 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.
Review declaration: [email protected] · 2026-10-04
Inspect the recorded source material
SHA-256: 3b238e862e403e6494d34d9b4c5316bb9d436b012d8a1a0e94dc546fa019e974
2026-10-03T23:23:27.738Z
Source file / repository[issues]: https://github.com/doinel1a/next-ts-shadcn-ui/issues [pulls]: https://github.com/doinel1a/next-ts-shadcn-ui/pulls [license]: https://github.com/doinel1a/next-ts-shadcn-ui/blob/main/LICENSE [demo]: https://next-ts-shadcn-ui.d1a.app/ [node]: https://nodejs.org/en [bun]: https://bun.com/docs/installation [pnpm]: https://pnpm.io/installation [yarn]: https://yarnpkg.com/getting-started/install [corepack]: https://nodejs.org/api/corepack.html [typescript]: https://www.typescriptlang.org/ [nextjs]: https://nextjs.org/ [react]: https://react.dev/ [tailwindcss]: https://tailwindcss.com/ [shadcn]: https://ui.shadcn.com/ [radix-ui]: https://www.radix-ui.com/ [zod]: https://zod.dev/ [tanstack-query]: https://tanstack.com/query [next-themes]: https://github.com/pacocoursey/next-themes [tabler-icons]: https://tabler.io/icons [sass]: https://sass-lang.com/ [playwright]: https://playwright.dev/ [eslint]: https://eslint.org/ [prettier]: https://prettier.io/ [husky]: https://typicode.github.io/husky/ [commitlint]: https://commitlint.js.org/ # Next.js · TypeScript · shadcn/ui - Template [][license] [][nextjs] [][typescript] [][tailwindcss] [][shadcn] [][playwright] Every new front-end project starts the same way: configuring Next.js, wiring up TailwindCSS, installing shadcn/ui, setting up ESLint, Prettier, Husky, and Commitlint - before a single component is written. This template eliminates that overhead. It combines **[Next.js 16 App Router][nextjs]**, **[React 19][react]**, **[shadcn/ui][shadcn]**, and **[TailwindCSS 4][tailwindcss]** into a ready-to-use starter with every tool pre-configured and wired together. - **Type-safe by default** - TypeScript 6 with strict mode and `ts-reset` patches applied - **Beautiful UI included** - shadcn/ui + Radix UI + TailwindCSS 4 components pre-configured - **Dark mode ready** - `next-themes` integrated with a working theme toggle out of the box - **Server state management** - TanStack Query 5 with devtools pre-configured - **React Compiler enabled** - automatic memoization via `babel-plugin-react-compiler` - **E2E test infrastructure included** - Playwright tests ready to run - **Code quality enforced** - ESLint 10, Prettier, Husky hooks, Commitlint, and lint-staged wired together --- [Demo][demo] | [Report a bug][issues] | [Request a feature][issues] | [Open a pull request][pulls] --- ## Table of contents - [Getting started](#getting-started) - [Prerequisites](#prerequisites) - [Installation](#installation) - [Environment variables](#environment-variables) - [Switching package manager](#switching-package-manager) - [Project structure](#project-structure) - [Available scripts](#available-scripts) - [Tech stack](#tech-stack) --- ## Getting started ### Prerequisites - **[Node.js][node]** ≥ 24 - or **[Bun][bun]** ≥ 1.x as an alternative runtime - **[pnpm][pnpm]** ≥ 11 - or npm, yarn, or bun (see [switching package manager](#switching-package-manager)) ### Installation Clone the repository and install dependencies: ```bash git clone https://github.com/doinel1a/next-ts-shadcn-ui YOUR-PROJECT-NAME cd YOUR-PROJECT-NAME ``` | | **npm** | **bun** | **pnpm** | **yarn** | | ----------- | ------------- | ------------- | -------------- | -------------- | | **install** | `npm install` | `bun install` | `pnpm install` | `yarn install` | ### Start the development server | | **npm** | **bun** | **pnpm** | **yarn** | | ------- | ------------- | --------- | ---------- | ---------- | | **dev** | `npm run dev` | `bun dev` | `pnpm dev` | `yarn dev` | Open [http://localhost:3000](http://localhost:3000) in your browser. ### Environment variables The template ships with a minimal environment configuration. Only `NODE_ENV` is validated by default - add your own variables to `src/env.ts` following the [T3 Env](https://env.t3.gg/) pattern. | Variable | Description | Side | Required | | ---------- | ------------------- | ------ | --------------------------- | | `NODE_ENV` | Runtime environment | Server | No (default: `development`) | > [!NOTE] > Set `SKIP_ENV_VALIDATION=true` to bypass env validation (useful for Docker builds). ### Switching package manager <details> <summary>Steps to switch from pnpm to npm, yarn, or bun</summary> **1.** Delete the pnpm lock file: ```bash rm pnpm-lock.yaml ``` **2.** (Optional) Declare the new package manager in `package.json` so tooling and CI pick it up automatically: ```json "packageManager": "[email protected]" ``` Replace `[email protected]` with `[email protected]` or `[email protected]` as appropriate. See [Corepack docs][corepack] for details. **3.** Install dependencies with the new package manager: ```bash # npm npm install # yarn yarn install # bun bun install ``` </details> > [!NOTE] > All scripts in `package.json` use package-manager-agnostic syntax and work without changes after switching. --- ## Project structure ``` . ├── __tests__/ # Playwright E2E tests ├── src/ │ ├── app/ │ │ ├── layout.tsx # Root layout with providers │ │ └── page.tsx # Home page │ ├── assets/ │ │ └── fonts/ # Self-hosted Roboto font files │ ├── components/ │ │ ├── providers/ # Root, TanStack Query, and theme providers │ │ ├── ui/ # shadcn/ui components │ │ ├── github-corner.tsx │ │ ├── navbar.tsx │ │ ├── footer.tsx │ │ └── counter.tsx # Example interactive component │ ├── lib/ │ │ ├── constants/ │ │ ├── types/ │ │ └── utils.ts # cn() utility (clsx + tailwind-merge) │ ├── styles/ │ │ ├── globals.css # TailwindCSS 4 entry point │ │ └── globals.scss # Global SCSS overrides │ └── env.ts # Env validation (Zod + T3 env-nextjs) └── public/ # Static assets ``` --- ## Available scripts | Script | Description | | ----------- | ---------------------------------------------- | | `dev` | Start the Next.js dev server | | `build` | Build for production | | `preview` | Start the production server (`next start`) | | `typecheck` | Run TypeScript compiler without emitting files | | `lint` | Run ESLint | | `lint:fix` | Run ESLint and auto-fix issues | | `format` | Format all source files with Prettier | | `test` | Run Playwright E2E tests | | `test:ui` | Run Playwright with interactive UI mode | --- ## Tech stack | Tool | Purpose | | -------------------------------------------------- | --------------------------------------------- | | **[Next.js 16][nextjs]** | Full-stack React framework with App Router | | **[React 19][react]** | UI library with React Compiler enabled | | **[TypeScript 6][typescript]** | Static typing with strict mode | | **[shadcn/ui][shadcn]** + **[Radix UI][radix-ui]** | Accessible, composable UI component library | | **[TailwindCSS 4][tailwindcss]** | Utility-first CSS framework | | **[TanStack Query 5][tanstack-query]** | Server state management and data fetching | | **[next-themes][next-themes]** | Dark/light mode with SSR support | | **[Zod 4][zod]** | Schema validation for env vars and forms | | **[SASS/SCSS][sass]** | Extended CSS with nesting and variables | | **[Tabler Icons][tabler-icons]** | Consistent SVG icon set for React | | **[Playwright][playwright]** | End-to-end browser testing | | **[ESLint 10][eslint]** + **[Prettier][prettier]** | Linting and formatting | | **[Husky][husky]** + **[Commitlint][commitlint]** | Git hooks and conventional commit enforcement |
Explore similar templates
Compare previews and descriptions within the same stack and category.
Next.js SaaS Starter
The official Next.js SaaS starter template, integrating email/password authentication, Stripe Checkout subscriptions, a dashboard with user/team CRUD, basic Owner/Member RBAC, and activity logging.
Next.js · SaaS
Next.js Commerce
Vercel's officially maintained Next.js App Router ecommerce starter with deep Shopify integration, offering a complete product catalog, cart, and checkout flow. Core logic is modular for swapping backends, and community provider versions exist for BigCommerce, Medusa, and Saleor.
Next.js · E-commerce
Next-js-Boilerplate
A developer-first Next.js 16 starter with Tailwind CSS 4 and TypeScript, supporting both App Router and Page Router.
Next.js · Starter
tailwind-nextjs-starter-blog
A Next.js and Tailwind CSS blog starter template using Contentlayer for Markdown/MDX, with built-in SEO, code highlighting, and tags. It targets personal technical blogs and migration from Jekyll/Hugo to React, and supports one-click Vercel deployment.
Next.js · Blog
next-forge
next-forge is a Turborepo-based Next.js template maintained by Vercel, positioned as a starting point for SaaS products.
Next.js · Starter
SaaS-Boilerplate
SaaS-Boilerplate is an open-source SaaS starter template built with Next.js App Router, React 19, TypeScript, Tailwind CSS, and Shadcn UI.
Next.js · SaaS