Free SaaS Landing Page Template for Next.js

ChatDeck is a minimal SaaS landing page template built with Next.js, React, TypeScript, Tailwind CSS, and shadcn/ui.

You can use it to build conversion-ready product pages that include every section you need to drive signups, like hero, features, pricing, testimonials, FAQ, and more.

GitHub

Live Demo

Features

8 landing page sections: hero, navigation, video, social proof, features, team, testimonials, pricing, and FAQ.
Uses shadcn/ui components and Tailwind CSS for consistent, accessible styling.
Every section is a self-contained component you can edit.
Dark mode support via Tailwind’s class strategy and shadcn/ui’s theme variables.
Smooth animations with Motion for scroll-triggered effects and the testimonial marquee.
Fully open source for personal and commercial use.
Ready for the App Router and server components.

How To Use It

Installation

git clone https://github.com/ShadcnDeck/chatdeck-shadcn-saas-landing-page-template.git
cd chatdeck-shadcn-saas-landing-page-template
pnpm install
pnpm dev

Open http://localhost:3000 after the development server starts.

Basic Usage

The main landing page lives in app/page.tsx. It composes the section blocks that appear between the shared navbar and footer from app/layout.tsx.

import { FaqSection } from "@/components/Blocks/FaqSection";
import { FeaturesSection } from "@/components/Blocks/FeatureSection";
import Hero from "@/components/Blocks/Hero";
import { LogoCarousel } from "@/components/Blocks/LogoCarousel";
import { PricingSection } from "@/components/Blocks/PricingSection";
import { TeamSection } from "@/components/Blocks/TeamSection";
import { TestimonialSection } from "@/components/Blocks/TestimonialSection";
export default function Home() {
  return (
    <main className="min-h-screen bg-white dark:bg-black">
      <div className="mx-auto max-w-7xl px-6 pt-40">
        <Hero />
        <LogoCarousel />
        <FeaturesSection />
        <TeamSection />
        <TestimonialSection />
        <PricingSection />
        <FaqSection />
      </div>
    </main>
  );
}

Remove a section by deleting its import and JSX entry. Add it back later when the campaign needs more detail.

Build a Focused Early-Access Page

import Hero from "@/components/Blocks/Hero";
import { FeaturesSection } from "@/components/Blocks/FeatureSection";
import { PricingSection } from "@/components/Blocks/PricingSection";
import { FaqSection } from "@/components/Blocks/FaqSection";
export default function Home() {
  return (
    <main>
      <Hero />
      <FeaturesSection />
      <PricingSection />
      <FaqSection />
    </main>
  );
}

Add a Product Demo Section

Place a self-hosted video or an external embed after the hero when visitors need to see the product before reading the feature list.

export function ProductDemo() {
  return (
    <section id="demo" className="mx-auto max-w-5xl px-6 py-20">
      <div className="aspect-video overflow-hidden rounded-xl border">
        <iframe
          className="h-full w-full"
          src="https://www.youtube.com/embed/VIDEO_ID"
          title="Product walkthrough"
          allowFullScreen
        />
      </div>
    </section>
  );
}

Import ProductDemo into app/page.tsx and place it between Hero and FeaturesSection.

Available Blocks

Category	Blocks	Use Cases
Page shell	Navbar, Footer	Keeps primary navigation, CTA links, and footer content consistent.
Product introduction	Hero, LogoCarousel	Introduces the product and places social proof near the first CTA.
Product explanation	FeaturesSection	Groups feature messages with icons and supporting copy.
Trust content	TeamSection, TestimonialSection	Adds founder context and customer feedback when those assets exist.
Purchase decision	PricingSection, FaqSection	Explains plans and addresses pricing or product questions.

Alternatives and Related Resources

FAQs

Q: Does ChatDeck include authentication, payments, or a database?
A: No. ChatDeck focuses on the public SaaS marketing page. Add authentication, billing, product routes, and backend services based on the requirements of your application.

Q: Which Node.js version should I use?
A: Use Node.js 20.9 or newer.

Q: How do I remove the team or testimonial section?
A: Remove the matching import and JSX entry from app/page.tsx.

Q: Where should I change the site colors?
A: Edit the CSS variables in app/globals.css. The file contains the global light and dark theme tokens used across the template.

Q: Do I need to set up a database or backend to use this template?
A: No. ChatDeck is a static landing page. It does not require any backend or database. You can wire it to your product’s API or form handler later.