# Installation

## Framework Guide

Chakra UI works in your favorite framework. We've put together step-by-step
guides for these frameworks

:::card-group

<Card title="Next.js" href="/docs/get-started/frameworks/next-app" icon="nextjs">

Easily add Chakra UI with Next.js app

</Card>

<Card title="Vite" href="/docs/get-started/frameworks/vite" icon="vite">

Use Chakra UI with Vite

</Card>

<Card title="Stackblitz" href="https://stackblitz.com/edit/chakra-ui-v3" icon="stackblitz">

Try Chakra UI in Stackblitz sandbox

</Card>

:::

> The minimum node version required is Node.20.x

## Installation

To manually set up Chakra UI in your project, follow the steps below.

:::steps

### Install `@chakra-ui/react`

```bash
npm i @chakra-ui/react @emotion/react
```

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

```bash
npx @chakra-ui/cli snippet add
```

### Setup provider

Wrap your application with the `Provider` component generated in the
`components/ui/provider` component at the root of your application.

This provider composes the following:

- `ChakraProvider` from `@chakra-ui/react` for the styling system
- `ThemeProvider` from `next-themes` for color mode

```jsx
import { Provider } from "@/components/ui/provider"

function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  )
}
```

### Update tsconfig

If you're using TypeScript, you need to update the `compilerOptions` in the
tsconfig file to include the following options:

```json
{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

> If you're using JavaScript, create a `jsconfig.json` file and add the above
> code to the file.

### Enjoy!

With the power of the snippets and the primitive components from Chakra UI, you
can build your UI faster.

```tsx
import { Button, 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.