/portfolio

Primary LanguageTypeScript

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.