A production-ready PayloadCMS starter with payload-auth, modern UI components, and full-stack development tools.

Table of Contents

• Features
• Branding Your Company
• Custom UI Components
• Custom Blocks
• Screenshots

✨ Features

• 🔐 Better Auth - Modern authentication with email OTP via payload-auth (Better Auth)
• 🎨 Shadcn UI - Beautiful, accessible components
• 📝 Blog System - SEO-optimized with rich text editor
• 📧 Email Templates - Custom React Email templates
• 🗄️ PostgreSQL - Production-ready database
• ☁️ S3 Storage - Public & private file uploads
• 🐳 Docker Compose - One-command local development
• 📱 Responsive Design - Mobile-first approach
• 🎭 Motion Primitives - Smooth animations
• 🔍 SEO Plugin - Built-in SEO management

Video Demo

Video.Demo.mp4

Custom Blocks

• Content Block: Allows you to create a content section with multiple columns that are mobile responsive.
• Media Block: Refined version of Payload's default media block (added zoom functionality).
• Gallery Block: A grid of zoomable images.
• CopyRight Inline Block: An inline block that adds © Copyright ${fromYear}~${currentYear}... so you don't have to manually change it every year.

Custom UI Components

• LayoutHeader: A header component with a badge, h1 title, and description.
• SectionSpacing: A spacing component for vertical spacing between sections.
• SectionGrid: A grid layout with multiple content items.
• SectionGridItem: An individual content item for vertical row layout.
• SectionHeader: A section header with a badge, h2 title, and description.
• SectionHorizontal: A horizontal section with a title, description, and media.
• ImageMedia: A reusable image media component with customizable gradients and styling.
• VideoMedia: A reusable Vimeo video media component with configurable playback options.
• FullWidthImage: A large full-width image section with a glow effect.

Example usage 👀

import {
  FullWidthImage,
  ImageMedia,
  LayoutHeader,
  SectionGrid,
  SectionGridItem,
  SectionHeader,
  SectionHorizontal,
  SectionSpacing,
} from "@/components/layout/elements";
import { Main } from "@/components/layout/main";

export default function FeaturesPage() {
  return (
    <Main>
      <LayoutHeader title='Features' badge='Acme' description='...' />
      <SectionSpacing>
        <SectionGrid>
          <SectionGridItem
            title='Title 1'
            description='...'
            media={<ImageMedia src={image} alt='Title 1' zoom />}
          />
          <SectionGridItem
            title='Title 2'
            description='...'
            media={<ImageMedia src={image} alt='Title 2' zoom />}
          />
        </SectionGrid>
        <FullWidthImage
          image={image}
          caption='Image Caption'
          alt='Title 1'
          zoom
        />
        <SectionHorizontal
          variant='right'
          title='Title 3'
          description='...'
          media={
            <ImageMedia
              src={image}
              alt='Title 3'
              className='p-8'
              imgClassName='rounded-2xl'
              gradientColors={[
                "from-cyan-200/20",
                "via-cyan-300/20",
                "to-cyan-500/20",
              ]}
              zoom
            />
          }
        />
      </SectionSpacing>
    </Main>
  );
}

Screenshots

Main Pages

Account Settings

Email UI

🚀 Quick Start

1. Clone & Install

git clone fluid-design-io/payload-better-auth-starter
cd payload-better-auth-starter
bun install

2. Environment Setup

# Create environment file
cp .env.example .env

# Edit with your values
nano .env

3. Start Development

# Start all services (PostgreSQL, S3, Email)
bun run dev

Visit http://localhost:3000 for your site and http://localhost:3000/admin for the CMS.

🏢 Branding Your Company

Replace "Acme" with Your Brand

1. Logo & Icons

   # Replace these files:
   src/components/icons.tsx          # Main logo
   src/components/payload/admin-icon.tsx  # Admin panel icon
   public/favicon.ico               # Browser favicon

2. Company Name

   # Search and replace "Acme" in:
   src/lib/constants.ts
   src/plugins/seo-plugin.ts
   src/lib/email/email-template.tsx

3. Open Graph Images

   # Replace default OG image:
   public/website-template-OG.png

4. Email Templates

   # Customize email branding:
   src/lib/email/email-template.tsx
   src/plugins/form-plugin/before-email.tsx

Environment Variables

# Required for production
PAYLOAD_SECRET=your-secret-key
DATABASE_URI=postgresql://user:pass@host:port/db

# Optional - S3 Storage
S3_BUCKET=your-bucket
S3_ACCESS_KEY_ID=your-key
S3_SECRET_ACCESS_KEY=your-secret
S3_REGION=us-east-1

# Optional - Email (Resend)
RESEND_API_KEY=your-resend-key

🧩 Core Components

Collections

• Users - Authentication & user management
• Blog - SEO-optimized blog posts with authors
• Media - Image/video uploads with S3 storage
• Globals - Site-wide content (footer, etc.)

Plugins

• Better Auth - Modern authentication system
• SEO Plugin - Meta tags, Open Graph, structured data
• Import/Export - Data migration tools
• S3 Storage - Cloud file storage
• Form Builder - Contact forms (optional)

UI Components

• Shadcn UI - 30+ accessible components
• Motion Primitives - Framer Motion utilities
• Theme System - Dark/light mode support
• Responsive Layout - Mobile-first design

🛠️ Development

Available Scripts

bun run dev          # Start development server
bun run build        # Build for production
bun run start        # Start production server

# Docker Services
bun run services:start    # Start PostgreSQL, S3, Email
bun run services:stop     # Stop all services
bun run services:logs     # View service logs

# Database
bun run db:reset         # Reset database
bun run db:connect       # Connect to PostgreSQL

# Email Testing
bun run email:test       # Test email functionality

Form Plugin (Optional)

Enable the form plugin for contact forms:

1. Move extra/form/ to src/plugins/form/
2. Uncomment form plugin in src/plugins/index.ts
3. Restart development server

📁 Project Structure

src/
├── app/                 # Next.js app router
├── collections/         # PayloadCMS collections
├── components/          # React components
│   ├── ui/             # Shadcn UI components
│   ├── layout/         # Layout components
│   └── payload/        # CMS-specific components
├── lib/                 # Utilities & configurations
├── plugins/             # PayloadCMS plugins
└── blocks/              # Content blocks

🚀 Deployment

Vercel (Recommended)

1. Connect your GitHub repository
2. Set environment variables
3. Deploy automatically

Docker

docker-compose -f docker-compose.prod.yml up -d

📄 License

MIT License - see LICENSE.md for details.

---

Need help? Check out the PayloadCMS docs or Better Auth docs.