UIBlocks.
Back to the collection

Marketing · Clean SaaS · 7 blocks

AI tool landing page

A complete, quietly confident product page. Introduce your tool, show its workflow, explain the plans, and answer the questions that matter.

Install pageOpen full demo
Live page preview

Interactive · 1200px viewport · Scroll inside the preview

Install the complete page

One command installs the page component, its matching blocks, shared helpers, and MIT notices into your configured components directory. Prepare your existing project once, then run the page install command.

Before the first install
  1. 1.

    Open your existing React project

    Use React 19+, TypeScript/TSX, and a working Tailwind CSS 4 build. Keep the project's existing router, dependencies, and global stylesheet.

  2. 2.

    Check components.json before installing

    Reuse an existing components.json. Its aliases.components must resolve in TypeScript and the bundler, and tailwind.css must point to the stylesheet your app loads. Do not reinitialize an already configured project.

    Only if components.json is missing; run inside the existing app and follow its framework setup.

    npx shadcn@latest init
  3. 3.

    Include the installed sources in Tailwind

    Keep the host's standard shadcn theme variables, Tailwind @theme mappings, and base border styles loaded (background, foreground, border, sidebar, and chart tokens). Ensure Tailwind scans the actual installed components directory. Restricted source(none), ignored paths, and monorepos may need an @source path relative to the stylesheet. For theme='dark', use a class-based dark variant in the host CSS.

  4. 4.

    Import through your configured components alias

    The @components/ entry is a registry target placeholder, not a JavaScript import. Replace the example's @/components prefix with components.json aliases.components, verify the file printed by the CLI, and mount it in an existing host route.

Missing styles or class-based dark mode?

Merge only the directives your Tailwind CSS 4 stylesheet needs. This source path example assumes src/styles.css and components installed under src/components; adjust it to your actual directory. Keep your host’s existing dark-mode selector and use theme="inherit", or configure this class variant when using theme="dark".

/* Example: src/styles.css */
/* Add only if this directory is outside your existing scan scope. */
@source "./components/uiblocks";

/* Required for the recipe theme="dark" class switch. */
@custom-variant dark (&:where(.dark, .dark *));

Setup references: shadcn configuration · Tailwind source scanning · Dark mode

Install this page

npx shadcn@latest add https://uiblocks.org/r/recipe-tool-landing.json

Import one component

import ToolLandingRecipe from "@/components/uiblocks/recipe-tool-landing/recipe-tool-landing";

export default function ProductPage() {
  return (
    <ToolLandingRecipe
      brand="Your product"
      primaryHref="/app"
      primaryLabel="Open workspace"
      hero={{ title: "A clearer starting point for your next project.", description: "Replace this with your actual product description." }}
    />
  );
}

The import example uses the standard @/components alias. Keep your project’s existing alias and use the installed entry printed by shadcn. Pass your own copy, links, and callbacks through the component options below.

Component options and callbacks
brand, homeHref, primaryHref, primaryLabel
Set the shared product identity and primary action across navigation, hero, plans, FAQ, and footer; ordinary anchors use the host's URLs.
navigation, hero, formats, features, pricing, faq, footer
Pass each section's typed props for real copy, links, capabilities, plan prices, and FAQs. Pricing plans without an actionHref inherit primaryHref.
theme, className
Inherit the host theme by default, or set theme='dark' to enable a class-based dark variant. Use the host Tailwind 4 theme and className to customize the visual system.

The page, block by block

Included in the complete page bundle. You can also reuse each block individually.

  1. 01Product Navigation
  2. 02Product Hero with Preview
  3. 03Supported Format Cloud
  4. 04Workflow Feature Grid
  5. 05Simple Subscription Pricing
  6. 06Product FAQ
  7. 07Product Footer

Keep the design intact

  • Keep the hero title around 8–12 English words or 14–24 Chinese characters; choose a shorter title if it wraps beyond three lines.
  • Use one primary action across the navigation and hero. Connect the action to your real workspace or onboarding route.
  • Keep the 1152px content width, violet accent, neutral borders, and shared section spacing throughout the page.
  • The format strip describes supported formats, not customer endorsements. Replace it with verified capabilities only.
  • Use three concise feature stories, three plans, and around four FAQs. Check longer content on mobile.
  • Frame is a fictional demonstration product. Replace all plan details, demo notices, and claims with your own verified product information before launch.

Hand this recipe to your AI assistant

Build a product landing page using the UIBlocks tool-landing recipe in the clean-saas style. Install the complete recipe-tool-landing registry item in one command and import its ToolLandingRecipe entry. Inspect the complete page preview before adapting typed section props. Keep the content width, typography, borders, violet accent, and section spacing consistent. Replace the fictional Frame content, sample prices and capability claims with my actual product information, and connect primaryHref to my workspace. Do not invent customer logos or reviews. Check the final page with real English and Chinese content at desktop and mobile sizes.

Read the recipe JSON