Skip to content

Templates

Every template is a production-grade starter with Biome linting & formatting, TypeScript strict mode, GitHub Actions CI, and VS Code settings pre-configured.

ID next-chakra
Stack Next.js 16, Chakra UI v3, TypeScript
Repo nextarter-chakra

Features: Next.js 16, Chakra UI v3, Biome, Turborepo, TypeScript, Playwright

Terminal window
pnpm create xtarter-app my-app --template next-chakra

ID next-tailwind
Stack Next.js 16, Tailwind CSS v4, TypeScript
Repo nextarter-tailwind

Features: Next.js 16, Tailwind CSS v4, Biome, TypeScript, Playwright

Terminal window
pnpm create xtarter-app my-app --template next-tailwind

ID vite-chakra
Stack Vite+ (Vite 8), React 19, Chakra UI v3, TanStack Router
Repo vite-react-chakra-starter

Features: Vite+ (Vite 8), React 19, Chakra UI v3, TanStack Router, TanStack Query, Biome, Vitest

Terminal window
pnpm create xtarter-app my-app --template vite-chakra

ID vite-tailwind
Stack Vite+ (Vite 8), React 19, Tailwind CSS v4, TanStack Router
Repo vite-react-tailwind-starter

Features: Vite+ (Vite 8), React 19, Tailwind CSS v4, TanStack Router, TanStack Query, Biome, Vitest

Terminal window
pnpm create xtarter-app my-app --template vite-tailwind

ID vite-hero
Stack Vite+ (Vite 8), React 19, Hero UI
Repo vite-react-hero-starter

Features: Vite+ (Vite 8), React 19, Hero UI, TanStack Router, Biome, Vitest

Terminal window
pnpm create xtarter-app my-app --template vite-hero

Every template follows a consistent layout:

my-app/
├── src/ # Application source
├── public/ # Static assets
├── biome.json # Biome linting + formatting config
├── tsconfig.json # TypeScript strict mode
├── package.json # Dependencies and scripts
├── .vscode/ # Editor settings + extensions
├── .github/workflows/ # CI/CD workflows
└── .agents/ # AI agent skills

For programmatic usage, the TemplateConfig type:

interface TemplateConfig {
id: string // Unique identifier (e.g. "vite-tailwind")
name: string // Human-readable name
description: string // One-line description
repo: string // GitHub owner/repo
branch: string // Git branch (always "main")
provider: "github" // Download provider
path?: string // Optional subdirectory within repo
}