Every SaaS founder I know has made the same mistake.
You have a product idea. You're excited. You sit down to build... and somehow end up spending a week obsessing over your landing page before writing a single line of product code.
Hero section. Pricing toggle. Testimonials. FAQ. Navbar. Dark mode. By the time you're done, you've burned days on something that isn't even your actual product.
I got tired of watching this happen. So I spent 2 weeks building ChatDeck, a free open-source SaaS landing page template built with Next.js 15, Shadcn UI, TypeScript, and Tailwind CSS.
It's my contribution to the Shadcn ecosystem. Fork it, update the copy, deploy to Vercel. Done in under an hour.
🤔 Why I Built This
Every time I started a new SaaS project, I'd go looking for a landing page template. And every time, I'd run into the same problems.
Paid templates sitting behind a $79 to $299 paywall. Outdated stacks using jQuery or Bootstrap with no component structure. Bloated boilerplates with auth, database, and payments baked in when I just needed a landing page. And free options that honestly look like they were built in 2017.
I wanted something built on the stack I already use every day. Next.js 15, Shadcn UI, TypeScript, Tailwind CSS. Clean components I can actually understand and modify quickly.
So I built it myself and open-sourced it.
📦 What's Inside ChatDeck
1. Hero Section
The first thing your visitor sees. Clean headline, subheading, social proof badge, and a single CTA. No clutter.
It also comes with full dark mode support out of the box. Zero extra configuration needed.
Both modes look intentional, not like a toggle slapped on at the end.
2. Features Grid
Six feature cards with Lucide icons. Swap the icon, update the copy, done.
Each card is a completely isolated component. Want 3 features instead of 6? Delete 3 components. Want to reorder them? Move them in the file. Nothing breaks.
3. Testimonials Marquee
Auto-scrolling testimonials with a smooth marquee effect. Looks great and builds trust fast.
This was one of the trickier sections to get right. The scroll speed, the fade edges, making sure it doesn't feel cheap. I spent more time on this one than I'd like to admit.
4. FAQ Accordion
Handles objections before users bounce. Built with Radix UI primitives so accessibility is handled for you automatically.
5. Pricing Section
Monthly and yearly toggle with animated plan cards. Works for freemium, flat-rate, or tiered pricing. Just update the numbers.
6. Everything Else
- 📌 Sticky navigation with smooth scrolling
- 🎬 Video section where you can drop in your Loom or product walkthrough
- 🏷️ Social proof bar with animated logos
- 👥 Team section with social links
9 sections total. Every single one is an isolated component.
⚙️ The Technical Decisions
The tech choices here were deliberate. Let me walk through each one.
Next.js 15 with App Router
I wanted this to be useful for modern projects, not something you'd have to migrate away from in 6 months. App Router is where Next.js is heading. Built on it from day one.
Shadcn UI and Radix Primitives
Shadcn changed how I think about component libraries. You own the code. No dependency updates breaking your UI at 2am. Full control. And Radix handles all the accessibility stuff like keyboard navigation, focus management, and ARIA attributes so I don't have to.
TypeScript Throughout
No any. No shortcuts. Every component is fully typed. If you're coming back to this in 3 months or handing it to a teammate, you'll thank yourself for it.
Motion for Animations
Smooth animations without writing a single keyframe. The marquee, the pricing toggle, the section transitions all use Motion. Clean API, great results.
Isolated Components
This was a conscious decision. Every section lives in its own component file. They don't share state. They don't depend on each other. You can add, remove, or reorder sections without touching anything else.
I've seen too many templates where changing the hero breaks the navbar. Not here.
🚀 How to Use It
Step 1 - Clone or fork the repo
git clone https://github.com/ShadcnDeck/chatdeck-shadcn-saas-landing-page-template
cd chatdeck-shadcn-saas-landing-page-template
npm install
Step 2 - Update the content
All the copy lives inside the component files. Search for the placeholder text and replace it with your product content. It takes less time than you think.
Step 3 - Deploy
npm run build
Or use the one-click Vercel deploy button in the README. Connect your repo, hit deploy, done.
🚫 What It Doesn't Include (On Purpose)
No database. No auth. No backend. No Stripe integration.
This is a landing page template, not a SaaS boilerplate. I wanted it to do one thing well: give you a conversion-ready page you can ship in under an hour.
If you need a full boilerplate, there are great options out there for that. This isn't trying to be one of them.
⭐ Try It / Star It / Fork It
GitHub: github.com/ShadcnDeck/chatdeck-shadcn-saas-landing-page-template
Live Demo: shadcndeck.com/preview/templates/saas-landing-page-ten-teal
MIT licensed. Free for personal and commercial use. No attribution required.
If you use it, I'd love to see what you build. Drop it in the comments. And if something is broken or you have a feature request, open an issue on GitHub.
About ShadcnDeck
ShadcnDeck is a free and open-source template marketplace built for developers and founders who want to ship fast without starting from scratch. Every template is built with Next.js, Shadcn UI, TypeScript, and Tailwind CSS — production-ready, fully customizable, and free to use.
No bloat. No subscriptions. Just good templates.
Top comments (0)