Project

Payload Kit

A Payload CMS 3 and Next.js 16 starter with Tailwind and shadcn/ui: the website and the editor in one app.

Client: Own product
Year: 2026
Role: Design & development

Payload + Next.js

The problem

Headless WordPress works, but it means running two systems: a PHP server for the editor and a Next.js app for the site. Payload CMS runs inside the Next.js app itself, with content models written in TypeScript. Payload Kit is a clean starting point for that setup, with the tooling already in place.

What's in it

Payload CMS 3, Next.js 16, Tailwind CSS v4 and shadcn/ui in a single app: the website and the admin panel deploy together
Pages with drafts, rich-text content and a hero image. A page with the slug home becomes the front page, and every other published page gets its own URL
Data loaded through Payload's Local API, with generated TypeScript types for every collection
SQLite for local development, with a switch to Postgres for production on Vercel
Biome for linting and formatting, a pre-commit hook, Vitest and Playwright tests, and a Dockerfile

Screenshots

Payload Kit front page in light mode: a large "Small, focused tools for web developers." headline, an intro paragraph, a "See the pages" button and a terminal card listing the pages — The front page, driven by the page with the slug home

Payload Kit front page in dark mode, with light text on a near-black background — The same page in dark mode

Payload Kit About page: a /about label, the page title, a lead paragraph and rich-text body content — A regular page, rendered at its slug

Status

Under development, and an early start: the foundation is in place and the rest is on its way.