Next.js 16 · shadcn/ui · Clerk · Cloudflare

Ship the app, not the setup.

Open Canvas is a production-shaped starter: authentication, themes, typed environment validation, and working Cloudflare D1, KV, and R2 clients. Every screen is built from shadcn/ui components.

Batteries included

The boring parts are done. Replace the sample screens with your product.

Auth that is already wired

Clerk provides sign-in, sign-up, session handling, and a pre-themed user button that matches shadcn.

D1 over the REST API

A typed query helper with parameter binding, plus a live health check on the dashboard.

KV reads and writes

List keys, read values, and write with an optional TTL using the Cloudflare API token.

R2 ready

Bucket metadata works today. Add an R2 access key pair for S3-compatible object operations.

Light, dark, and system

next-themes with a shadcn dropdown toggle. No flash of the wrong theme, no hydration warnings.

Typed environment

Zod validates every secret on first use and fails with a message that says exactly what is missing.

A stack that stays current

Pinned to the latest stable releases. Read AGENTS.md before adding code — Next.js 16 and shadcn v4 both changed conventions.

Next.js 16 · App Routershadcn/ui (Base UI) · Tailwind CSS v4ClerkCloudflare D1 · KV · R2TypeScript · strictVercel

Environment

Validated lazily with Zod. Values live in .env.local and never reach the client.

CLOUDFLARE_API_TOKEN

Scoped API token used for D1, KV, and R2 calls.

CLOUDFLARE_ACCOUNT_ID

Account that owns the resources.

CLOUDFLARE_D1_DATABASE_ID

Target D1 database.

CLOUDFLARE_KV_NAMESPACE_ID

Target KV namespace.

CLOUDFLARE_R2_BUCKET_NAME

Target R2 bucket.

CLERK_SECRET_KEY

Server-side Clerk key, written by the Clerk CLI.