Skip to content

Getting started · Tutorial

Introduction

Use KrakStack as an installable package or copy registry source directly into your application.

KrakStack is a collection of production-ready React components, Effect services, application patterns, and developer tooling for full-stack TanStack applications. It helps you start with a coherent architecture without hiding the source code.

Why KrakStack

Agentic coding works best when agents build on a consistent foundation instead of making every architectural decision again for each project. KrakStack provides a core set of technologies that compose well, plus reusable building blocks for the recurring parts of production applications.

The registry turns substantial features such as forms, tables, application layouts, API helpers, services, and operational layers into pieces that an agent can inspect, install, and adapt. These are not arbitrary generated snippets. We vet the patterns, test the implementations, and verify that the pieces work together before treating them as foundations other projects can rely on.

This changes the agent's job from repeatedly building the same infrastructure from scratch to assembling known pieces like building blocks. The agent can spend more time connecting those pieces to the product's domain, behavior, and design, while the common mechanics start from consistent and reviewable implementations.

Choose an installation path

Use the package when you want reusable runtime exports and normal package versioning. Use the shadcn registry when you want the source copied into your application so you can own and customize it.

Install the package

Install the tree-shakable package for reusable components, services, and helpers:

shell
bun add @krak-stack/registry

Import only the subpaths you use:

tsx
import { DataTable } from "@krak-stack/registry/data-table";
import { AgentService } from "@krak-stack/registry/agent";
import { Query } from "@krak-stack/registry/query";

If you use the package's styling helpers, add its Tailwind source to your global stylesheet:

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

The package is the best fit for shared runtime code, Effect services, HTTP API helpers, and components that should remain dependency-managed.

For file storage, durable document processing, and searchable passages, use the dedicated @krak-stack/assets package.

Install from the shadcn registry

Add this registry alias to your application's components.json:

json
{
  "registries": {
    "@krak-stack": "https://krakstack.net/r/{name}.json"
  }
}

Then install any item by its registry name:

shell
bunx shadcn@latest add @krak-stack/data-table
bunx shadcn@latest add @krak-stack/service-database

This path copies the implementation into your project. It is the best fit for UI blocks, templates, configuration, and code you expect to adapt to your product. Review the generated diff and keep the source with the feature that uses it.

What to use when

  • Use @krak-stack/registry for reusable imports, Effect services, HTTP API helpers, and package-managed updates.
  • Use components.json with the @krak-stack alias for source ownership, UI customization, templates, and configuration.
  • Both paths use the same documented KrakStack patterns. Do not install the same item through both paths without a specific reason.

Contribute

Contributions are welcome. Start by opening the KrakStack repository and checking existing issues before making a change.

  1. Fork the repository and create a focused branch.
  2. Update the source implementation and its registry definition where applicable.
  3. Run bun run registry:build when changing a published registry item.
  4. Run bun run test, bun check, bun lint, and bun fmt.
  5. Open a pull request with the reason for the change, screenshots for UI changes, and migration notes when needed.

For feature requests or bugs, use the GitHub issue tracker. For a complete working application, see the KrakStack template source and its live preview.