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
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 Page() {
  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>
  );
}

Email UI

Quick Start

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

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: Shadcn, Motion, theme, responsive.

Form plugin (optional)

Payload form builder plugin with Tanstack form on the frontend

1. Move extra/plugins/form-plugin to src/plugins/
2. Move extra/blocks/form to src/blocks/form
3. Move extra/components/form to src/components/form
4. Move extra/fields/slug to src/fields/slug
5. Install @payloadcms/plugin-form-builder country-data-list react-circle-flags
6. Uncomment form plugin in src/plugins/index.ts
7. Run bun run payload generate:importmap
8. Restart development server 🥳

Structure

src/ → app/, collections/, components/ (ui, layout, payload), lib/, plugins/, blocks/

Deploy

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.