ConvertFast UI: Generate Editable Next.js Landing Pages

ConvertFast UI is an open-source CLI for creating editable landing pages and shadcn/ui blocks in an existing Next.js application.

It can generate a complete route from either of two seven-section templates or install one section, with the React and TypeScript source written into your project.

Features

Complete landing pages from default and editorial templates.
7 marketing sections for hero, logo cloud, features, social proof, CTA, FAQ, and pricing.
Standalone shadcn/ui blocks and a color picker component.
Next.js 14, 15, and 16+ with App Router or Pages Router.
Root-level and src/ router layouts.
Tailwind CSS 3 and 4.
Editable local React and TypeScript source.
Existing generated files preserved until an overwrite is explicitly requested.

How to Use ConvertFast UI

Run ConvertFast from the Next.js application directory.

Commit existing changes before generation because the CLI writes application files and copies sample assets.

Initialize shadcn when the project does not already use it:

npx shadcn@latest init

Initialize ConvertFast and create /marketing:

npx convertfast-ui@latest init --yes
npx convertfast-ui@latest page create marketing

Use the second page composition with:

npx convertfast-ui@latest page create launch --template editorial

Create the homepage with:

npx convertfast-ui@latest page create .

Relative page names create nested routes:

npx convertfast-ui@latest page create marketing/pricing

Landing Page Sections

Both templates contain these seven sections. Replace the sample branding, testimonials, prices, images, claims, and links before publishing.

Section	CLI Name
Hero	`hero-section`
Logo cloud	`logo-cloud`
Features	`feature-section`
Social proof	`social-proof`
Call to action	`cta`
FAQ	`faq`
Pricing	`pricing`

Add a Section to a Custom Page

Place the ConvertFast insertion marker at the position where the new section belongs:

{/* convertfast:sections */}

Add the section:

npx convertfast-ui@latest page add marketing faq

Replace a Generated Section

Save local edits before using --force. The command replaces the source for that section.

npx convertfast-ui@latest page add marketing hero-section --template editorial --force

Install a Standalone Block

Install one section when the existing page does not need a complete ConvertFast template:

npx convertfast-ui@latest block add hero-section

Select the editorial variant:

npx convertfast-ui@latest block add faq --template editorial

ConvertFast also ships a standalone color picker:

npx convertfast-ui@latest block add color-picker

The color picker also has a direct shadcn registry endpoint:

npx shadcn@latest add https://convertfa.st/r/color-picker.json

App Router and Pages Router File Placement

ConvertFast detects the application’s router during initialization. Projects containing both routers default to App Router.

Select Pages Router explicitly when necessary:

npx convertfast-ui@latest init --yes --router pages

Router	Generated Page	Section Files
App Router	`<route>/<page>/page.tsx`	Local `_components` directory
Pages Router	`<route>/<page>/index.tsx`	Configured components directory outside `pages`

Registry Modes

Mode	Behavior
`off`	Copies bundled template source and installs its missing UI dependencies.
`auto`	Attempts registry installation and falls back to template dependency installation when necessary.
`only`	Requires registry installation to succeed.

Select another mode explicitly:

npx convertfast-ui@latest page create marketing --registry auto

Use a separately configured remote registry through its namespace:

npx convertfast-ui@latest page add marketing hero-section --registry auto --namespace @your-registry

Use --skip-install with the default --registry off workflow when dependency installation belongs to another step:

npx convertfast-ui@latest page create marketing --skip-install

Configuration

init records the detected Next.js version, router directory, and shadcn configuration in landing-pages.json. It also copies sample assets into the application.

Re-run initialization after intentionally changing the router configuration:

npx convertfast-ui@latest init --yes --force --router pages

Use another shadcn configuration file for source generation with:

npx convertfast-ui@latest init --components path/to/components.json

Overwrite Behavior

--force has different consequences depending on what ConvertFast installs.

For generated pages and sections, it replaces the relevant generated source. Save customized files before running the command.

For bundled blocks, it replaces the requested block while preserving existing public assets and shared UI components.

A remote registry selected through --namespace follows shadcn overwrite behavior, including its dependency and asset handling.

Troubleshooting

A generated section already exists

A page created with page create contains all seven section types. Use --force only when you intend to replace one of them.

The CLI cannot generate an existing route

Check the existing file extension. ConvertFast can replace generated .tsx files with --force; a route implemented with another extension must be moved or renamed first.

Dependency installation fails

Check network access, components.json, component aliases, and the selected registry mode. Use --skip-install with --registry off when dependencies will be installed manually.

ConvertFast selects the wrong router

A project containing both App Router and Pages Router defaults to App Router. Re-run initialization with --router pages when the generated page belongs under Pages Router.