obsidian/wiki/payloadcms/examples-overview.md
2026-05-15 15:22:27 +01:00

57 lines
2.2 KiB
Markdown

---
title: "Payload CMS — Examples Overview"
aliases: [payload-examples, payload-starter-templates, payload-boilerplate]
tags: [payloadcms, examples, boilerplate, starter, templates]
sources: [raw/examples__overview.md]
created: 2026-05-15
updated: 2026-05-15
---
## Overview
Payload ships a curated set of official example projects on GitHub. Each example demonstrates **one specific feature** in isolation — no extra noise, easy to read.
## Available Examples
| Example | What it shows |
|---------|--------------|
| `auth` | Authentication flows (login, register, JWT, cookies) |
| `custom-components` | Custom Admin UI React components and slots |
| `draft-preview` | Draft + preview workflow with Next.js |
| `email` | Email adapter setup and sending |
| `form-builder` | Form Builder plugin end-to-end |
| `live-preview` | Live Preview iframe inside admin |
| `multi-tenant` | Multi-tenant collection isolation |
| `tailwind-shadcn-ui` | Tailwind CSS + shadcn/ui in admin |
| `whitelabel` | White-label / rebranded Admin UI |
## Creating a Project from an Example
```sh
npx create-payload-app --example <example_name>
```
Replace `<example_name>` with the folder name from the table above (e.g. `draft-preview`, `multi-tenant`).
## Key Takeaways
- Each example is **self-contained** — clone and run without extra setup.
- Start from the example closest to your use case, then extend.
- `draft-preview` is the go-to starting point for content-preview workflows with Next.js App Router.
- `multi-tenant` is useful for SaaS-style projects where each tenant owns their own data scope.
- `tailwind-shadcn-ui` saves setup time when using shadcn components inside a custom admin.
- New examples are added continuously — check the GitHub repo before building a custom solution.
- Missing a use case? Open a Discussion or PR on the Payload repo.
## Related
- [[wiki/payloadcms/admin-preview|Admin Preview & Draft Preview]]
- [[wiki/payloadcms/live-preview|Live Preview]]
- [[wiki/payloadcms/custom-components|Custom Components]]
- [[wiki/payloadcms/plugins|Official Plugins]]
- [[wiki/payloadcms/getting-started|Getting Started]]
## Sources
- `raw/examples__overview.md`
- https://payloadcms.com/docs/examples/overview