Using Chakra UI's official create-react-app templates

Create React App allows users to create a project using a template, which determines the files and dependencies included with the generated project.

We provide two official create-react-app templates for Chakra UI: one for JavaScript and the other for TypeScript.

Usage#

In order to generate a create-react-app project from a template, you pass the --template flag to the create-react-app command.

# using npm
npx create-react-app my-app --template [template-name]
# using yarn
yarn create react-app my-app --template [template-name]

The template name for the JavaScript project is @chakra-ui. The template name for the TypeScript project is @chakra-ui/typescript.

# JavaScript using npm
npx create-react-app my-app --template @chakra-ui
# JavaScript using yarn
yarn create react-app my-app --template @chakra-ui
# TypeScript using npm
npx create-react-app my-app --template @chakra-ui/typescript
# TypeScript using yarn
yarn create react-app my-app --template @chakra-ui/typescript

What's included#

The official templates are similar to the base create-react-app template, but they come with Chakra UI dependencies pre-installed and include Chakra-specific functionality.

Pre-install dependencies#

• @chakra-ui/react
• @chakra-ui/theme
• @chakra-ui/theme-tools
• react-icons

Chakra-specific functionality#

• ChakraProvider and CSSReset already connected to the default theme
• ColorModeSwitcher component, using Chakra's color mode management
• Animated Chakra UI logo instead of the React logo