archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/with-chakra-ui
History
Steven 4466ba436b
chore(examples): use default prettier for examples/templates (#60530) 
## Description
This PR ensures that the default prettier config is used for examples
and templates.

This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).

## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)

## Related

- Fixes #54402
- Closes #54409
2024-01-11 16:01:44 -07:00
..
src chore(examples): use default prettier for examples/templates (#60530) 2024-01-11 16:01:44 -07:00
.gitignore Add .yarn/install-state.gz to .gitignore (#56637) 2023-10-18 16:34:48 +00:00
next-env.d.ts Remove incorrect entries for pnpm debug log (#47241) 2023-03-26 22:26:05 -07:00
package.json Update Chakra-UI dependencies for React 18 (#37772) 2022-06-17 03:21:06 +00:00
README.md update example Deploy button URLs (#48842) 2023-04-26 13:31:44 -04:00
tsconfig.json docs(examples): Updated Chakra UI examples (#36333) 2022-04-28 12:36:33 +00:00

README.md

Example app with chakra-ui and TypeScript

This example features how to use 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 or preview live with StackBlitz

Deploy with Vercel

How to use

Using create-next-app

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

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

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

pnpm 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.ts.