Robin CMS

A modern, block-based content management system built with Payload CMS 3 and Next.js 15. Robin CMS gives content editors a visual, component-driven editing experience with a fully themeable frontend powered by Tailwind CSS 4, Motion (Framer Motion), and Material Design 3 design tokens.

Table of Contents

• Description
• Installation
• Usage
• Features
• Configuration
• Collections
• Blocks
• Vote Popup
• API Routes
• License

Description

Robin CMS is a headless CMS with a tightly integrated Next.js frontend. Pages are composed from a library of reusable content blocks, each with per-block color, spacing, and layout overrides. The admin panel provides color pickers that pull preset values straight from the global theme, making it easy to stay on-brand while still allowing creative flexibility per section.

Tech Stack

Installation

Prerequisites

• Node.js ^20.9.0 or >=22.0.0
• pnpm (recommended)
• MongoDB instance (local or Atlas)

Steps

bash# 1. Clone the repository
git clone https://github.com/<your-org>/robin-cms-payload.git
cd robin-cms-payload

# 2. Install dependencies
pnpm install

# 3. Create a .env file in the root
cp .env.example .env
# Then fill in the required values (see Configuration below)

# 4. Generate Payload types and import map
pnpm payload generate:types
pnpm payload generate:importmap

# 5. Start the dev server
pnpm dev

The site will be available at http://localhost:3000 and the admin panel at http://localhost:3000/admin.

Usage

Development

bashpnpm dev          # Start Next.js + Payload in development mode

Production

bashpnpm build        # Build for production
pnpm start        # Start the production server

Other Commands

bashpnpm lint                       # Run ESLint
pnpm payload generate:types     # Regenerate TypeScript types from Payload config
pnpm payload generate:importmap # Regenerate the admin import map

Features

• Block-Based Page Builder — Compose pages from 19 content blocks with drag-and-drop ordering in the admin panel.
• Global Theme & Styling — Centrally manage brand colors, surface colors, text colors, typography (Google Fonts), font scale, border radius, button styling, and animation settings.
• Per-Block Color Overrides — Every content block has a "Block Colors" group that lets editors override the background, primary text, and secondary text colors with a theme-aware color picker.
• Background Patterns — Layer any of 40 tileable SVG patterns (across 8 categories) over a block's background, with configurable pattern color and opacity.
• Per-Block Typography Overrides — Selected blocks expose a "Typography" group to override the font family, weight, and size for that block only, defaulting to the global theme.
• Per-Block Spacing Overrides — Blocks include a "Block Spacing" group for custom padding and margin (top/right/bottom/left) with preset and custom pixel values.
• Theme-Aware Color Picker — Admin color picker component that fetches live theme values and presents them as labeled quick-select presets alongside a full hex picker.
• Font Select Field — Admin font picker supporting Google Fonts with live preview for headings, body, buttons, and navigation.
• Responsive Design — Mobile-first layouts with Tailwind CSS 4 utility classes.
• Animations — Configurable entrance animations (fadeUp, fadeIn, slideLeft, slideRight, scale) per block, powered by Motion with spring physics. Animation intensity is globally adjustable (subtle/standard/expressive).
• Hero Scroll Effects — Optional scroll-driven visual effects on hero background images: Zoom In, Parallax Depth Shift, and Blur. Effects are powered by Motion's useScroll / useTransform and can be switched off per block.
• Rich Text Editing — Lexical-based rich text editor with inline toolbar, lists, links, media embeds, and more.
• Markdown Document Block — Write or upload GFM Markdown with syntax highlighting and auto-generated table of contents.
• Carousel Block — Image carousel with autoplay, snap scrolling, infinite loop, configurable aspect ratios, and lightbox-style captions.
• Card Grid Block — Versatile card layouts (standard, horizontal, overlay, minimal) with 1–4 column grids and per-card styling options.
• Contact Form Block — Built-in contact form with honeypot, timestamp, and rate-limit anti-spam protection. Submissions are stored in the Contact Messages collection.
• SEO Ready — Global SEO defaults, per-page meta overrides (title, description, keywords), Open Graph images, and robots.txt configuration.
• Header & Footer Builders — Configurable navigation with dropdown menus, CTA buttons, multi-column footers, social links, and newsletter section.
• Media Management — Automatic image resizing with Sharp (thumbnail, card, hero, og sizes), focal point editing, and optional Vercel Blob storage.
• Image Compressor — Built-in admin provider for client-side image compression before upload.
• Live Preview — Preview pages at mobile (375×667), tablet (768×1024), and desktop (1440×900) breakpoints directly in the admin panel.
• Saved Blocks Library — Save any configured block as a reusable template. Import saved blocks into any page with one click from the "Import Saved Block" drawer, organized by category with search.
• Version Control — Drafts with autosave and scheduled publishing for Pages.
• Vote / Feedback Popup — Scroll-triggered 5-star rating popup with optional text feedback. Configurable per-site via Site Settings. Both feedback fields (name and message) are fully optional — clicking Send with empty fields still shows the thank-you message.
• GraphQL & REST APIs — Auto-generated APIs for all collections and globals, plus custom vote endpoints.

Configuration

Environment Variables

Create a .env file in the project root with the following variables:

env# Required
MONGODB_URI=mongodb+srv://<user>:<password>@<cluster>.mongodb.net/<database>
PAYLOAD_SECRET=<a-long-random-string>

# Optional
NEXT_PUBLIC_SERVER_URL=http://localhost:3000

Global Settings (Admin Panel)

Collections

Blocks

Robin CMS includes 19 content blocks, each configurable with per-block color and spacing overrides:

Saved Blocks (Reusable Block Templates)

The Saved Blocks collection lets editors save fully configured blocks as reusable templates. When editing a page, click the "Import Saved Block" button above the layout blocks area to open a slide-out drawer where you can browse, search, and filter saved blocks by category, then import them into the page with one click.

How It Works

1. Create a saved block — Go to /admin/collections/saved-blocks and click "Create New". Give it a name, pick a category, and configure the block exactly as you want it.
2. Import into a page — Open any existing page, click "Import Saved Block" in the Content tab, and select a template from the drawer. The block is appended to the page layout with all its saved settings.
3. Customise per page — After importing, you can edit any field on the imported block without affecting the original saved template.

Categories

Note: The page must be saved at least once before importing saved blocks (the import uses the REST API to append the block to the page layout).

Per-Block Color Overrides

Every content block (except Spacer and Separator) includes a Block Colors group with:

• Background Color — Override the section background.
• Primary Text Color — Override heading and body text color (--color-text-primary).
• Secondary Text Color — Override subtitle and caption color (--color-text-secondary).
• Button Background / Text Color — Override the filled-button colors for the block.
• Background Pattern — Layer one of 40 tileable SVG patterns over the background, with configurable pattern color and opacity.

Each color field uses the theme-aware color picker that shows your theme's saved colors as labeled presets for quick selection.

Per-Block Spacing Overrides

All blocks include a Block Spacing group with two collapsible sub-groups:

• Padding — Top, Right, Bottom, Left (none/small/medium/large/custom with pixel value).
• Margin — Top, Right, Bottom, Left (same options).

Hero Scroll Effects

The Hero block supports an optional Scroll Effect that animates the background image as the section scrolls out of the viewport. The field only appears when a background image is set and defaults to None (off).

Effects are implemented with Motion's useScroll and useTransform hooks and applied to a motion.div wrapper around the hero image. The hero section uses overflow-hidden to prevent visual overflow from zoomed or shifted images.

Vote Popup

A scroll-triggered feedback widget that collects star ratings and optional text feedback from visitors.

How It Works

1. Scroll trigger — The popup appears once the user has scrolled past a configurable percentage of the page (default: 75 %).
2. Star rating — A 5-star system with emoji feedback (😡 → 🤩). Clicking a star immediately submits the rating via POST /api/vote.
3. Optional feedback — After rating, a reply form slides in with a "First name" input and a free-text textarea. Both fields are fully optional — clicking "Send Feedback" with empty fields immediately shows the thank-you message without making an additional API call.
4. localStorage persistence — Votes and dismiss state are persisted so the popup won't re-appear after a vote or explicit dismiss.
5. Minimize / Dismiss — Users can minimise the popup to a floating pill or dismiss it entirely.
6. Average score — After submission the popup fetches and displays the average score for the current block.
7. Delete vote — A "Delete my vote" link allows users to remove their rating.

Configuration (Admin → Site Settings → Vote Popup)

API Routes

Viewer (Demo) Role

Robin CMS includes a Viewer role designed for demo or stakeholder access. A viewer can log into the admin panel and browse every collection and global, but cannot create, update, or delete any content.

To create a demo account, go to Users → Create New in the admin panel and set the role to Viewer.

License

MIT