The admin panel you don't have to build.

One typed config becomes a full /admin route for your Next.js app — CRUD, dashboards, queues, realtime. Drizzle or Prisma. Eject when you outgrow it.

Quick startDetects your ORM and scaffolds /admin
$ pnpm dlx @flowpanel/cli init
Works withNext.js 16React 19DrizzlePrismaTypeScript
localhost:3000/admin
FlowPanel admin — the Overview dashboard with metric cards, a live throughput group and a realtime crawl-rate chartFlowPanel admin — the Overview dashboard with metric cards, a live throughput group and a realtime crawl-rate chart

Production model

Your application stays the security boundary.

Open the production checklist

Runs inside your Next.js app

The admin, handlers, auth and database client ship with the application you own.

See the architecture

No external control plane

FlowPanel does not receive your database credentials or application rows.

Review data ownership

Server-enforced policy

Roles, operations, fields and tenant scope are checked again on every request.

Inspect authorization

You keep operational control

Identity, migrations, deployment, observability and infrastructure remain explicit.

Understand tenant scope

This config becomes this admin.

No page tree per resource to maintain. Add a column to your schema, list it — the typed UI follows. Everything you don't list stays out.

flowpanel.config.ts
import { defineAdmin, resource } from "@flowpanel/kit";
import { drizzleAdapter } from "@flowpanel/kit/drizzle";
import { withClerk } from "@flowpanel/kit/auth";
import { db } from "@/db";
import * as schema from "@/db/schema";

export default defineAdmin({
  adapter: drizzleAdapter({ db, schema }),
  auth: withClerk({ requireRole: "admin" }),
  resources: [
    resource(schema.jobs, {
      columns: [
        "title",
        "platform",
        "category",
        "priceUsd",
        "postedAt",
      ],
      filters: [
        {
          field: "platform",
          type: "select",
          options: ["LinkedIn", "Remote OK", "Wellfound"],
        },
      ],
    }),
  ],
});
  • A typed table — exactly the five columns you listed, in order.

  • A platform filter — URL-synced and shareable.

  • Search, sort, pagination and a row drawer — included, nothing wired.

  • Type-checked end to end — misspell a column and it won't compile.

Three steps. No scaffolding.

flowpanel introspects your schema, writes one config, scaffolds your /admin page.

  1. 01

    Init

    One command: detect your ORM, install the packages, write a typed config. No manual setup.

    $ pnpm dlx @flowpanel/cli init
     detected prisma · 9 models
     installed @flowpanel/kit, @flowpanel/cli
     wrote flowpanel.config.ts
  2. 02

    Configure

    Pick the resources you want, add filters, override the column you care about.

    defineAdmin({
      resources: [resource(schema.users, { columns: ["email"] })],
    })
  3. 03

    Mount

    One page export, one route handler. The /admin surface is fully typed.

    $ cat app/admin/[[...slug]]/page.tsx
     export default createFlowpanel(config).page

Everything an internal tool needs.

  • Typed CRUD

    List, create, edit, delete — columns and filters type-checked against your schema.

  • Dashboards & charts

    Metric, table, and chart widgets with server-prerendered cells.

  • BullMQ queues

    Queue health and job UIs, surfaced straight from the adapter.

  • Realtime over SSE

    Lists refresh live — in-memory driver for dev, Redis for production.

  • Auth & roles

    Bring Clerk, NextAuth, or Lucia; gate the whole panel by role.

  • Command palette

    ⌘K jumps to any registered resource. Included, no wiring.

  • Multi-tenant scope

    Fail-closed row scoping per tenant, enforced on every query.

  • Audit log

    A mutation audit trail with a pluggable sink.

  • Dark mode

    Persists across navigations, with no first-paint flash.

Three layers. Take only what you need.

Stay declarative, swap a single component, or take the source — without ever losing your types.

  • Tweak with config

    Override a column renderer, add a row action, or hide a field.

    columns: [{ field: "status", render: (row) => row.status }]
  • Swap a component slot

    Replace any built-in — MetricCard, Badge, Pagination and seven more — with your own component.

    theme: { components: { MetricCard: MyMetricCard } }
  • Take the source

    One command writes a five-file scaffold into your repo, lists every file, and comments the config entry out. Every file is yours.

    $ pnpm flowpanel eject resource users
     app/admin/users/page.tsx
     app/admin/users/new/page.tsx
     app/admin/users/[id]/page.tsx
     app/admin/users/[id]/edit/page.tsx
     app/admin/users/actions.ts
     Ejected resource users

See it running.

Two complete admins live in the repo, seeded and runnable. Read the config that produced them, or follow each README to start one locally.

Open the live demo

Get started

Start with the CLI.

Run the initializer in your Next.js app. It detects Drizzle or Prisma, installs the packages, and writes your first typed config.

In your project

$ pnpm dlx @flowpanel/cli init
Read the getting started guide