rsnext/examples/with-chakra-ui/README.md

# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) and TypeScript

This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app with TypeScript.

Next.js and chakra-ui have built-in TypeScript declarations, so we'll get autocompletion for their modules straight away.

We are connecting the Next.js `_app.js` with `chakra-ui`'s Provider and theme so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props.

## 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-chakra-ui)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui&project-name=with-chakra-ui&repository-name=with-chakra-ui)

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:

```bash
npx create-next-app --example with-chakra-ui with-chakra-ui-app
```

```bash
yarn create next-app --example with-chakra-ui with-chakra-ui-app
```

```bash
pnpm create next-app --example with-chakra-ui with-chakra-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)).

## Notes

Chakra has supported Gradients and RTL in `v1.1`. To utilize RTL, [add RTL direction and swap](https://chakra-ui.com/docs/features/rtl-support).

If you don't have multi-direction app, you should make `<Html lang="ar" dir="rtl">` inside `_document.ts`.
docs(examples): Updated Chakra UI examples (#36333) ## Overview This PR updates both Chakra UI examples by updating the Chakra UI packages to the latest versions, and added better examples for Semantic Tokens (new feature in Chakra UI), and pseudo props. ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com> 2022-04-28 14:36:33 +02:00			`# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) and TypeScript`
Add `with-chakra-ui` example (#10033) * add with-chakra-ui example * lint Co-authored-by: Joe Haddad <timer150@gmail.com> 2020-01-10 17:24:39 +01:00
docs(examples): Updated Chakra UI examples (#36333) ## Overview This PR updates both Chakra UI examples by updating the Chakra UI packages to the latest versions, and added better examples for Semantic Tokens (new feature in Chakra UI), and pseudo props. ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com> 2022-04-28 14:36:33 +02:00			`This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app with TypeScript.`
Make example READMEs more consistent (#10124) * npx create → npm init * Fix inconsistent instructions * Update amp-first * Update with-graphql-react * with-firebase-cloud-messaging * Update with-higher-order-component * change create-next-app url * Update create-next-app instruction * Update instructions to use npm instead of npx * Move "the idea behind the example" to top * Rename * Rename * Update contributing.md with a README template 2020-01-16 23:23:56 +01:00
docs(examples): Updated Chakra UI examples (#36333) ## Overview This PR updates both Chakra UI examples by updating the Chakra UI packages to the latest versions, and added better examples for Semantic Tokens (new feature in Chakra UI), and pseudo props. ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com> 2022-04-28 14:36:33 +02:00			`Next.js and chakra-ui have built-in TypeScript declarations, so we'll get autocompletion for their modules straight away.`

			We are connecting the Next.js `_app.js` with `chakra-ui`'s Provider and theme so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props.
Make example READMEs more consistent (#10124) * npx create → npm init * Fix inconsistent instructions * Update amp-first * Update with-graphql-react * with-firebase-cloud-messaging * Update with-higher-order-component * change create-next-app url * Update create-next-app instruction * Update instructions to use npm instead of npx * Move "the idea behind the example" to top * Rename * Rename * Update contributing.md with a README template 2020-01-16 23:23:56 +01:00
Add `with-chakra-ui` example (#10033) * add with-chakra-ui example * lint Co-authored-by: Joe Haddad <timer150@gmail.com> 2020-01-10 17:24:39 +01:00			`## Deploy your own`

Change README structure in examples (#35349) Changed the README structure in all examples to take out the Stackblitz button and include it as a link instead using a [bash script](https://gist.github.com/Nutlope/a8f3556a5a401e32a8c6278b782ebf8a/revisions). I also added the Vercel deploy button to 15 READMEs that didn't have it. 2022-03-16 22:39:26 +01:00			`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-chakra-ui)`
Add `with-chakra-ui` example (#10033) * add with-chakra-ui example * lint Co-authored-by: Joe Haddad <timer150@gmail.com> 2020-01-10 17:24:39 +01:00
update example Deploy button URLs (#48842) ### What? Updates Deploy button URLs for all listed examples here: https://github.com/vercel/next.js/tree/canary/examples ### Why? The Deploy URLs are currently broken and result in a failed clone attempt on Vercel. ### How? The URLs have been changed from https://vercel.com/new/git/external?… to -> https://vercel.com/new/clone?… (Last updated [here](https://github.com/vercel/next.js/commit/8eaabe2fb0fb3a1d9f4931a332e608395813a3b9) in 2021) 2023-04-26 19:31:44 +02:00			`[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui&project-name=with-chakra-ui&repository-name=with-chakra-ui)`
Add `with-chakra-ui` example (#10033) * add with-chakra-ui example * lint Co-authored-by: Joe Haddad <timer150@gmail.com> 2020-01-10 17:24:39 +01:00
			`## How to use`

docs(examples): Updated Chakra UI examples (#36333) ## Overview This PR updates both Chakra UI examples by updating the Chakra UI packages to the latest versions, and added better examples for Semantic Tokens (new feature in Chakra UI), and pseudo props. ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com> 2022-04-28 14:36:33 +02:00			### Using `create-next-app`

add pnpm link to docs (#37221) ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Steven <steven@ceriously.com> 2022-05-27 21:46:38 +02:00			Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
Add `with-chakra-ui` example (#10033) * add with-chakra-ui example * lint Co-authored-by: Joe Haddad <timer150@gmail.com> 2020-01-10 17:24:39 +01:00
			```bash
Suggest `npx` over `npm init` (#13637) This updates old examples to the more universal `npx` command. Fixes https://github.com/vercel/next.js/discussions/12103 2020-06-01 19:36:57 +02:00			`npx create-next-app --example with-chakra-ui with-chakra-ui-app`
docs(examples): improve DX while copying command to create new project (#38410) * docs(examples): improve DX while copy command to create new project * chore: apply code review Co-authored-by: Marcos Bérgamo <Marcos.Bergamo@refinitiv.com> Co-authored-by: JJ Kasper <jj@jjsweb.site> 2022-07-27 04:57:48 +02:00			```

			```bash
Add `with-chakra-ui` example (#10033) * add with-chakra-ui example * lint Co-authored-by: Joe Haddad <timer150@gmail.com> 2020-01-10 17:24:39 +01:00			`yarn create next-app --example with-chakra-ui with-chakra-ui-app`
docs(examples): improve DX while copying command to create new project (#38410) * docs(examples): improve DX while copy command to create new project * chore: apply code review Co-authored-by: Marcos Bérgamo <Marcos.Bergamo@refinitiv.com> Co-authored-by: JJ Kasper <jj@jjsweb.site> 2022-07-27 04:57:48 +02:00			```

			```bash
Update `pnpm create next-app` for latest pnpm 6 and 7 (#37254) This command changed in pnpm [6.32.13](https://github.com/pnpm/pnpm/releases/tag/v6.32.13) and [7.1.1](https://github.com/pnpm/pnpm/releases/tag/v7.1.1) so lets update it since its been a few weeks and we can expect pnpm users to update more regularly than npm users. - Fixes https://github.com/vercel/next.js/pull/37240 - Fixes https://github.com/vercel/next.js/pull/37045 - Fixes https://github.com/vercel/next.js/pull/37032 - Fixes https://github.com/vercel/next.js/pull/36602 - Fixes https://github.com/vercel/next.js/pull/36496 2022-05-27 23:21:40 +02:00			`pnpm create next-app --example with-chakra-ui with-chakra-ui-app`
Add `with-chakra-ui` example (#10033) * add with-chakra-ui example * lint Co-authored-by: Joe Haddad <timer150@gmail.com> 2020-01-10 17:24:39 +01:00			```

Fix deploy buttons URLs (#20834) Fix all deploy button URLs in the Next.js repo to follow the following format: ``` https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME> ``` The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button. Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs. --- For example, for the `hello-world` example: The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world And the deploy button looks like this: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world) --- For reference, I used the following regexes to search for the incorrect URLs ``` \(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.)\) \(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&])(.)\) \(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.)\) https://vercel.com/import/git https://vercel.com/import/select-scope https://vercel.com/import https://vercel.com/new/project ``` 2021-01-07 02:40:29 +01:00			`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)).`
Update Chakra UI examples to latest versions. (#23585) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. ## Documentation / Examples - [x] Make sure the linting passes 2021-04-17 23:22:30 +02:00
			`## Notes`

			Chakra has supported Gradients and RTL in `v1.1`. To utilize RTL, [add RTL direction and swap](https://chakra-ui.com/docs/features/rtl-support).

docs(examples): Updated Chakra UI examples (#36333) ## Overview This PR updates both Chakra UI examples by updating the Chakra UI packages to the latest versions, and added better examples for Semantic Tokens (new feature in Chakra UI), and pseudo props. ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com> 2022-04-28 14:36:33 +02:00			If you don't have multi-direction app, you should make `<Html lang="ar" dir="rtl">` inside `_document.ts`.