Productivity

Codex — Next.js Knowledge Base Template

Codex is a Next.js 15 & Tailwind v4 knowledge base template with AI search, block editor, backlinks, graph view, and dark mode UI for note-taking SaaS.

Overview

Codex is a production-ready Next.js knowledge base template built for founders and indie hackers launching a note-taking app, second brain tool, or team wiki SaaS. Built on the App Router with TypeScript, Tailwind CSS v4, and shadcn/ui, it ships with a fully responsive landing page, a block-based editor showcase, an interactive graph-view illustration, and a command-palette search demo — all wired to a single typed content file so you can relaunch the copy without touching a single component.

The template covers the full PKM (personal knowledge management) buyer journey: a conversion-focused landing page with 15 sections (hero, editor, organization, AI search, sync, templates gallery, use cases, testimonials, pricing, and FAQ), a dedicated templates gallery with category filtering, a use cases page with tabbed profiles for personal, team, student, and writer workflows, a full pricing page with a detailed feature-comparison table, and a changelog page with a timeline layout. Every section uses Motion for tasteful entrance and scroll animations, and every visual — from the connected-notes graph to the sync illustration — is built with real SVG and shadcn components instead of static images, so the template feels alive out of the box.

Under the hood, Codex follows a strict separation between content and UI: all copy, pricing, testimonials, and SEO metadata live in lib/config.tsx and lib/metadata.ts, colors and gradients are defined as reusable CSS variables in globals.css (OKLCH color space, light and dark mode included), and every component consumes design tokens instead of hardcoded values. Whether you're shipping a notes app, a documentation tool, or any SaaS that needs a polished, dark-mode-ready marketing site, Codex gives you a real foundation instead of a static mockup — clone it, edit config.tsx, drop in your product screenshots, and ship.

Features

Central config.tsx content file — relaunch the entire site by editing one typed file, zero copy hardcoded in componentsFull pricing page with a detailed feature-comparison table across Free, Pro, and Team plansFilterable templates gallery with category tabs and animated grid transitionsTabbed use-cases page with 4 audience profiles: Personal, Teams, Students, and WritersChangelog page with a versioned release timeline and typed change categories (New / Improved / Fixed)Functional command-palette search demo built with real shadcn Command — not a static imageAnimated backlinks & graph-view illustration built in pure SVG, no external image assets requiredReusable variant prop pattern lets landing sections double as standalone pages with zero duplicated codeAuto-generated SEO metadata (Open Graph, Twitter cards, canonical URLs) for every route from a single helperOKLCH color system with light/dark mode and reusable gradient & glow design tokensEvery shadcn/ui component used is pre-installed in the ZIP — no manual `shadcn add` commands neededNewsletter capture form in the footer, wired with client-side state and ready to connect to any email provider

Pages	Landing page
Home	Navbar
Templates	Hero
Use Cases	Social Proof
Pricing	Editor Showcase
Changelog	Organization
	Search Showcase
	AI Showcase
	Sync Showcase
	Templates Preview
	Use Cases
	Testimonials
	Pricing Preview
	FAQ
	Final CTA
	Footer