Base kit

App kit

Start with pages, data loading and styling, and add sign-in, forms or an API when you need them.

For: Anyone starting a web app who wants a small, readable project and adds sign-in, forms or an API as the app grows.

kitr new my-app --kit app

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

Browse the files Source

kitr dev: The app in the browser, with hot reload
kitr build: A single-page build in dist/site
npm test: Vitest, starting with the home page test

Two pages, one route table

/ and /about are listed in app/routes.ts, and each is a component in app/pages/.

Data loading ready

Query is wired, so the first queryOptions you write caches, refetches and suspends.

Styled from the first render

Tailwind and the theme tokens, with light and dark mode and no flash.

A passing test

test/home.test.tsx renders the home page with renderWithKitr.

What's inside

Read from the kit's output in the kitr repository, so it matches what kitr new writes today. 6 packages · 25 files.

Platforms: site: webspa
Packages: router query tailwind theme testing vite

Every file it writes

Start with app/pages/home.tsx. Pick any file to read it.

Source

app/pages/home.tsx

const commands = [
  ['kitr make:page <path>', 'add a page'],
  ['kitr add <package>', 'add sign-in, forms, an API and more'],
  ['kitr doctor', 'check the wiring'],
]

export default function HomePage() {
  return (
    <main className="mx-auto max-w-2xl space-y-4 bg-background p-6 leading-relaxed text-foreground">
      <h1 className="text-3xl font-semibold tracking-tight">app is running</h1>
      <p className="text-muted-foreground">
        This page is <code>app/pages/home.tsx</code>.
      </p>
      <p className="text-muted-foreground">
        Pages are listed in <code>app/routes.ts</code>.
      </p>
      <h2 className="text-xl font-semibold">Next</h2>
      <ul className="divide-y divide-border rounded-md border border-border">
        {commands.map(([command, note]) => (
          <li key={command} className="flex flex-wrap gap-x-3 px-4 py-2">
            <code className="font-mono text-sm">{command}</code>
            <span className="text-muted-foreground">{note}</span>
          </li>
        ))}
      </ul>
      <p className="flex gap-4">
        <a className="underline underline-offset-4" href="https://kitr.dev/docs/getting-started">
          Getting started
        </a>
        <a className="underline underline-offset-4" href="https://kitr.dev/packages">
          Packages
        </a>
      </p>
      <p className="text-sm text-muted-foreground">
        <code>AGENTS.md</code> in this folder describes the conventions for coding assistants.
      </p>
    </main>
  )
}

Presets built on app

The same base with a small working app on top, to read or to keep.

docs

Built on app

Start a docs site from markdown files: a sidebar, search, dark mode and copies for coding agents, prerendered to static HTML.

site: webstatic

kitr new my-app --kit docs

Other kits

All kits →