> FABRK
modular full stack framework built for ai assisted development

Docs · Live Demo · Components · About

FABRK started as a production boilerplate called fabrk.dev — a Next.js starter built and refined over years of shipping real SaaS products. Every new project pulled in the same patterns: auth flows, payment integrations, dashboard shells, data tables, theme systems, AI tooling. The boilerplate grew into something genuinely useful — 109+ components, 18 themes, auth with MFA, three payment providers, AI cost tracking, security hardening — all battle-tested in production.

Copying a boilerplate works until it doesn't. Bug fixes in one project didn't propagate to others. So the extraction began: components became @fabrk/components, auth became @fabrk/auth, payments, email, storage, security — each concern got its own package. The monorepo took shape: 13 packages, each with a focused responsibility.

The framework layer — routing, SSR, streaming — needed a runtime. Rather than depend on someone else's, FABRK built its own: a Vite 7 plugin with file-system routing, SSR/RSC streaming, middleware, and a generic fetch handler that works on any runtime (Node, Cloudflare Workers, Deno, Bun). The fabrk package owns the full stack — runtime plus all the batteries.

fabrk = own runtime + batteries (everything else)

Stop generating 500 lines of custom components from scratch. Import pre-built, theme-aware components and tools. Ship full-stack apps in minutes, not hours.

import { DashboardShell, KpiCard, BarChart, DataTable, Badge } from '@fabrk/components'
import { cn } from '@fabrk/core'
import { mode } from '@fabrk/design-system'

export default function Dashboard() {
  return (
    <DashboardShell sidebarItems={items} user={user} onSignOut={signOut}>
      <div className="grid grid-cols-4 gap-3 p-4">
        <KpiCard title="REVENUE" value="$12,340" change={12.5} trend="up" />
        <KpiCard title="USERS" value="1,572" change={8.3} trend="up" />
      </div>
      <BarChart data={chartData} xAxisKey="month" series={[{ dataKey: 'revenue', name: 'Revenue' }]} />
      <DataTable columns={columns} data={users} searchKey="name" />
    </DashboardShell>
  )
}

Result: Full dashboard with sidebar, KPIs, charts, and data table. 2 minutes. Consistent design across 18 themes.

See the live demo — a complete CodeScan dashboard built entirely with FABRK components.

npx create-fabrk-app my-app
cd my-app
pnpm install
pnpm dev

Or add to an existing project:

pnpm add @fabrk/core @fabrk/components @fabrk/design-system

FABRK is a modular monorepo — install only what you need.

FABRK is designed to be consumed by AI coding assistants. Every package includes:

• AGENTS.md — AI-readable docs with all components, props, and usage examples
• AI cost tracking — Built-in AICostTracker with budget enforcement middleware
• Provider fallback — Automatic LLM failover across providers
• Type-safe interfaces — Discoverable by LLMs reading type signatures

Works with Claude Code, Cursor, GitHub Copilot, v0.dev, Windsurf, and Cline.

Terminal-inspired aesthetic with runtime theme switching. 18 themes, design tokens, no hardcoded colors.

import { cn } from '@fabrk/core'
import { mode } from '@fabrk/design-system'

// Full borders — always add mode.radius
<Card className={cn("border border-border", mode.radius)}>

// Buttons — UPPERCASE with > prefix
<Button>> SUBMIT</Button>

// Design tokens — never hardcode colors
className="bg-primary text-primary-foreground"  // correct
className="bg-blue-500 text-white"              // wrong

@fabrk/config (foundational — Zod schemas, zero deps)
@fabrk/design-system (foundational — 18 themes, design tokens, CSS vars)
    |
@fabrk/core (runtime — plugins, middleware, hooks)
    |
@fabrk/auth, payments, email, storage, security, ai
    |
@fabrk/components (109+ UI components, charts, dashboard)
@fabrk/store-prisma (Prisma database adapters)
    |
@fabrk/framework (own Vite 7 runtime + file-system routing + SSR + AI agents + tools + MCP)
create-fabrk-app CLI (scaffolding)

Key patterns:

• Adapter pattern — All external services behind provider-agnostic interfaces
• Store pattern — Injectable stores with in-memory defaults for dev/testing
• Web Crypto API — Used throughout (no Node.js crypto — runs on edge runtimes)
• Config-driven — fabrk.config.ts at project root, validated by Zod

# Prerequisites: Node.js 22+, pnpm 9+

pnpm install        # Install dependencies
pnpm build          # Build all 19 packages (13 libs + 6 examples)
pnpm test           # Run 3,221 tests
pnpm type-check     # TypeScript validation across 22 packages
pnpm dev            # Watch mode

The docs site lives at framework.fabrk.dev and dogfoods FABRK packages. It includes:

• 40+ documentation pages with Cmd+K search
• 30 component doc pages with live previews
• Interactive 18-theme switcher
• Tutorials for dashboards, auth, and payments
• Live demo dashboard

cd examples/docs
pnpm dev    # localhost:3001

See CONTRIBUTING.md for development setup, workflow, and commit conventions.

Built by Jason Poindexter. FABRK started as a production boilerplate at fabrk.dev — years of shipping SaaS products distilled into a framework so the next project starts further ahead.

MIT