Framework Guide
Chakra UI works in your favorite framework. We've put together step-by-step guides for these frameworks
Easily add Chakra UI with Next.js app directory
Use Chakra UI in your Remix application
Use Chakra UI in your Vite application
The minimum node version required is Node.20.x
Installation
To manually set up Chakra UI in your project, follow the steps below.
Install @chakra-ui/react
npm i @chakra-ui/react @emotion/reactAdd snippets
Snippets are pre-built components that you can use to build your UI faster.
Using the @chakra-ui/cli you can add snippets to your project.
npx @chakra-ui/cli@next snippet addSetup provider
Wrap your application with the ChakraProvider at the root of your application.
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
function App({ Component, pageProps }) {
return (
<ChakraProvider system={defaultSystem}>
<Component {...pageProps} />
</ChakraProvider>
)
}Update tsconfig
If you're using TypeScript, you need to update the compilerOptions in the
tsconfig file to include the following options:
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Bundler",
"skipLibCheck": true,
"paths": {
"@/*": ["./src/*"]
}
}
}Enjoy!
When the power of the snippets and the primitive components from Chakra UI, you can build your UI faster.
import { Button } from "@/components/ui/button"
import { HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<Button>Click me</Button>
<Button>Click me</Button>
</HStack>
)
}Learn
Watch our official courses and dive into dozens of videos that will teach you everything you need to know about Chakra UI, from basics to advanced concepts.
Contribute
Whether you're a beginner or advanced Chakra UI user, joining our community is the best way to connect with like-minded people who build great products with the library.