example: with-mantine #34591
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,31 @@ | ||
| # Example app with mantine | ||
|
|
||
| This example features how you use [mantine](https://github.com/mantine/mantine), a React component library. | ||
|
|
||
| ## Preview | ||
|
|
||
| Preview the example live on [StackBlitz](http://stackblitz.com/): | ||
|
|
||
| [](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mantine) | ||
|
|
||
| ## Deploy your own | ||
|
|
||
| Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): | ||
|
There was a problem hiding this comment. This should not change, to align with the other examples
balazsorban44 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| [](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mantine&project-name=with-mantine&repository-name=with-mantine) | ||
balazsorban44 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ## How to use | ||
|
|
||
| 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-mantine with-mantine-app | ||
| # or | ||
| yarn create next-app --example with-mantine with-mantine-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)). | ||
|
|
||
| ### Try it on CodeSandbox | ||
|
|
||
| [Open this example on CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/with-mantine) | ||
|
There was a problem hiding this comment. This should not change to align with the other examples.
balazsorban44 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import Head from 'next/head'; | ||
|
There was a problem hiding this comment. There is already a |
||
| import { MantineProvider } from '@mantine/core'; | ||
|
|
||
| export default function App(props) { | ||
| const { Component, pageProps } = props; | ||
|
|
||
| return ( | ||
| <> | ||
| <Head> | ||
| <title>Page title</title> | ||
| <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" /> | ||
| </Head> | ||
|
|
||
| <MantineProvider | ||
| withGlobalStyles | ||
| withNormalizeCSS | ||
| theme={{ | ||
| /** Put your mantine theme override here */ | ||
| colorScheme: 'light', | ||
| }} | ||
| > | ||
| <Component {...pageProps} /> | ||
| </MantineProvider> | ||
| </> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import Document from 'next/document'; | ||
|
There was a problem hiding this comment. There is already a |
||
| import { createGetInitialProps } from '@mantine/next'; | ||
|
|
||
| const getInitialProps = createGetInitialProps(); | ||
|
|
||
| export default class MyDocument extends Document { | ||
| static getInitialProps = getInitialProps; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Title, Text, Anchor } from '@mantine/core'; | ||
|
There was a problem hiding this comment. There is already a |
||
|
|
||
| export default function HomePage() { | ||
| return ( | ||
| <> | ||
| <Title sx={{ fontSize: 100, fontWeight: 900, letterSpacing: -2 }} align="center" mt={100}> | ||
| Welcome to{' '} | ||
| <Text inherit variant="gradient" component="span"> | ||
| Mantine | ||
| </Text> | ||
| </Title> | ||
| <Text color="dimmed" align="center" size="lg" sx={{ maxWidth: 580 }} mx="auto" mt="xl"> | ||
| This starter Next.js projects includes a minimal setup for server side rendering, if you | ||
| want to learn more on Mantine + Next.js integration follow{' '} | ||
| <Anchor href="https://mantine.dev/theming/next/" size="lg"> | ||
| this guide | ||
| </Anchor> | ||
| . To get started edit index.tsx file. | ||
| </Text> | ||
| </> | ||
| ); | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This file looks already correct to me.