Headless Kit
WordPress stays the editor your clients know. The site runs on Next.js with shadcn/ui components you own.
Headless Kit is a ready-made Next.js 16 frontend and a small companion WordPress plugin. Install the plugin, paste one secret into the frontend, and your WordPress content renders as typed React components, with previews, instant updates and an editor that looks like the site. This site, madebypless.dk, runs on it.
What you get
Gutenberg blocks as components
Core blocks render as React components built from shadcn/ui, not an HTML blob. Tables, accordions, quotes, buttons, images and galleries all look like the rest of the site. Anything else falls back to WordPress' own HTML.
One look for site and editor
Pick a style on ui.shadcn.com/create and apply it with one command. The WordPress editor gets the same colors, fonts and block styles, plus a dark mode preview.
Previews and instant updates
The Preview button opens the draft on the Next.js site. Publishing, editing or deleting a post refreshes exactly the cached pages that changed.
- Landing page, projects and menus. The homepage is a page you edit in Gutenberg, a Projects section handles case studies, and header and footer menus come from WordPress.
- Custom post types and taxonomies. Any public post type in the REST API gets its own pages, and an index when it has an archive. No route files to write.
- ACF fields. Advanced Custom Fields come through as a typed object: images, links, relationships, repeaters and flexible content.
- SEO plugins. Titles, descriptions, canonicals and social images from Rank Math, SEOPress or Yoast end up in the page metadata.
- Images and video. Images and galleries set to Expand on click open full size in a lightbox. YouTube and Vimeo embeds become responsive players.
- Dark mode. A light/dark toggle that follows the visitor's system until they pick.
- No GraphQL, no extra plugins. It uses the WordPress REST API and one small companion plugin.
Three looks, one command
The kit comes with three named looks, each with light and dark mode. Switch with pnpm style studio, editorial or bold, or apply any preset from ui.shadcn.com/create. The WordPress editor follows along.
How it works
- Upload the plugin to your WordPress site and enter your frontend URL.
- Copy the shared secret into the Next.js app's environment and run it. The plugin's settings page turns green when they're connected.
- Write in WordPress as usual. Deploy the frontend to Vercel or your own server with
node server.js.
Setup takes about five minutes. The guide covers it step by step, for developers and for the people writing in WordPress.
Pricing
One-time payment, no subscription. Both licenses are perpetual and include 12 months of updates.
Personal · $99
For one website, yours or a client's. You can keep using it after the 12 months of updates end.
Agency · $249
For any number of websites, yours or your clients'. Clients keep and can change the sites you build.
After checkout you get an email with two downloads: the Next.js kit and the WordPress plugin (GPL v2 or later). Payments and delivery are handled by Lemon Squeezy.