@krak-stack/registry

Tree-shakable runtime components and Effect services from the KrakStack shadcn registry.

bun add @krak-stack/registry

Import only the subpaths used by the application:

import { DataTable } from "@krak-stack/registry/data-table";
import { Pagination } from "@krak-stack/registry/pagination";
import { AgentService } from "@krak-stack/registry/agent";
import { AgentWidget, makeAgentAtoms } from "@krak-stack/registry/agent/client";
import { makeAgentApiGroup } from "@krak-stack/registry/agent/schema";
import {
  HttpApiToolkit,
  HttpApiToolkitLayer,
} from "@krak-stack/registry/httpapi-toolkit";
import { ApiClient } from "@krak-stack/registry/httpapi/client";
import { HttpApiSpec } from "@krak-stack/registry/httpapi/helpers";
import { HttpApiOtlp } from "@krak-stack/registry/opentelemetry/api";
import { BrowserOtlp } from "@krak-stack/registry/opentelemetry/browser";
import { createDocsSource, makeDocs } from "@krak-stack/registry/docs";
import { loadMdxDocsDirectory } from "@krak-stack/registry/docs/server";
import {
  DocumentationToolkit,
  DocumentationToolkitLayer,
} from "@krak-stack/registry/documentation-toolkit";
import {
  WebFetchToolkit,
  WebFetchToolkitLayer,
} from "@krak-stack/registry/webfetch-toolkit";
import { Query } from "@krak-stack/registry/query";
import { createSeo } from "@krak-stack/registry/seo";
import { FileExtractionService } from "@krak-stack/registry/service-file-extraction";
import { FileExtractedTextSchema } from "@krak-stack/registry/service-file-extraction/schema";
import {
  HealthApiGroup,
  healthHandler,
  HealthService,
} from "@krak-stack/registry/service-health";
import { NotificationService } from "@krak-stack/registry/service-notification";

Inject API telemetry and browser proxy routes into the application HTTP layer:

const appLayer = appRoutes.pipe(Layer.provideMerge(HttpApiOtlp.layer));

Install browser telemetry globally on the Atom runtime used by the API client:

import { Atom } from "effect/unstable/reactivity";
import { BrowserOtlp } from "@krak-stack/registry/opentelemetry/browser";

const apiRuntime = Atom.context();

if (!import.meta.env.SSR) {
  apiRuntime.addGlobalLayer(BrowserOtlp.layer({ serviceName: "my-app-web" }));
}

@krak-stack/registry/service-notification is the source-compatible direct dispatcher. Use the separate @krak-stack/notifications package for a durable inbox, package-owned migrations, persisted delivery jobs, retries, workers, and one-shot reminders.

Create a configured SEO helper once with site-wide defaults, then use it for each page:

const siteSeo = createSeo({
  origin: "https://krakstack.net",
  locales: ["en", "fr"],
  siteName: "KrakStack",
  sameAs: ["https://github.com/krakcons/krakstack"],
});

<Route
  head={() =>
    siteSeo({
      title: "KrakStack",
      description: "Production-ready building blocks for TanStack apps.",
      locale: "en",
    })
  }
/>;

The returned object contains meta, links, and derived JSON-LD scripts. Website pages receive WebSite and Organization data; documentation pages can pass type: "article" for Article data. Use the lower-level seo function directly when a configured factory is not useful.

HTTP API client, schema, AI tool, CLI, and MCP utilities are available under the @krak-stack/registry/httpapi/* subpaths. Keep application-specific API layers, handlers, authentication, and client bindings in the application.

Documentation consumers load and compile their application-owned MDX on the server, then pass the validated page records to createDocsSource and makeDocs:

const pages = await loadMdxDocsDirectory("src/content/docs");
const source = createDocsSource({ pages, locales: ["en", "fr"] });

The @krak-stack/registry/docs/server export requires the Bun runtime. Keep it behind a server-only module or server function so it is not included in browser bundles.

Add the package's Tailwind source to the application stylesheet:

@import "@krak-stack/registry/tailwind.css";

The same canonical sources remain available through shadcn:

bunx shadcn@latest add @krak-stack/data-table

Project-specific configuration and scaffolding remain available through shadcn.

Oxlint Plugin

Projects that prefer centrally versioned rules can load the compiled anti-slop plugin directly from the package:

{
  "jsPlugins": [
    {
      "name": "anti-slop",
      "specifier": "@krak-stack/registry/oxlint/anti-slop"
    }
  ]
}

Use @krak-stack/lint-format instead when the project should receive editable, vendored rule source under tools/oxlint/anti-slop.