cc35859fe7
## 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> |
||
|---|---|---|
| .. | ||
| 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 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
# 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.