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 the example using Vercel or preview live with StackBlitz
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).
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
.