diff --git a/examples/with-geist-ui/.gitignore b/examples/with-geist-ui/.gitignore
new file mode 100644
index 0000000000000..1437c53f70bc2
--- /dev/null
+++ b/examples/with-geist-ui/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/with-geist-ui/README.md b/examples/with-geist-ui/README.md
new file mode 100644
index 0000000000000..04f20dd2b6348
--- /dev/null
+++ b/examples/with-geist-ui/README.md
@@ -0,0 +1,21 @@
+# Example app with [geist-ui](https://github.com/geist-org/geist-ui) and TypeScript
+
+This example features how to use [geist-ui](https://github.com/geist-org/geist-ui) as the component library within a Next.js app with TypeScript.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-geist-ui)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-geist-ui&project-name=with-geist-ui&repository-name=with-geist-ui)
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-geist-ui with-geist-ui-app
+# or
+yarn create next-app --example with-geist-ui with-geist-ui-app
+# or
+pnpm create next-app -- --example with-geist-ui with-geist-ui-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-geist-ui/next-env.d.ts b/examples/with-geist-ui/next-env.d.ts
new file mode 100644
index 0000000000000..4f11a03dc6cc3
--- /dev/null
+++ b/examples/with-geist-ui/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+///
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/with-geist-ui/package.json b/examples/with-geist-ui/package.json
new file mode 100644
index 0000000000000..81de156c6e85f
--- /dev/null
+++ b/examples/with-geist-ui/package.json
@@ -0,0 +1,22 @@
+{
+ "private": true,
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "@geist-ui/core": "latest",
+ "@geist-ui/icons": "1.0.1",
+ "next": "latest",
+ "react": "^18.1.0",
+ "react-dom": "^18.1.0"
+ },
+ "devDependencies": {
+ "@types/node": "^17.0.29",
+ "@types/react": "^18.0.8",
+ "eslint": "8.14.0",
+ "eslint-config-next": "12.1.5",
+ "typescript": "^4.5.4"
+ }
+}
diff --git a/examples/with-geist-ui/pages/_app.tsx b/examples/with-geist-ui/pages/_app.tsx
new file mode 100644
index 0000000000000..906b974c8092c
--- /dev/null
+++ b/examples/with-geist-ui/pages/_app.tsx
@@ -0,0 +1,12 @@
+import type { AppProps } from 'next/app'
+import { GeistProvider, CssBaseline } from '@geist-ui/core'
+
+function MyApp({ Component, pageProps }: AppProps) {
+ return (
+
+
+
+
+ )
+}
+export default MyApp
diff --git a/examples/with-geist-ui/pages/_document.js b/examples/with-geist-ui/pages/_document.js
new file mode 100644
index 0000000000000..8ff3141143ca0
--- /dev/null
+++ b/examples/with-geist-ui/pages/_document.js
@@ -0,0 +1,33 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { CssBaseline } from '@geist-ui/core'
+
+class MyDocument extends Document {
+ static async getInitialProps(ctx) {
+ const initialProps = await Document.getInitialProps(ctx)
+ const styles = CssBaseline.flush()
+
+ return {
+ ...initialProps,
+ styles: (
+ <>
+ {initialProps.styles}
+ {styles}
+ >
+ ),
+ }
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+ )
+ }
+}
+
+export default MyDocument
diff --git a/examples/with-geist-ui/pages/index.tsx b/examples/with-geist-ui/pages/index.tsx
new file mode 100644
index 0000000000000..8808b14d3a9e1
--- /dev/null
+++ b/examples/with-geist-ui/pages/index.tsx
@@ -0,0 +1,87 @@
+import Head from 'next/head'
+import {
+ Page,
+ Text,
+ Image,
+ Display,
+ Button,
+ Grid,
+ Spacer,
+} from '@geist-ui/core'
+import { Github } from '@geist-ui/icons'
+
+const gh = 'https://github.com/geist-org/geist-ui'
+const docs = 'https://geist-ui.dev'
+
+export default function Home() {
+ const redirect = (url: string) => window.open(url)
+
+ return (
+
+
+
Geist UI with NextJS
+
+
+
+
+ Example repository of{' '}
+
+ Next.js
+ {' '}
+ &{' '}
+
+
+ G
+
+
+ e
+
+
+ i
+
+
+ s
+
+
+ t
+
+
+ UI.
+
+ {' '}
+ >
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/examples/with-geist-ui/public/geist-banner.png b/examples/with-geist-ui/public/geist-banner.png
new file mode 100644
index 0000000000000..cf7a3facab671
Binary files /dev/null and b/examples/with-geist-ui/public/geist-banner.png differ
diff --git a/examples/with-geist-ui/tsconfig.json b/examples/with-geist-ui/tsconfig.json
new file mode 100644
index 0000000000000..99710e857874f
--- /dev/null
+++ b/examples/with-geist-ui/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}