Wasp with Radix UI

main.wasp

app radixui {
  wasp: {
    version: "^0.12.3"
  },
  title: "radixui",
  client: {
    rootComponent: import { Layout } from "@src/Layout",
  }
}

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

package.json

{
  "name": "radixui",
  "dependencies": {
    "@radix-ui/themes": "^2.0.3",
    "react": "^18.2.0",
    "wasp": "file:.wasp/out/sdk/wasp"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "prisma": "4.16.2",
    "typescript": "^5.1.0",
    "vite": "^4.3.9"
  }
}

src-Layout.jsx

import "@radix-ui/themes/styles.css";
import { Theme } from "@radix-ui/themes";

export function Layout({ children }) {
  return <Theme>{children}</Theme>;
}

src-MainPage.jsx

import { Flex, Text, Button } from "@radix-ui/themes";

export const MainPage = () => {
  return (
    <Flex direction="column" gap="2">
      <Text>Hello from Radix Themes :)</Text>
      <Button>Let's go</Button>
    </Flex>
  );
};