WebberUI
繁體中文

Full-Stack SaaS Starter

Production-ready SaaS starting point: marketing page plus auth and dashboard previews.

ProMarketingSaaS8 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/saas-starter.en.json?t=<install token>"

The whole page lands in app/templates/saas-starter/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Nav Bar and Hero

    A sticky glass nav bar, gradient headline, and product window mock, followed by a customer logo marquee.

    hero
  2. 2

    Core Module Bento Grid

    A bento grid presenting the five built-in modules: auth, payments, webhooks, analytics, and team permissions.

    features
  3. 3

    End-to-End Workflow

    Three alternating feature rows with parallax scrolling and three product mock-ups: code, deployment, and operational insights.

    content
  4. 4

    Traction and Customer Reviews

    Four operating figures that count up on entry, followed by four star-rated customer testimonial cards.

    testimonial
  5. 5

    Plans and Pricing

    A three-plan price table with a monthly/annual toggle, rolling price digits, and feature lists.

    pricing
  6. 6

    Modules Out of the Box

    A passkey sign-in card shown side by side with a dashboard preview containing a sidebar, metric cards, and a subscription table.

    product
  7. 7

    FAQ and Call to Action

    A five-question accordion that expands and collapses, closing with a gradient call-to-action card.

    faq
  8. 8

    Footer

    A footer with brand blurb, four columns of navigation links, and system status.

    footer

Full-Stack SaaS Starter is a React SaaS starter template: a complete marketing page plus UI previews of a login card and a dashboard. It is built with Next.js App Router, Tailwind CSS and Motion; the login card and dashboard are static screens with no real authentication or database.

When to use it

  • Pre-launch website and feature tour for a SaaS product
  • Developer tools that want to show marketing content and the app UI together
  • A pitch or demo site for a new product
  • A starting point for projects that will add auth and an admin area later

What to change after installing

  1. The product name is the `BRAND` constant at the top of page.tsx; changing it updates headings, the login card and copy.
  2. Features, numbers, testimonials, plans and FAQs come from the `FEATURE_ROWS`, `STATS`, `TESTIMONIALS`, `PLANS` and `FAQS` arrays; the pricing section has a monthly/yearly toggle driven by each plan's `monthly` amount.
  3. The logo marquee reads `LOGOS` and the footer links read `FOOTER`.
  4. `LoginCard` and `DashboardMock` are visuals only, with no input fields or validation; connect your own auth service and load `METRICS` and `TABLE_ROWS` from your API to make them real.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →