How to Build a Website with shadcn/ui Blocks

If you have built a landing page with shadcn/ui before, you know the routine. You browse a few block libraries, copy a hero, copy a pricing section, paste them into a page, fix the imports, rename every heading and then do the same thing again for the next page. None of it is hard, but it takes an afternoon that you would rather spend on the product itself.

The Shadcn UI Kit Page Builder turns that routine into a visual workflow. You pick blocks from a library, arrange them into pages, edit the content right on the canvas and export the result as clean Next.js code. In this guide we walk through the whole process, from an empty project to a site running in your own repository.

What the Page Builder is

The Page Builder is a browser based editor for putting together multi-page websites from ready-made shadcn/ui blocks. It is not a hosted website builder and it does not lock your site into a platform. What you get at the end is a regular Next.js project with React components, Tailwind CSS classes and the same shadcn/ui primitives you already know.

A few things it handles for you:

Block library: 300+ Marketing, Ecommerce and Dashboard UI blocks in one searchable panel.
Inline editing: change text, images, buttons and links directly on the canvas.
Multi-page sites: create as many pages as you need and choose which one is the home page.
Shared layout: place a header and footer once and they show up on every page.
Responsive preview: switch between desktop, tablet and mobile widths with real breakpoints.
Code export: download a Next.js project or add the pages to an existing app with the shadcn CLI.

Who it is for

The Page Builder is most useful when you need a good looking site quickly and still want to own the code:

Indie hackers and founders who need a landing page, a pricing page and a changelog before launch day.
Agencies and freelancers who build similar marketing sites for different clients and want a faster starting point.
Product teams with an existing Next.js app that need a few marketing pages without setting up a separate project.

Building your first site, step by step

1. Start a project

Open the Page Builder and a new project starts automatically. You can build and preview without an account. As a guest, your project is saved in the browser. When you sign in, it moves to your account, where you can keep several projects and switch between them from the Projects menu in the top bar.

Every project starts with two pages: Layout, which holds the header and footer, and Home.

2. Add blocks from the library

Switch to the Blocks tab in the left panel. You can search by name or category, for example "pricing", "testimonial" or "footer". Click a block to add it to the current page, or drag it to the exact spot you want. While you drag, the canvas zooms out so you can see where the block will land.

Once blocks are on the page, you can move them up and down, duplicate them or remove them from the small toolbar that appears when a block is selected.

3. Edit the content on the canvas

This is where most of the time savings come from. Instead of hunting for strings in JSX, you click the text you want to change and type. The same goes for:

Images: swap the source or upload your own image, and set a custom size when you need one.
Buttons: change the style variant and size.
Links: update the URL and the accessible label.
Elements you don't need: remove them. A hero with two buttons can become a hero with one, or a navbar can lose its search icon.

Undo and redo are always available, including the familiar Cmd+Z and Cmd+Shift+Z shortcuts.

4. Set up the header and footer once

Open the Layout page and add a navbar to the header area and a footer to the footer area. They now appear on every page of the site, exactly like a shared layout in Next.js. The content area in between is locked on this page, so you can't accidentally drop a section into the wrong place.

5. Add more pages

Use New page to add pages like Pricing, About or Blog. Each page gets its own URL based on its name, so a page called "Pricing" ends up at /pricing. You can mark any page as the home page, and the URLs you see in the live preview are the same ones you get in the exported project.

6. Check every breakpoint

The device switcher in the top bar resizes the canvas to desktop, tablet or mobile width. Because the canvas renders inside its own frame, Tailwind breakpoints like md: and lg: behave exactly as they would on a real device. When you want to click through the site as a visitor would, the Preview button opens a live version of every page in a new tab.

Exporting your site

When the site looks right, open the Export menu. There are two ways to take it into code.

Option 1: Download a Next.js project

Choose Next.js project and you get a .zip with a complete, ready to run app:

npm install
npm run dev

The project only includes the blocks you used, the shadcn/ui components they depend on and the images they reference. There are no builder files, no runtime and nothing you need to strip out.

Option 2: Add the pages to an existing project with the shadcn CLI

If you already have a Next.js app, choose shadcn CLI. The Page Builder prepares your project and gives you a single command to run in the root of your app:

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

The shadcn CLI then adds your pages and blocks, installs any missing shadcn/ui components and adds the npm packages the blocks need. Your pages go into a route group named after your project, which keeps your own root layout, fonts and providers untouched.

A couple of things to keep in mind with the CLI option:

The blocks are built on Radix UI, so your project should use a Radix based shadcn/ui style.
If your project already has an app/page.tsx, remove it so the new home page can take its place.

What the exported code looks like

Both export options produce the same readable structure. For a project called "Acme" with a home page and a pricing page, it looks like this:

app/
  layout.tsx
  (acme)/
    layout.tsx
    page.tsx
    pricing/page.tsx
    blocks/
      navbar.tsx
      hero.tsx
      feature.tsx
      pricing.tsx
      footer.tsx
components/
  ui/
    button.tsx
    card.tsx

Each block lives in a file named after what it is, like blocks/hero.tsx, and if you use two hero sections the second one becomes hero-2.tsx. A page is just a list of those blocks:

import Hero from "./blocks/hero";
import Feature from "./blocks/feature";
import Pricing from "./blocks/pricing";

export default function Page() {
  return (
    <>
      <Hero />
      <Feature />
      <Pricing />
    </>
  );
}

The edits you made on the canvas are written straight into the block source. Your headline is in the JSX, your image path is on the Image component and the button you removed is gone from the file. There is no content file or config layer between you and the markup, so you can keep working on the code the way you normally would.

Page Builder or copying blocks by hand?

Copying blocks one by one still works well when you only need a single section in an existing page. The Page Builder is the better fit when you are putting together a whole page or a whole site:

You see the full page while you build it, instead of assembling it in your head.
Content changes happen on the canvas, not in a dozen JSX files.
Headers, footers and routing are set up for you.
You get one export with consistent file names instead of a folder of pasted snippets.

Tips for a better result

Start with the layout. Picking the navbar and footer first makes it easier to choose sections that match their style.
Write real copy early. Placeholder text hides spacing problems. Real headlines show you right away when a section feels crowded.
Check mobile before you export. Some sections look great on desktop and need a lighter variant on small screens.
Pair it with a theme. Build your pages first, then use the Theme Generator to create colors and typography that match your brand, and drop the CSS into your project.

Frequently asked questions

Is the Page Builder free?

Building, editing and previewing are free. Exporting the project as code is included in the Pro, Team and Enterprise plans. You can see the details on the pricing page.

Do I need an account to use it?

No. You can build a project as a guest and it is saved in your browser. Signing in lets you keep multiple projects in your account and open them from any device.

Can I add the pages to a project I already have?

Yes. That is what the shadcn CLI export is for. It adds your pages as a route group, so your existing root layout, fonts and providers stay as they are.

Which shadcn/ui style does my project need?

The blocks are built on Radix UI. For the CLI option, use a Radix based shadcn/ui style in your project. The Next.js project export already comes set up correctly.

Can I keep editing after I export?

Yes, in both places. The exported code is plain React and Tailwind, so you can change anything in your editor. Your project also stays in the Page Builder, so you can come back, make changes and export again.

Are my images included?

In the Next.js project export, the images used by your blocks and the images you uploaded are copied into the public folder. With the CLI export, the block images are loaded from their hosted URLs, so they work without extra setup.

Get started

The fastest way to see how it works is to try it. Open the Page Builder, add a hero, a features section and a footer, change the headline and switch to the mobile view. It takes a couple of minutes, and you will have a real page to show for it. If you want a closer look at the features first, the Page Builder overview walks through each of them.