This example shows how to use the Grommet UI library with Next.js.

It works by extending the <Document /> to enable server-side rendering of styled-components, which are used by Grommet, and extending <App /> to provide a Grommet context (and optionally a theme) for all child pages and components.

Deploy the example using Vercel or preview live with StackBlitz

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-grommet with-grommet-app
# or
yarn create next-app --example with-grommet with-grommet-app
# or
pnpm create next-app -- --example with-grommet with-grommet-app

Deploy it to the cloud with Vercel (Documentation).

Open this example on CodeSandbox