Wasp + Chakra v3

README.md

Executed the following commands:

wasp new chakra-v3
npm i @chakra-ui/react @emotion/react
npx @chakra-ui/cli snippet add

Added the App.tsx with the Chakra provider component.

Added {/* @ts-ignore */} in the two component files (there are some tsconfig.json incompatibilites between Wasp and Chakra v3.

main.wasp

app chakraV3 {
  wasp: {
    version: "^0.16.4"
  },
  title: "chakra-v3",
  client: {
    rootComponent: import { App } from "@src/App"
  }
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
  component: import { MainPage } from "@src/MainPage"
}

package.json

{
  "name": "chakraV3",
  "type": "module",
  "dependencies": {
    "@chakra-ui/react": "^3.19.1",
    "@emotion/react": "^11.14.0",
    "next-themes": "^0.4.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.5.0",
    "react-router-dom": "^6.26.2",
    "wasp": "file:.wasp/out/sdk/wasp"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "prisma": "5.19.1",
    "typescript": "^5.1.0",
    "vite": "^4.3.9"
  }
}

src-App.tsx

import { Outlet } from "react-router-dom";
import { Provider as ChakraProvider } from "./components/ui/provider";

export function App() {
  return (
    <>
      <ChakraProvider>
        <Outlet />
      </ChakraProvider>
    </>
  );
}

src-components-toaster.tsx

"use client";

import {
  Toaster as ChakraToaster,
  Portal,
  Spinner,
  Stack,
  Toast,
  createToaster,
} from "@chakra-ui/react";

export const toaster = createToaster({
  placement: "bottom-end",
  pauseOnPageIdle: true,
});

export const Toaster = () => {
  return (
    <Portal>
      {/* @ts-ignore */}
      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
        {(toast) => (
          <Toast.Root width={{ md: "sm" }}>
            {toast.type === "loading" ? (
              <Spinner size="sm" color="blue.solid" />
            ) : (
              <Toast.Indicator />
            )}
            <Stack gap="1" flex="1" maxWidth="100%">
              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
              {toast.description && (
                <Toast.Description>{toast.description}</Toast.Description>
              )}
            </Stack>
            {toast.action && (
              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
            )}
            {toast.closable && <Toast.CloseTrigger />}
          </Toast.Root>
        )}
      </ChakraToaster>
    </Portal>
  );
};

src-components-tooltip.tsx

import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react";
import * as React from "react";

export interface TooltipProps extends ChakraTooltip.RootProps {
  showArrow?: boolean;
  portalled?: boolean;
  portalRef?: React.RefObject<HTMLElement>;
  content: React.ReactNode;
  contentProps?: ChakraTooltip.ContentProps;
  disabled?: boolean;
}

export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
  function Tooltip(props, ref) {
    const {
      showArrow,
      children,
      disabled,
      portalled = true,
      content,
      contentProps,
      portalRef,
      ...rest
    } = props;

    if (disabled) return children;

    return (
      <ChakraTooltip.Root {...rest}>
        {/* @ts-ignore */}
        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
        <Portal disabled={!portalled} container={portalRef}>
          <ChakraTooltip.Positioner>
            <ChakraTooltip.Content ref={ref} {...contentProps}>
              {showArrow && (
                <ChakraTooltip.Arrow>
                  <ChakraTooltip.ArrowTip />
                </ChakraTooltip.Arrow>
              )}
              {content}
            </ChakraTooltip.Content>
          </ChakraTooltip.Positioner>
        </Portal>
      </ChakraTooltip.Root>
    );
  }
);

src-MainPage.tsx

import waspLogo from "./waspLogo.png";
import "./Main.css";
import { Button } from "@chakra-ui/react";

export const MainPage = () => {
  return (
    <div className="container">
      <main>
        <Button>Hello Chakra</Button>
      </main>
    </div>
  );
};

Thanks @infomiho for this!

For Chakra to play nice with tailwind (included in the default version of opensaas in wasp), we need to add this to the tailwind.config.js file under module.exports:

corePlugins: { preflight: false, },