Using Chakra in Remix

Install dependencies

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.

npx @chakra-ui/cli snippet add

Setup emotion cache

Using snippets from the Remix sandbox, you can add the emotion cache to your application.

Emotion cache snippet

Update tsconfig

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

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true
  }
}

Setup provider

Wrap your application with the 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

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { Provider } from "@/components/ui/provider"

export default function App() {
  return (
    <Provider>
      <Outlet />
    </Provider>
  )
}

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>
  )
}