The full-stack registry

Ship the hard parts of your app

Install production-ready UI, Effect services, and developer tooling with shadcn, or import the package directly. Own the code, keep your architecture, and move from setup to product faster.

Open source, type-safe, and built to live in your codebase.

krakstack.net/registry

Add what your app needs

One command, source code included.

Ready to install
bunx --bun shadcn@latest add @krak-stack/app-brand
UI components21
Effect services4
Agent toolingMCP
App patternsTSX
21Components
Registry UI blocks ready to install with shadcn.
4Services
Backend and infrastructure registry entries.
46Total registry items
Components, services, libraries, and configuration starters.

Built for real applications

A better starting point without another framework

Use focused building blocks instead of rebuilding the same application surface for every project.

01

Use it your way

Install focused components and services through shadcn, import the package directly, or review every line and change anything.

02

Keep one architecture

Use coherent TanStack, Effect, Drizzle, and shadcn patterns across the browser, API, and database.

03

Build with agents

Give coding agents documented patterns, MCP-enabled APIs, and reusable building blocks they can work with safely.

One coherent platform

The pieces stay aligned from interface to infrastructure.

Product UI

Accessible shadcn components, forms, tables, previews, and layouts ready to shape into your product.

Effect backend

Typed services, HTTP APIs, OpenAPI metadata, persistence, and observability patterns that belong together.

Agent-ready patterns

Documentation, MCP, CLI, and AI helpers give your team and coding agents a shared vocabulary.

Package or source

Import the package for a fast start or copy registry source when you want full ownership. Either way, the architecture stays visible and yours to extend.

KrakStack sites

See the stack working together

See the same patterns composed into a working application, then use the registry to bring only what you need into your own codebase.

Explore the registry

Start with a block. Keep building from there.

Choose only what your application needs. Every registry item includes source, dependencies, usage guidance, and a path to customization.

Components

Error Component

A shared TanStack Router error page with localized messages, hard refresh, home navigation, and copyable error details.

View docs

Search Menu

A reusable command-palette search menu with grouped items, icons, descriptions, keyboard shortcut support, and a responsive search trigger.

View docs

App Brand

A compact TanStack Router brand link with a semantic icon, app name, and subtitle.

View docs

Copy Button

An accessible clipboard copy button with success and failure announcements for screen readers.

View docs

Loading

A compact loading indicator with a spinner and accessible label text.

View docs

Google Map

A reusable Google Maps renderer with responsive radius fitting, centered overlays, accessible touch controls, shared script loading, and localized states.

View docs

Icon Input

An Iconify-backed icon picker with virtualized search, live preview, and localized empty states.

View docs

Pagination

Controlled pagination controls with page-size selection, result summaries, compact layouts, and localized labels.

View docs

Data Table

A dependency-free table engine powered by one Effect Atom, with an AG-style API, controlled state, selection, grouping, gallery view, and Pointer Events interactions.

View docs

File Picker

An accessible controlled file picker with drag-and-drop, attachment metadata, image previews, and replace and delete actions.

View docs

Form

A TanStack Form setup with reusable field wrappers, compact and searchable selects, file inputs, submit state, and dirty-navigation blocking.

View docs

Effect Form

Reusable Effect Form fields, submission state, localized HTTP errors with failure fallbacks, grouping, file inputs, and dirty-navigation blocking.

View docs

Locale Switcher

An i18n-library-agnostic dropdown for switching between arbitrary locales with localized language labels.

View docs

Theme Switcher

A localStorage-persisted light, dark, and system theme switcher with a ScriptOnce startup script to avoid theme flash.

View docs

Editing Locale Switcher

A compact localized select for choosing which locale is being edited in multilingual forms.

View docs

Agent

A generic Effect AI agent service, typed streaming API, client atoms, and localized assistant widget with tools, approvals, context, and references.

View docs

Markdown

A Bun Markdown compiler and shared React renderer with safe links, extracted code blocks, and TanStack Highlight.

View docs

Sidebar Layout

A sidebar-based layout with configurable navigation groups, a brand header, header action slot, and page header component.

View docs

Code Block

A syntax-highlighted code block with TanStack Highlight, semantic light and dark colors, a language label, and a copy action.

View docs

Stats Card

A compact metric card with title, icon, value, description, optional content, and card-link hover affordances.

View docs

Virtualized Combobox

A searchable, virtualized Base UI combobox with single and multiple selection, controlled search, custom triggers, and localized labels.

View docs

Start with the architecture, finish with your product.

Browse the introduction, install a focused block or import the package, and keep moving with code you can inspect and adapt.

Get started