Astro With Trpc is an Astro boilerplate starter that pairs the Astro framework with tRPC, UnoCSS, and Auth.js, so you can build type-safe, full-stack websites from one codebase. It is distributed as a GitHub repository template and is designed to remove the initial setup of API layers, styling, and authentication.
What is Astro With Trpc?
Astro With Trpc is a starter template that combines Astro's file-based routing with tRPC for end-to-end type safety, UnoCSS for atomic CSS, and Auth.js for authentication. The repository description explicitly lists tRPC, UnoCSS, Auth.js, and TypeScript as its core technologies. In the default project structure, Astro reads .astro and .md files from src/pages/ and exposes each file as a route. Static assets such as images go into the public/ directory.
Key Features
- Astro framework — Uses Astro for component islands and file-based routing; pages are
.astroor.mdfiles insrc/pages/. - tRPC integration — Provides end-to-end typesafe API procedures, letting the client and server share inference for queries and mutations.
- UnoCSS engine — On-demand atomic CSS engine that generates utility classes as you author templates, so you only ship the CSS you use.
- Auth.js support — Includes authentication through Auth.js, supporting session management and multiple providers.
- Multi-framework components —
src/components/is intended for Astro, React, Vue, Svelte, or Preact components. - CLI commands — Built-in scripts:
npm run devstarts a dev server atlocalhost:3000,npm run buildoutputs a static site to./dist/, andnpm run previewserves the built site locally. - TypeScript — The repository's topics include TypeScript, indicating the template uses typed JavaScript throughout.
- Public asset handling — The
public/directory serves static files directly, such as images or fonts.
Who is it for?
- Full-stack developers who want to start an Astro project with tRPC and Auth.js already wired up.
- TypeScript teams that value end-to-end type safety between frontend and backend and want that set up in advance.
- Developers who prefer utility-first styling with UnoCSS's on-demand engine to generate only the CSS they use.
- Hobbyists and indie hackers who need a minimal but complete foundation for a side project with auth and typed APIs.
What can you do with Astro With Trpc?
- Bootstrap a full-stack app — clone the repo, run
npm install, and start building on top of the existing tRPC and Auth.js setup. - Create authenticated dashboards — use Auth.js to manage user sessions and tRPC to query data with full type inference.
- Transform content into routes — drop markdown files into
src/pages/and Astro will build them as pages automatically. - Serve static assets — place images and other files in the
public/folder for direct access.
