SaaS product launch page

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

   Copy first-time setup command
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.

/* 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

mode, theme, className

Controlled by default. Explicit mode="demo" enables fictional content and local interactions; demo service callbacks are never called. Theme inherits the host or can be scoped to dark.

brand, copy, primaryHref, secondaryHref, homeHref, navigation, footerLinks, copyright

Provide actual product copy and ordinary host-owned URLs. Copy is a typed partial object covering every section. Missing primary URLs disable the CTA; executable URL schemes are rejected.

features, services, steps, highlights, metrics, testimonials, faq

Readonly host-owned collections update directly from props; explicit [] remains empty even in demo mode. Features can choose growth/reflecting/lookingAhead original inline code illustrations; testimonials use initials and contain no inferred endorsements.

plans, billingPeriod, onBillingPeriodChange

Plans contain id/name/description/benefits and prices.monthly/annual objects with exact amount/period/note strings. Never calculate discounts. A missing period shows Not offered. A single-period offering selects that available period unless the host explicitly controls billingPeriod.

onSelectPlan(planId, period)

Optional awaited host callback. Missing callback disables selection; rejection keeps an error and retry action. It performs no payment. Demo chooses locally and never calls the callback.

onSubscribe(email), subscriptionSuccessMessage

Optional awaited real host subscription callback. Missing callback disables the email field and submit. Pending guards duplicate submits, rejection preserves the address and retry, and success appears only after resolution. Demo never sends the address or invokes this callback.