# Free page builder for shadcn/ui > Compose a landing page from free shadcn/ui sections, edit it live and export clean Next.js code, or install it with one shadcn command. No signup. Canonical: https://hextaui.com/tools/page-builder Last updated: 2026-10-28 Open the builder at [hextaui.com/tools/page-builder](https://hextaui.com/tools/page-builder). It runs in the browser, needs no account and keeps the whole page, theme included, in the link. ## How it works 1. **Start from a page.** Pick a SaaS, AI product, agency or waitlist starter, or start blank and add from 23 free sections: navbars, heroes, logo strips, features, stats, testimonials, pricing, FAQ, calls to action and footers, two or three layouts each. 2. **Edit on the canvas.** Click a section to select it, then click its headline, text or buttons to type in place. Swap its layout, reorder it, or open Edit for lists, links and images. Check desktop, tablet and phone widths in light and dark, and undo anything with ⌘Z. 3. **Theme and export.** Pick a theme editor preset or paste a theme link. One shadcn command then writes app/page.tsx, a file per section, the theme and the HextaUI components they use. Or copy each file, or download a .zip. ## Sections - Navbar: Simple (logo, centered links and two actions), Floating (a rounded bar that sits inside the page margin) - Hero: Centered (badge, large headline, two actions and a product shot), Split (copy on the left, product shot on the right), Minimal (oversized type, left aligned, no image) - Logos: Row (a quiet line of customer wordmarks), Grid (wordmarks in a hairline grid) - Features: Grid (icon, title and text in three columns), Cards (features in a bordered grid of cells), List (heading on the left, a feature list on the right) - Feature split: Image and text (a feature with a check list beside an image) - Stats: Row (large numbers split by hairlines), With intro (a short story with numbers in cells) - Testimonials: Grid (quotes in three columns), Spotlight (one large quote, centered) - Pricing: Tiers (plans side by side, one highlighted), Single plan (one price with everything it includes) - FAQ: Centered (a heading over a single accordion), Two column (heading and contact link beside the questions) - Call to action: Panel (a centered call to action on a muted panel), Inline (text and actions on one line, between hairlines) - Footer: Columns (brand, tagline and link columns), Simple (brand, a few links and the copyright on one row) ## Install a page The Export dialog shows a command like this one, with your page encoded in the URL: ```sh npx shadcn@latest add https://hextaui.com/r/pages/.json ``` It returns a `registry:block` with `app/page.tsx`, one file per section in `components/sections`, the page theme as `cssVars` when one is set, and the HextaUI components the sections use as registry dependencies. The `` value is the `p` parameter of a share link. [OpenAPI](https://hextaui.com/openapi.json) documents the endpoint. ## Pro blocks [HextaUI Pro blocks](https://hextaui.com/blocks) appear in Add section as locked previews. On a page they export as a placeholder section and an `npx shadcn@latest add @hextaui-pro/` command, which needs [HextaUI Pro](https://hextaui.com/pricing). ## FAQ ### Is the page builder free? Yes. There is no account and no limit. Every free section exports as plain React and Tailwind CSS code under the MIT license, built on free HextaUI components. ### How does the one-line install work? Your page and its theme are compressed into the link. The shadcn CLI fetches https://hextaui.com/r/pages/.json, which turns it back into a registry item with app/page.tsx, a file per section, the theme colors and the HextaUI components they need. ### Where is my page saved? Only in the address bar. Nothing is stored on a server, so copy the Share link to keep a page or send it to someone. ### Can I use a theme from the theme editor? Yes. Pick one of the theme editor presets, or copy Share in the theme editor and paste the link into Theme. The export adds it as app/theme.css, and the install command writes it into your CSS. ### Can I add HextaUI Pro blocks? Pro blocks appear in Add section as locked previews. Placed on a page, they export as a placeholder section and the shadcn command to install the real block, which needs HextaUI Pro. ### Will the sections match my theme? Yes. They only use shadcn/ui theme tokens such as background, foreground, primary, muted and border, so they pick up your colors, radius and fonts, in light and dark mode. ### Does it work outside Next.js? The install command targets the Next.js App Router. The section files are plain React components, so they work in any React app with Tailwind CSS v4 and the HextaUI components installed. ## Related - [All tools](https://hextaui.com/tools) - [Components](https://hextaui.com/components) - [Blocks](https://hextaui.com/blocks)