# kit

> A shadcn-format registry of React blocks, components, themes and fonts for Vite apps, served as the @kit namespace from https://kit.123474.xyz. Items install as source with shadcn's CLI; every block follows one theme contract, switchable between the kit's themes, light and dark.

Each item below links to its page in Markdown: its install line, files, keymap and docs.

## Add the @kit namespace

In the app's components.json, add the registry under "registries":

```json
{ "registries": { "@kit": "https://kit.123474.xyz/r/{name}.json" } }
```

Then add an item by name; its registry dependencies (other kit items, shadcn's own) come with it:

```sh
pnpm dlx shadcn@latest add @kit/app-shell
```

## Blocks

- [@kit/app-shell](https://kit.123474.xyz/items/app-shell.md): The root layout an app starts from: the theme switch, toasts (shadcn's Sonner), an error boundary with Try again, the app's routes matched exactly against the location's path (else a 404), the ⌘K palette over the same routes and actions, and the signed-in person from @kit/auth with a menu to sign out.
- [@kit/three-pane](https://kit.123474.xyz/items/three-pane.md): The foundation of an app: a sidebar, a virtualised list and a detail, resizable with sizes remembered per app; the selection is the URL (?item=<id>, or a router's own adapter); a keyboard map; and below 768px the panes stack one at a time with a back control.

## Components

- [@kit/command](https://kit.123474.xyz/items/command.md): The ⌘K (Ctrl+K) palette on shadcn's Command: the app's routes (choosing one navigates through the location adapter) and its actions by group with their shortcuts (choosing one runs it), from @kit/agent's provider.
- [@kit/file-icon](https://kit.123474.xyz/items/file-icon.md): The VS Code Material Icon Theme's whole set of file and folder icons, by name: <FileIcon name="x.ts" /> and <FolderIcon name="src" open />, resolved in VS Code's order, each icon its own SVG under /icons/material/, loaded only when shown.
- [@kit/icons](https://kit.123474.xyz/items/icons.md): Lucide icons at the house size and stroke, set once: an Icon wrapper and an IconProvider that gives shadcn's components' icons the same defaults.
- [@kit/theme-switch](https://kit.123474.xyz/items/theme-switch.md): Switch between the installed kit themes, each light, dark or system: a provider that sets data-theme and the dark class on <html> and remembers the choice per app, an inline script so a reload never flashes, and a keyboard-operable control.

## Libraries

- [@kit/agent](https://kit.123474.xyz/items/agent.md): An app's actions and routes declared once: a location adapter, a provider with hooks and navigate, the app's /llms.txt, and a WebMCP bridge behind a flag that's off by default.
- [@kit/auth](https://kit.123474.xyz/items/auth.md): Passkey and sign-in-token sign-in for a Cloudflare Worker (Hono, D1) and its pages: one guard keeps the session cookie to pages and /data and bearer tokens to /api; a sign-in page, an account page (passkeys, sessions) and a React client (useSession, <SignedIn>, signOut, the passkey ceremonies). Access and Google sign-in are ready but off.

## Themes

- [@kit/theme-base](https://kit.123474.xyz/items/theme-base.md): The theme contract's Tailwind v4 mapping: bg-background, border-hairline, rounded-* from the radius, spacing scaled by density, the theme's fonts and shadows. Every block, component and page depends on it.
- [@kit/theme-contrast](https://kit.123474.xyz/items/theme-contrast.md): High contrast for long reading and low vision: every text pair at 7:1 or more (WCAG AAA) in light and dark, strong borders, roomier spacing, system fonts.
- [@kit/theme-grove](https://kit.123474.xyz/items/theme-grove.md): A calm green primary on a warmer neutral than Kiln, soft radii; Geist, Newsreader for the serif and Geist Mono.
- [@kit/theme-kiln](https://kit.123474.xyz/items/theme-kiln.md): Paper, made modern: a near-neutral ivory, warm ink, a terracotta primary used sparingly, hairlines; Geist, Newsreader and Geist Mono. Generated from Kiln core tokens, commit 267e90b.
- [@kit/theme-neutral](https://kit.123474.xyz/items/theme-neutral.md): The kit's default theme: shadcn's neutral greys, system fonts, density 1, every theme-contract variable for light and dark.
- [@kit/theme-night](https://kit.123474.xyz/items/theme-night.md): Dark-first: deep navy and an indigo primary, whose system mode resolves to dark in the theme switch; a soft dusk light mode. Geist and Geist Mono.
- [@kit/theme-slate](https://kit.123474.xyz/items/theme-slate.md): Cool blue-grey and dense, for dashboards: density 0.875, a small radius, a steel-blue primary; Geist and Geist Mono.

## Fonts

- [@kit/font-geist](https://kit.123474.xyz/items/font-geist.md): Geist, self-hosted: the variable woff2 files come from @fontsource-variable/geist and are bundled by the app, so pages make no font-CDN request. Its family is "Geist Variable".
- [@kit/font-geist-mono](https://kit.123474.xyz/items/font-geist-mono.md): Geist Mono, self-hosted: the variable woff2 files come from @fontsource-variable/geist-mono and are bundled by the app, so pages make no font-CDN request. Its family is "Geist Mono Variable".
- [@kit/font-newsreader](https://kit.123474.xyz/items/font-newsreader.md): Newsreader, self-hosted: the variable woff2 files come from @fontsource-variable/newsreader and are bundled by the app, so pages make no font-CDN request. Its family is "Newsreader Variable".

## Optional

- [Registry index](https://kit.123474.xyz/r/registry.json): every item's registry JSON, as shadcn reads it
- [Gallery](https://kit.123474.xyz/gallery): every block in every theme, light and dark