Page Builder

The Page Builder lets you assemble websites from Shadcn UI Kit blocks in the browser and export clean code. Building and previewing are free. Exporting is included in the Pro, Team and Enterprise plans.

Build a project

  1. Open the builder.
  2. Search marketing, ecommerce and dashboard blocks, then add them with a click or by dragging them onto the page.
  3. Reorder, duplicate or remove sections.
  4. Edit texts, images, buttons and links directly on the page.
  5. Add more pages, choose the home page and share one header and footer across all of them.
  6. Check the result in the desktop, tablet and mobile previews. Undo and redo are always available.

Saving

When you are signed in, projects are saved to your account automatically and listed under Page Builder in your account, where you can open, rename, duplicate or delete them. Without an account, projects are saved in your browser.

Export

Click Export and choose one of two options:

  • Next.js project: downloads a ready-to-run project as a zip file.
  • shadcn CLI: gives you a single command that installs all pages into an existing project, for example:
npx shadcn@latest add https://shadcnuikit.com/r/pb-<project-id>.json

The project has to be saved to your account before you can use the CLI export.

Installing into an existing project

  • The exported blocks are built on Radix UI, so use a Radix based shadcn/ui style in your project.
  • The pages are added in their own route group with the shared header and footer.
  • Remove your existing app/page.tsx if you want the exported home page to become the root page.
IllustrationsTheme Generator