077097b7f8
* Add licences to all example/package.json that lack them * Revert "Add licences to all example/package.json that lack them" This reverts commit 5d4e25012f7334772b8ef5924bc355277e827cba. * Update check-examples to remove `license` field from examples * Remove `license` from all examples. This was mentioned in vercel/next.js#27121 but it looks like it didn't end up being in the merge? Co-authored-by: JJ Kasper <jj@jjsweb.site> |
||
|---|---|---|
| .. | ||
| src | ||
| .gitignore | ||
| package.json | ||
| README.md | ||
Example app with chakra-ui
This example features how to use chakra-ui as the component library within a Next.js app.
We are connecting the Next.js _app.js with chakra-ui's Theme and ColorMode containers 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.
Preview
Preview the example live on StackBlitz:
Deploy your own
Deploy the example using Vercel:
How to use
Execute create-next-app with npm or Yarn to bootstrap the example:
npx create-next-app --example with-chakra-ui with-chakra-ui-app
# or
yarn create next-app --example with-chakra-ui with-chakra-ui-app
Deploy it to the cloud with Vercel (Documentation).
Notes
Chakra has supported Gradients and RTL in v1.1. To utilize RTL, add RTL direction and swap.
If you don't have multi-direction app, you should make <Html lang="ar" dir="rtl"> inside _document.js.