Create React App for TanStack Router

This CLI applications builds Tanstack Router applications that are the functional equivalent of Create React App.

To help accelerate the migration away from create-react-app we created the create-tsrouter-app CLI which is a plug-n-play replacement for CRA.

Quick Start

To maintain compatability with create-react-app you can build a new application by running:

Command	Description
npx create-tsrouter-app@latest my-app	Create a new app
npx create-tsrouter-app@latest my-app --template file-router	Create a new file based app
npx create-tsrouter-app@latest my-app --template typescript	Create a new TypeScript app using the Code Router
npx create-tsrouter-app@latest my-app --tailwind	Add Tailwind CSS support
npx create-tsrouter-app@latest my-app --framework solid	Create a Solid app
npx create-tsrouter-app@latest my-app --framework solid --template file-router	Create a Solid app with file-router

If you don't specify a project name, the CLI will walk you through an interactive setup process:

npx create-tsrouter-app@latest

This will start an interactive CLI that guides you through the setup process, allowing you to choose:

• Project Name
• Router Type (File-based or Code-based routing)
• TypeScript support
• Tailwind CSS integration
• Package manager
• Git initialization

Command Line Options

You can also use command line flags to specify your preferences directly:

npx create-tsrouter-app@latest my-app --template file-router --tailwind --package-manager pnpm

Available options:

• --template <type>: Choose between file-router, typescript, or javascript
• --tailwind: Enable Tailwind CSS
• --package-manager: Specify your preferred package manager (npm, yarn, pnpm, bun, or deno)
• --no-git: Do not initialize a git repository
• --add-ons: Enable add-on selection or specify add-ons to install

When using flags, the CLI will display which options were provided and only prompt for the remaining choices.

Features

What you'll get is a Vite application that uses TanStack Router. All the files will still be in the same place as in CRA, but you'll get a fully functional Router setup under in app/main.tsx.

create-tsrouter-app is everything you loved about CRA but implemented with modern tools and best practices, on top of the popular TanStack set of libraries. Which includes @tanstack/react-query and @tanstack/react-router.

Routing Options

File Based Routing (Recommended)

File Based Routing is the default option when using the interactive CLI. The location of the home page will be app/routes/index.tsx. This approach provides a more intuitive and maintainable way to structure your routes.

To explicitly choose File Based Routing, use:

npx create-tsrouter-app@latest my-app --template file-router

Code Based Routing

If you prefer traditional code-based routing, you can select it in the interactive CLI or specify it by using either the typescript or javascript template:

npx create-tsrouter-app@latest my-app --template typescript

Additional Configuration

TypeScript

• File Based Routing always uses TypeScript
• For Code Based Routing, you can choose between TypeScript and JavaScript
• Enable TypeScript explicitly with --template typescript

Tailwind CSS

Enable Tailwind CSS either through the interactive CLI or by adding the --tailwind flag. This will automatically configure Tailwind V4.

Package Manager

Choose your preferred package manager (npm, bun, yarn, pnpm, or deno) either through the interactive CLI or using the --package-manager flag.

Extensive documentation on using the TanStack Router, migrating to a File Base Routing approach, as well as integrating @tanstack/react-query and @tanstack/store can be found in the generated README.md for your project.

Add-ons (experimental)

You can enable add-on selection:

npx create-tsrouter-app@latest --add-ons

This will prompt you to select the add-ons you want to enable during application creation.

You can enable specific add-ons directly by adding a comma separated list of add-on names to the --add-ons flag. For example:

npx create-tsrouter-app@latest my-app --add-ons shadcn,tanstack-query

You can get a list of all available add-ons by running:

npx create-tsrouter-app@latest --list-add-ons

This will display a list of all available add-ons for React that are compatible with the Code Router.

npx create-tsrouter-app@latest --list-add-ons --framework solid --template file-router

Will get you a list of all available add-ons for Solid that are compatible with the File Router.

MCP (Model Context Protocol) Support (experimental)

You can launch the create-tsrouter-app CLI with the --mcp flag to enable MCP support. Use this in your MCP enabled IDE to allow the Agent model to generate TanStack Router applications.

npx create-tsrouter-app@latest --mcp

Shown below is the configuration for MCP support in Cursor.

Contributing

Check out the Contributing guide.

License

MIT