How to Build an Open Source SaaS Landing Page Template with shadcn/ui

**Hoje** at 02:15

How to Build an Open Source SaaS Landing Page Template with shadcn/ui

Tópico:
How to Build an Open Source SaaS Landing Page Template with shadcn/ui

Categoria: Tutoriais | FreeCodeCamp Premium
Idioma Principal: Português (Conteúdo de Tecnologia)

Conteúdo do Tutorial / Guia Passo a Passo:
-------------------------------------------------------------------------
Most SaaS landing pages share the same core sections: a hero, social proof, features, pricing, FAQ, and a footer. And most developers end up building these from scratch on every project. That's repetition, not engineering.

So I built and open-sourced a complete SaaS landing page template called ChatDeck. It runs on Next.js 16, React 19, shadcn/ui with the new

Código Selecionar

base-novastyle, Tailwind CSS v4, and TypeScript. The full source is on GitHub under the MIT license. I built and open-sourced this template, and everything here comes from decisions made during that process.

Building it forced me to make real decisions on a stack that moved significantly in the past 12 months. This article is about those decisions: what worked, what didn't, and what I'd do differently if I started today.

Prerequisites: This article assumes you're comfortable with React and TypeScript. Some familiarity with the Next.js App Router is helpful but not required. Each lesson is explained from first principles.

Table of Contents

• The Stack Choices and Why They Matter

• Getting Started

• Project Structure

• Lesson 1: shadcn/ui's Newbase-novaStyle Changes What "Accessible" Means

• Lesson 2: Tailwind CSS v4 Requires a Mental Model Shift

• Lesson 3: OKLCH Colors Make Dark Mode Predictable

• Lesson 4: Page Architecture — Flat Beats Clever

• Lesson 5: Staggered Animations Without Managing Individual Delays

• Lesson 6: CSS-Only Infinite Scroll — No Library Needed

• Lesson 7: CSS Subgrid Solves Pricing Card Alignment Natively

• Lesson 8: Inline SVGs Beat Image Libraries for Simple Logos

• What I'd Do Differently

• Summary

The Stack Choices and Why They Matter

Before getting into the code, here's what the template runs on. Each choice was deliberate — none of these are defaults you get from

Código Selecionar

create-next-app.

Technology
Version
Why I chose it

Next.js
^16.0.3
App Router gives you React Server Components out of the box. Static sections like Hero and Features render on the server — no client-side JS needed for content that never changes.

React
19.2.0
React 19 stabilises the

Código Selecionar

usehook and concurrent features. Staying on the latest version means the template doesn't immediately feel stale.

shadcn/ui
^4.13.0 (CLI)
Components are copied into your codebase, not installed as a package. You own the code. No version lock-in, no fighting library defaults when you need to customize.

Base UI (

Código Selecionar

@base-ui/react)
^1.6.0
shadcn/ui's new

Código Selecionar

base-novastyle uses Base UI instead of Radix as its headless primitive layer. It has a smaller peer dependency footprint and tighter ARIA integration. More on this in Lesson 1.

Tailwind CSS
^4
v4 moves theme configuration from a JavaScript config file into CSS directly. Custom animations, color tokens, and radius scales all live in

Código Selecionar

globals.css. More on this in Lesson 2.

Motion (

Código Selecionar

motion/react)
^12.23.24
The rebranded Framer Motion. Handles entrance animations on the Hero and scroll-triggered animations on the Features section. Chosen over CSS animations because staggered sequences are much simpler to manage.

TypeScript
^5
Full type safety throughout. Component props, icon maps, pricing plan objects — all typed. Catches errors at build time, not at runtime.

Lucide React
^0.553.0
Consistent, well-maintained icon set that works cleanly with Tailwind's

Código Selecionar

size-*utilities. No custom SVG wrang

... [O tutorial continua no link abaixo] ...