A production application foundation you can adopt one package at a time.
Design system, app shell, multi-tenancy, forms, analytics, workflows, integrations, documents, communications, and more—composable without becoming inseparable.

See what you can build · Quick start · Packages · Architecture · Demo app · Documentation

AppKit is the reusable product layer between a framework and your application. It gives you the pieces teams usually spend their first year rebuilding: a coherent interface, responsive navigation, tenant isolation, permissions, auditing, dashboard and report builders, forms, workflows, notifications, external data sync, outbound integrations, documents, background work, and provider-neutral delivery.

Use @braedonsaunders/appkit-ui for a polished shell and component system. Add @braedonsaunders/appkit-db and @braedonsaunders/appkit-tenant when you need multi-tenant Postgres with RLS. Install forms, analytics, workflows, sync, or PDF only when your product needs them. The package boundaries are deliberate: adopting one capability does not pull the whole platform into your process or browser bundle.

AppKit is especially useful for SaaS products, internal tools, operations platforms, admin consoles, vertical software, and app builders that need more than a component gallery but do not want a rigid all-or-nothing framework.

• A real application system. Navigation, settings, data lists, builders, drawers, dashboards, audit history, jobs, storage, and delivery paths are designed to work together—not presented as disconnected examples.
• Modular without integration tax. Every feature has a dependency-light core and explicit optional adapters for React, Drizzle, providers, browser automation, editors, canvas engines, and database drivers.
• Secure defaults. PostgreSQL RLS, wildcard RBAC, sealed secrets, idempotent mutations, transactional outbox, isolated user code, sandboxed installable apps, SSRF-safe egress, and fail-closed sync snapshots are available as first-class packages.
• One design language. Semantic tokens drive light and dark themes, Tailwind v4 utilities, radius, elevation, and motion. Rebrand the entire system by replacing channel values in one CSS file.
• Application-owned domains. AppKit supplies engines and contracts; your app supplies record catalogues, analytics sources, workflow actions, connectors, authorization context, and persistence policy. Product concepts never leak into reusable packages.
• Proven in production. The foundation generalizes production application patterns, preserves reusable behavior, and keeps domain coupling behind injected adapters.

Start a new Next.js application with the shell, tokens, theme runtime, and page transitions already connected:

pnpm create appkit my-app

Add optional capability groups at creation time:

pnpm create appkit operations --features forms,tenancy,workflows --yes

The scaffold is deliberately small: it gives you a production-shaped AppKit application without generating product-specific routes, records, or fake data.

Install only the interface foundation:

pnpm add @braedonsaunders/appkit-ui @braedonsaunders/appkit-tokens

/* app/globals.css */
@import "@braedonsaunders/appkit-ui/styles.css";
@source '../app';

import { AppShell, Toaster } from "@braedonsaunders/appkit-ui";

export default function Application({
  children,
  pathname,
}: {
  children: React.ReactNode;
  pathname: string;
}) {
  return (
    <>
      <AppShell groups={navigation} pathname={pathname}>{children}</AppShell>
      <Toaster richColors closeButton />
    </>
  );
}

Add a tenant-safe backend when you need it:

pnpm add @braedonsaunders/appkit-db @braedonsaunders/appkit-tenant drizzle-orm postgres

import { assertCan } from "@braedonsaunders/appkit-tenant";

assertCan(requestContext, "projects.write");
await requestContext.db(async (db) => {
  await db.insert(projects).values(input);
});

Published packages contain compiled ESM, TypeScript declarations, source maps, styles, and required migrations—not monorepo source or tests. Every package is independently installable; internal AppKit dependencies use normal semver ranges in npm artifacts while this repository keeps fast workspace:* links locally.

Bind customization to your records once and retain key-based calls throughout the application:

import { createCustomizationEngine } from '@braedonsaunders/appkit-customization'
import { createMemoryListViewStore } from '@braedonsaunders/appkit-customization/memory'

const customization = createCustomizationEngine(recordTypes)
const listStore = createMemoryListViewStore({ registry: customization.registry })
const systemView = customization.defaultListView('work_order')

The same catalogue drives the form designer, list-view designer, runtime record table, API validation, and memory or Postgres persistence—without putting your product’s record names, routes, queries, or permissions inside AppKit.

The core of each feature remains usable without its heaviest dependencies:

@braedonsaunders/appkit-workflows          graph + durable runtime
  ├─ /react                React Flow authoring
  ├─ /approval-tokens      Node HMAC email actions
  ├─ /schema               feature-owned Drizzle tables
  └─ /drizzle              durable Postgres store

@braedonsaunders/appkit-sync               connector + orchestration contracts
  ├─ /egress               DNS-pinned, SSRF-safe HTTPS
  ├─ /db-drivers           optional PostgreSQL/MySQL/MSSQL clients
  ├─ /schema               connections, runs, crosswalk
  └─ /drizzle              run and cursor persistence

@braedonsaunders/appkit-integrations       dispatch + delivery ledger
  ├─ /http /chat /sheets   hardened outbound adapters
  ├─ /email /sql           optional render and database adapters
  ├─ /schema               definitions and delivery ledger
  └─ /drizzle              tenant-scoped persistence

@braedonsaunders/appkit-apps               installable application platform
  ├─ /manifest /bundle     validated manifests and ZIP packages
  ├─ /runtime /bridge      governed QuickJS backend + opaque iframe SDK
  ├─ /service              source-shaped lifecycle bound to host adapters
  ├─ /react                app builder, runtime frame, and library
  ├─ /memory               database-free complete adapter
  └─ /schema /drizzle      tenant-scoped durable lifecycle

@braedonsaunders/appkit-scripts            governed automation code
  ├─ /bound                positional cutover runtime + context mapping
  ├─ /client               opaque-origin browser validation gate
  ├─ /jobs                 queue-neutral scheduled/bulk worker handler
  ├─ /react                searchable list and full-screen authoring drawer
  └─ /schema /drizzle      definitions, schedules, and run history

@braedonsaunders/appkit-query-console      governed raw-SQL workbench
  ├─ /react                schema, snippets, history, editor, and results UI
  └─ /styles.css           optional-package Tailwind source registration

The repository enforces this architecture. Boundary checks reject runtime cycles, forbidden foundation dependencies, missing feature migrations, and an optional peer imported by a package root. Server-only adapters cannot silently inflate a client bundle.

apps/playground is a real Next.js 16 application, not a static component catalogue. Authentication is intentionally disabled throughout the public demo; one built-in identity exercises tenant context and permissions without a login. The hosted demo and its manifest-backed package catalogue run without a database. Its sample tenant data is deterministic, analytics queries execute in memory, and editable dashboard and insight-card state persists in the browser.

It includes the topbar/sidebar shell, admin hub and settings shell, configurable dashboard, insight-card studio, form designer and runtime, workflow canvas, reports, notifications, design studio, customization, integrations, API reference, searchable/paginated tenant data, activity inbox, and one detail page for every publishable package manifest.

pnpm install
pnpm --filter @braedonsaunders/appkit-playground dev

Open http://localhost:4310/dashboard. Use the account launcher to switch between the topbar (default) and sidebar navigation. No database or provider credentials are required.

To exercise the real tenant-scoped Postgres/RLS path, copy apps/playground/.env.example to apps/playground/.env.local, set both database URLs to your Postgres or Supabase connections, and run pnpm --filter @braedonsaunders/appkit-playground seed before starting the app. With those variables present, the same routes use durable package-owned persistence.

• Every color in reusable UI resolves through a semantic token; light and dark themes are part of the same contract.
• Entrance content is visible by default. CSS starting styles provide motion without hiding server-rendered content, and reduced-motion is honored.
• React is optional unless a surface is interactive; framework-neutral cores remain safe to use in services and workers.
• Persistence-owning packages ship their own schema and SQL migrations.
• External network access validates HTTPS, DNS answers, redirects, request metadata, response sizes, timeouts, and public IP ranges.
• Package tests, monorepo typecheck, architecture checks, build, and browser verification are required before changes land.
• Every npm artifact is packed and inspected, then installed from its tarball in fresh Node, React, and Next.js consumers before release.

Agents and contributors should start with AGENTS.md, then read the design and package orientation and application-building rules.

pnpm install
pnpm -r typecheck
pnpm -r test
pnpm lint
pnpm build
pnpm test:packages
pnpm test:consumers

AppKit is AGPL-3.0-or-later. Changesets owns package versioning and the release PR; successful merges publish provenance-enabled artifacts to npm. See the publishing guide for the exact artifact and release contracts.