I Built a Visual Page Builder for shadcn/ui That Exports Clean Next.js Code

Visual page builders have a reputation problem among developers, and it is earned. You drag a few sections around, export, and get a pile of wrapper divs, inline styles, a proprietary runtime and a JSON schema you now have to maintain forever. Most developers try it once and go back to writing JSX by hand.

I wanted the speed of a visual builder without that trade-off. So the Shadcn UI Kit Page Builder has one rule: the exported code must look exactly like code you would write yourself. Plain Next.js pages, plain shadcn/ui blocks, nothing extra to strip out.

Shadcn UI Kit is an independent product built on shadcn/ui. It is not the official shadcn project.

How it works

Three steps, from an empty page to code in your repository.

1. Add blocks

The builder pulls from the Shadcn UI Kit blocks library: Marketing, E-commerce and Dashboard UI blocks, over 470 of them. Heroes, navbars, feature grids, pricing tables, testimonials, FAQs, footers, product lists, checkout pages, stat cards, charts, tables and forms.

Search the library from a single panel, click a block to add it, or drag it exactly where you want it. Reorder, duplicate and remove blocks as the page takes shape.

You start from proven, designed sections instead of a blank canvas.

2. Edit content right on the canvas

No props panels, no config files. Click any text and type. Swap images, change button styles and link targets, remove the parts of a block you do not need. Every change shows up instantly, and undo and redo are always there.

This is the part that usually takes the longest when you assemble a page by hand: copying a block, opening the file, hunting for the right string, saving, checking the browser. Here it is click and type.

3. Preview every breakpoint

Switch the canvas between desktop, tablet and mobile widths. Blocks render with real breakpoints, so what you see on each device is what your visitors get. Open the live preview to click through every page like a real site.

A whole site, not one landing page

Most block tools stop at a single page. The Page Builder handles multi-page sites:

• Add as many pages as your site needs: home, pricing, about, contact, blog, product
• Pick which page is the home page
• Place the header and footer once in a shared layout, and they appear on every page, exactly like a Next.js layout.tsx

The structure you build is the structure you export.

Export: two options

When you are happy with the result, click Export.

Option 1: Download a Next.js project

You get a zip with a ready-to-run Next.js project. Unzip, install, run:

npm install
npm run dev

Good for new sites, client projects and prototypes you want to deploy right away.

Option 2: Install into your existing app with the shadcn CLI

Already have a Next.js project? The builder gives you a single command that installs all your pages into it:

npx shadcn@latest add https://shadcnuikit.com/r/pb-<project-id>.json

The pages land in their own route group together with the shared header and footer. The CLI also installs every shadcn/ui component the blocks depend on. If you want the exported home page to be your root page, remove your existing app/page.tsx.

The exported blocks are built on Radix UI, so use a Radix based shadcn/ui style in the target project (npx shadcn@latest init --base radix for a fresh one).

What you get in the code

This is the part I care about most. The export contains:

• Next.js App Router pages and a layout
• The block components you used, with your edited content
• The shadcn/ui components they depend on

And nothing else. No builder runtime, no editor code, no wrapper components, no JSON schema. Each block is a normal React component styled with Tailwind CSS v4 and your shadcn/ui theme variables. Open it in your editor and keep working as if you had written it.

Because blocks use the standard theme tokens, you can restyle the whole site by changing your CSS variables, or create a new theme with the Theme Generator.

Saving your projects

When you are signed in, projects are saved to your account automatically. You can open, rename, duplicate or delete them later from your account page. Without an account, projects are saved in your browser, so you can try the builder without signing up.

When to use it

• Landing pages and marketing sites for a new product or a launch
• Client websites for agencies and freelancers: build the structure with the client, export, then customize in code
• Store fronts using the e-commerce blocks
• Prototypes you want to click through before writing any code
• A starting point for a site that you will keep developing by hand

Builder or AI editor?

Shadcn UI Kit also has an MCP server that lets Claude Code or Cursor assemble pages from the same blocks with a prompt. The two work well together: the builder is better when you want to see and arrange the page yourself, the MCP server when you want to describe it and let the agent do the work. Both produce the same kind of plain block code. More about MCP.

Try it

Building and previewing pages are free, no account needed. Exporting the code comes with the Shadcn UI Kit plans, details are on the pricing page.

👉 Open the Page Builder

If you want a step by step walkthrough, there is also a guide on building a website with shadcn/ui blocks.

What would you want a page builder for shadcn/ui to do next? Leave a comment, feedback goes straight into the roadmap.