acme-website

Payload 3 starter with Better Auth, Postgres, S3 storage, a blog and composable layout and motion components

Overview

Summary generated from the README

A Payload 3 and Next.js starter that wires up authentication through payload-auth and Better Auth, with a Postgres database and S3-compatible media storage. It includes Users, Blog, Media and Globals collections, SEO and import/export plugins, and custom content blocks. Styling uses Tailwind with layout and motion primitives. Requires PAYLOAD_SECRET and DATABASE_URI; email via Resend is optional, and a form builder plugin can be enabled.

Features

Better Auth integration through payload-auth with passkey support
Postgres database adapter and S3-compatible storage with a local SeaweedFS Compose stack
Content, media and gallery blocks plus a copyright inline block
Section, Container and MediaFrame layout primitives with motion components
SEO and import/export plugins and Lexical rich text with live preview
Optional form builder plugin with TanStack Form on the frontend

Good for

Starting a Payload website that needs user authentication and a blog
Building a branded marketing or content site with a custom admin and email templates

From the author

A blank template to get started with Payload 3.0

Get started

This repository is a GitHub template: create your own copy of it in one click.

Create a repository from this template

README

Payload v4 development has moved to fluid-design-io/payload-toolkit. Follow the new repository for current documentation, issues and contributions.

header

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

Features · Quick Start · Branding Your Company · Custom UI Components · Custom Blocks · Form Plugin (Optional)

Features

Custom Blocks

Block	Description
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

Component	Description
Section	A compound section primitive with composable header, content, and media.
Container	A focused horizontal width and gutter primitive.
MediaFrame	A compound figure primitive with content, overlay, and caption slots.
VimeoEmbed	An accessible Vimeo embed for public and unlisted videos.
Entrance	Composable viewport reveal, fade, and explicit stagger primitives.
TextEffect	Reduced-motion-aware animated text segmentation.
GlowEffect	Decorative glow effects with static reduced-motion behavior.

Example usage

import { Container, MediaFrame, Section } from '@/components/layout'
import { Entrance } from '@/components/motion-primitives'

export default function Page() {
	return (
		<Section variant="muted" layout="full-width">
			<Container>
				<Section.Header>
					<Section.Eyebrow>Acme</Section.Eyebrow>
					<Section.Title>Features</Section.Title>
					<Section.Description>Composable layout and motion primitives.</Section.Description>
				</Section.Header>
			</Container>

			<Entrance.Stagger>
				<Entrance.Stagger.Item>
					<Section.Media>
						<MediaFrame>
							<MediaFrame.Content>
								<img src="/website-template-OG.png" alt="Feature preview" />
							</MediaFrame.Content>
							<MediaFrame.Caption>Feature preview</MediaFrame.Caption>
						</MediaFrame>
					</Section.Media>
				</Entrance.Stagger.Item>
			</Entrance.Stagger>
		</Section>
	)
}

Email UI

Quick Start

git clone https://github.com/fluid-design-io/payload-better-auth-starter.git
cd payload-better-auth-starter
bun install
cp .env.example .env   # edit with your values
bun run dev

Local S3 storage

The Compose stack uses SeaweedFS with the existing S3_* variables: S3 at http://localhost:9001 and Admin UI at http://localhost:9002. Both buckets are created at startup and remain private; Payload handles public media and authenticated file access.

Migrating from MinIO: Back up the old volume and copy objects via the S3 API; SeaweedFS uses a separate seaweedfs_data volume and does not migrate data automatically.

Branding Your Company

Replace Acme: logo in src/components/icons.tsx and admin-icon.tsx, favicon in public/favicon.ico, name in src/lib/constants.ts and src/lib/email/email-template.tsx, OG image public/website-template-OG.png.

Env (required): PAYLOAD_SECRET, DATABASE_URI. Optional: S3 vars, RESEND_API_KEY for email.

Stack

Collections: Users, Blog, Media, Globals. Plugins: Better Auth, SEO, Import/Export, S3, optional Form Builder. UI: coss, Motion, theme, responsive.