Base kit

Dashboard kit

Start a logged-in app on an external API: forms, tables, state, theme, auth, mocks and tests.

For: Teams building an admin or internal tool on an API they already run.

kitr new my-app --kit dashboard

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 dashboard in the browser
kitr build: A single-page build in dist/site
npm test: Vitest, starting with the home page test

Talks to your API

http is pointed at VITE_API_URL, with typed requests and errors.

Sign-in with tokens

auth keeps the session and guards pages; app/abilities.ts holds the permissions.

Build before the API exists

Set VITE_MOCKS=true and the handlers in app/mocks/ answer every request.

Eleven components to own

Button, form, data table, app shell and more, copied into app/components/ui.

What's inside

Read from the kit's output in the kitr repository, so it matches what kitr new writes today. 14 packages · 11 components · 44 files.

Platforms: site: webspa
Packages: router query http forms table state tailwind theme toast auth storage mocks testing vite
Components: app-shellbuttoncarddata-tableempty-stateformiconinputlabelpage-headertheme-toggle

Every file it writes

Start with app/routes.ts. Pick any file to read it.

Source

app/routes.ts

import { defineRoutes } from '@kitr/kitr/app'
import router from '@kitr/router/routes'
import { head, RootDocument } from './document'

/**
 * Every page of the app, in one place. `kitr make:page <path>` appends to this chain; `.group`
 * nests paths, `.layout` wraps pages in a component without a path segment.
 */
export const routes = defineRoutes([router], (r) =>
  r
    .root({ head, component: RootDocument })
    .page('/', { lazy: () => import('./pages/home') })
    .page('/about', { lazy: () => import('./pages/about') }),
)

export type AppRoutes = typeof routes.$types