bcd8de3262
I added ` *.tsbuildinfo` to gitignores of examples that use typescript and don't already have it. By use typescript I mean have `tsconfig` somewhere in their directory tree.
I used the following script to update the files:
```bash
#!/bin/bash
set -eou pipefail
cd examples
examples=`git ls-files . | grep tsconfig | xargs dirname | grep -v "/"`
for example in $examples; do
if ! grep -q tsbuildinfo $example/.gitignore; then
gitignore="$example/.gitignore"
echo $gitignore
tail -c1 $gitignore | read -r _ || echo >> $gitignore
echo -e "\n# typescript\n*.tsbuildinfo" >> $gitignore
fi
done
```
|
||
|---|---|---|
| .. | ||
| src | ||
| .gitignore | ||
| next-env.d.ts | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
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
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
# or
yarn create next-app --example with-chakra-ui with-chakra-ui-app
# or
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.