SaaS Website Templates

Product sites for software companies, where the hero is something the visitor can operate rather than a screenshot of a dashboard. They range from a one-screen waitlist to multi-page marketing sites with pricing, customer stories and sign-up pages.

10 templates, 1 free, no build step

£99£79.20

Halloween: 20% off the Vault until 31 October. Ends in 7d 09h 14m 16s

The Vault

Unlock the Vault library for £79.20

All 304 premium items in the Vault library, plus future additions to the library.

Browse templates

Why a SaaS site should let visitors use the product

The default SaaS landing page is a headline, a gradient and a static dashboard screenshot, and visitors scroll past it because they have seen it everywhere. The templates here show the product working instead. The SaaS landing page template is a four-page site in a big serif on flat colour bands, where visitors drag a shift on a staff rota and watch the wage bill recount. The fintech template is five pages built around a card terminal that prints a receipt line by line as you scroll, and its sign-up page prints the visitor's own business name on that receipt.

Developer products get demos in their own vocabulary. The email API template is set like airmail stationery: outbound letters fly into a sorting tray, filter by email type, open to a delivery report and take a DELIVERED rubber stamp. The incident alerting template runs a live alert wire where monitor events stream in, tick the hero counters and expand into incident cards. The multi-page SaaS template swaps only the main column when you navigate, so the header, the mega menu and a real light and dark theme survive every page change, and its pricing rail drags along a log scale of monthly volume.

AI and app products have their own register. The AI studio template leads with an aperture hero in poster-scale type and a clickable art-direction mixer. The AI research template sets a helical three.js pixel reactor behind the hero and adds a candidate workbench. The mobile app landing page has a real 3D phone, built in three.js, that turns to a new screen for each of four features as you scroll. The team chat template is a full dark app shell whose conversation plays itself, with typing indicators, reactions and a thread that opens on cue.

Pricing is where SaaS templates are most often left unfinished, so it is built properly here: a calculator that reads its prices from data attributes, a fintech calculator that compares pricing models and names the cheapest, and monthly and yearly toggles with both figures in the markup. For a product that has not launched yet, the waitlist page is one screen built around a product photograph, with a tuning dial visitors drag through the launch details to the email sign-up.

How to adapt a SaaS template to your product

The product demos run on plain data in the markup or in a short array at the top of the script, so pointing one at your product is mostly a content job.

  1. 1

    Rewrite the hero around one task

    Pick the single thing your product does that a visitor would recognise from their own week, and make the hero demo show that. The demos are built to be re-pointed, not decorated.

  2. 2

    Replace the demo data

    The email stream is one plain array, the rota totals are computed from the markup, and the alert wire ships with real rows in the HTML. Swap in your own records and the animation keeps working.

  3. 3

    Set your plans and prices

    Plans are cards in the markup and calculator prices are data attributes. Change them there; there is no billing logic to unpick.

  4. 4

    Wire the sign-up form

    Sign-up and waitlist forms validate in the browser and show a success state, but send nothing. Point them at your auth provider, a waitlist tool or a form service before launch.

Illustrative: prices live in the markup, not the script
<article class="plan" data-monthly="29" data-yearly="290">
  <h3>Team</h3>
  <p>Up to 20 seats, shared workspaces</p>
</article>

SaaS & startup at a glance

Compare the 10 templates in this category by what they do, what they are built with, and whether they run light or dark.
Template What it doesBuilt withTone
AI Studio SaaS Template A saturated editorial SaaS template with an aperture-led type hero, a scroll-directed visual sequence, and a clickable art-direction mixer. ScrollTrigger Dark
AI Research Template A helical three.js pixel reactor, interactive materials programmes and a candidate workbench for research labs, AI startups and technical product websites. ScrollTrigger Mixed
Email API SaaS Template A complete one-page landing site for a transactional email API, set like airmail stationery: outbound letters fly into the hero's sorting tray on a timed stream, filterable by email type, each one openable to its delivery report and frankable DELIVERED with a rubber-stamp thunk. ScrollTrigger Light
Incident Alerting SaaS Template A complete one-page SaaS landing site for an uptime monitoring and incident alerting product, built around a live alert wire: monitor events arrive on a timed stream, shunt the list down, tick the hero counters, and expand into incident detail cards on hover or focus. ScrollTrigger Dark
Multi-Page SaaS Template A four-page SaaS website template with animated page transitions and a real light/dark theme: links fetch the next page and swap only the main column, so the header, the mega menu and the theme survive every navigation. ScrollTrigger Mixed
SaaS Landing Page Template A four-page SaaS site set in a big serif on flat tomato, moss and ink bands, where every product view is a live HTML window collaged over a colour slab and a real photograph. ScrollTrigger, Draggable, Flip Light
Fintech Template A five-page fintech website template: a home page with a live running total and account dashboard, payments with a tap demo, pricing with plans and a calculator, customer stories and a sign-up page where a card terminal prints your receipt. ScrollTrigger Light
Team Chat App Template A dark-mode team chat web-app UI whose conversation plays itself: a choreographed GSAP replay of launch morning with typing indicators, landing messages, popping reactions, a mention sweep and a thread that opens on cue, inside a full app shell with channel switching, a composer and a mobile drawer. GSAP core Dark
Mobile App Landing A one-page site for a mobile app with a real 3D phone that turns to a new screen as you scroll through four features, plus store buttons, pricing with a monthly and yearly toggle, an FAQ and a QR download block. ScrollTrigger, SplitText Mixed
Waitlist Page Template A one-screen pre-launch waitlist page built round one product photograph: visitors drag the radio's tuning knob, static gives way to stations that tune in the price, materials and batch, and launch day holds the email sign-up. GSAP core Light

Frequently asked questions

Do the SaaS templates include pricing, changelog or docs pages?

Several include a full pricing page: the multi-page SaaS template has pricing and a changelog, the SaaS landing page template has pricing, a customer story and sign-up, and the fintech template has plans, a calculator and a full fee table. None ships a documentation section. The inner page layouts are a sound starting point if you want to add one.

Does the sign-up form create accounts?

No. Sign-up, waitlist and account forms are static front ends: they check the required fields and show a success panel, but nothing is sent or stored. Connect them to your own sign-up endpoint, a form service such as Formspree or Netlify Forms, or your CRM.

Is there a light and dark mode?

The multi-page SaaS template has a real light and dark theme, applied before first paint and remembered between visits. Several others ship measured palettes that swap from one data-palette attribute, including a light mode for the team chat app. The rest are retuned through the colour tokens at the top of the stylesheet.

Can I move a SaaS template into React or Next.js?

Yes. The templates ship as plain HTML, CSS and JavaScript, so moving one into a React or Next.js project means porting the markup into components and calling the same GSAP code from an effect hook. Nothing in the animation depends on the page being static.