How do I install the Product Landing Page?

Run npx shadcn@latest add @aceternity/product-landing-page in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI installs the page file, all 10 section components, and their dependencies in one step.

Can I change the sections in the Product Landing Page?

Yes. Every section is a separate component in components/product-landing-page, and the page file only imports and orders them. All sections share one brand and one voice, so you can replace the copy in one pass. Reorder or remove sections by editing the page file.

Is this page included with All-Access?

Yes. Pages are included with the Aceternity UI All-Access plan. With All-Access you can preview the page, read every file, and install it with the shadcn CLI.

What frameworks does this page work with?

The page is built for Next.js with the App Router, React, TypeScript, Tailwind CSS v4, and Motion. The sections are plain React components, so they also work in any React-based framework, such as TanStack Start, Vite, React Router, Remix, or Astro with React, when Tailwind CSS and Motion are set up.

1 / 4

Product Landing Page

A light and dark landing page for Marquee, a design tool that runs on your codebase, with a live canvas hero, sign-up and tour modals, and pricing.

Live Preview

Loading preview…

About Product Landing Page

A full landing page for Marquee, a design canvas where every layer is a real component from your codebase. The page looks like a design file: thin column guides, small mono labels and Figma-style selection frames. It has a light and a dark theme and works in any React framework.

The navbar logo works like layers in a design tool. Hover the mark or the words and a selection frame with a live size tag moves to them. The hero has a small version of the app with layers, a canvas with rulers and an inspector. Hover any layer and the inspector shows its size, props, auto layout, tokens and code.

The features section has six interactive drawings: a props panel that drives a real button, a token picker, hover-to-measure redlines, a variant and state grid, a frame that reflows across breakpoints, and a branch that merges back into main. After that come a handoff section with copyable code, review comments pinned to the canvas, a testimonial, and three pricing plans.

"Start designing" opens a sign-up modal with an email code step, and "Watch the 2-min tour" opens a video modal with chapters. The page ends with an ASCII field that lights up around the pointer, and a footer.

One command installs the page at app/product-landing-page/page.tsx and each section at components/product-landing-page/, so you can reorder sections or swap the copy for your own product.

Sections in this page

Each section is written for this page and installs as its own component.

01Navbar with layer-select logocomponents/product-landing-page/navbar.tsx
02Hero with design canvascomponents/product-landing-page/hero.tsx
03Logo cloudcomponents/product-landing-page/logos.tsx
04Featurescomponents/product-landing-page/features.tsx
05Handoffcomponents/product-landing-page/handoff.tsx
06Review commentscomponents/product-landing-page/review.tsx
07Testimonialcomponents/product-landing-page/testimonial.tsx
08Pricingcomponents/product-landing-page/pricing.tsx
09Call to actioncomponents/product-landing-page/cta.tsx
10Footercomponents/product-landing-page/footer.tsx

Frequently asked questions

How do I install the Product Landing Page?: Run npx shadcn@latest add @aceternity/product-landing-page in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI installs the page file, all 10 section components, and their dependencies in one step.
Can I change the sections in the Product Landing Page?: Yes. Every section is a separate component in components/product-landing-page, and the page file only imports and orders them. All sections share one brand and one voice, so you can replace the copy in one pass. Reorder or remove sections by editing the page file.
Is this page included with All-Access?: Yes. Pages are included with the Aceternity UI All-Access plan. With All-Access you can preview the page, read every file, and install it with the shadcn CLI.
What frameworks does this page work with?: The page is built for Next.js with the App Router, React, TypeScript, Tailwind CSS v4, and Motion. The sections are plain React components, so they also work in any React-based framework, such as TanStack Start, Vite, React Router, Remix, or Astro with React, when Tailwind CSS and Motion are set up.

Install needs the Aceternity registry in your components.json. Set up the CLI · All pages

Build websites faster and 10x better than your competitors with
Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

200+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access