examples

Thu, 11 Sep 2025 15:29:44 +0800

vercel/examples

Vercel Examples

Solutions – Demos, reference architecture, and best practices
Starter – Functional applications which can act as a starting point
And more!

Vercel Templates

Multiple examples are being featured in Vercel’s Templates, visit that page for more advanced filtering options.

For Vercelians

Examples that have front matter metadata will create a new Draft template in Contentful, for more steps on how to publish a template, read Publishing Templates.

Adding a new example

To quickly start contributing with a new example, run the following commands:

1
2

pnpm i
pnpm new-example

If the script above isn’t used, make sure the example complies with the following:

It must have a .gitignore similar to plop-templates/example/.gitignore
It must have a package.json similar to plop-templates/example/package.json (usage of Next.js is optional). The license should be MIT
It must have a README.md similar to plop-templates/example/README.md. The example has to be able to include a demo URL (the Vercel team will deploy it!) and if it requires environment variables, it must have a .env.example file and instructions on how to set them up. Take bot-protection-datadome as an example.
- To customize the Vercel Deploy Button take a look at the docs, useful if the deployment has required environment variables.
If using Next.js, it must have a .eslintrc.json similar to plop-templates/example/.eslintrc.json
All Next.js examples should be using the same styling and layout provided by @vercel/examples-ui, its usage can be seen in the plop template

Adding a template

If you would like the example to be featured in vercel.com/templates then also add the front matter metadata to the top of the readme, like in bot-protection-datadome. To know all the possible values for each metadata take a look at internal/fields.json.

If you want to add related templates to your template, copy the slug from the other template into the relatedTemplates field, for example for vercel.com/templates/next.js/monorepo-turborepo the slug is monorepo-turborepo, as written in solutions/monorepo/README.md

The pre-commit hook

We use Husky to manage the pre-commit Git hook in this repo. Husky configures hooks automatically during install, so you don’t need to do anything special to get them working, but if it fails to install, you can run the following command to install it manually:

`1`	`pnpm run prepare`

Code changes automatically go through Prettier and ESLint when you make a commit, please do not skip these steps unless they’re broken and in that case let us known by creating an issue.

Read the Docs

If you have any questions or suggestions about the docs, feel free to open a discussion, or submit a PR with your suggestions!

Provide Feedback

Start a Discussion with a question, piece of feedback, or idea you want to share with the team.
Open an Issue if you believe you’ve encountered a bug that you want to flag for the team.

Husky on Producthunt daily