Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Notion Capture

This starter shows how to use the new Notion API with Next.js. You can capture emails that will populate a Notion database.

Deploy your own

Deploy the example using Vercel.

How to use

Change into the project directory and run the following command:

yarn && yarn dev

Update Notion Keys

You need to add the following to your env.local file (and in the environment variables in Vercel/Netlify when deployed).


You can find more details on how to get these here.

Update Site Metadata

You can update your site metadata in the next.config.js file.

env: {
  siteTitle: 'Your Company',
  siteDescription: 'Your company description.',
  siteKeywords: 'your company keywords',
  siteUrl: '',
  siteImagePreviewUrl: '/images/preview.png',
  twitterHandle: '@your_handle'

Update Colors

You can update the color palette in tailwind.config.js file.

colors: {
  palette: {
    light: '',
    primary: '',
    dark: '',

Update Image

The images are generated from the Unplash Random API. The cool gradient effect on the images is achieved by using the Tailwind Mix Blend Mode feature. You can experiment with this effect using this tool.

Update Progressive Web App (PWA) data

Update the manifest.json file and the icons under the public/images/icons folder.

You can use free tools online such as to quickly generate all the different icon sizes and favicon.ico file.

Want to have someone set it up for you?

Hit me up on Twitter and let's chat :)

If you are looking for more choices/ production ready websites I have more templates that might suit your needs.