fix package name

examples/chat/package.json

@@ -12,10 +12,10 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
-    "clsx": "^2.0.0",
     "hash-slash": "workspace:*",
     "jazz-tools": "workspace:*",
     "lucide-react": "^0.274.0",
+    "quint-ui": "workspace:*",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "zod": "3.25.28"
@@ -32,4 +32,4 @@
     "typescript": "5.6.2",
     "vite": "^6.3.5"
   }
-}
+}

examples/chat/src/app.tsx

@@ -4,6 +4,7 @@ import { useIframeHashRouter } from "hash-slash";
 import { Group } from "jazz-tools";
 import { JazzInspector } from "jazz-tools/inspector";
 import { JazzReactProvider, useAccount } from "jazz-tools/react";
+import { Button } from "quint-ui";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { ChatScreen } from "./chatScreen.tsx";
@@ -39,7 +40,11 @@ export function App() {
           }}
           placeholder="Set username"
         />
-        {!inIframe && <button onClick={logOut}>Log out</button>}
+        {!inIframe && (
+          <Button intent="danger" onClick={logOut} variant="outline">
+            Log out
+          </Button>
+        )}
       </TopBar>
       {router.route({
         "/": () => createChat() as never,

examples/chat/src/index.css

@@ -1,4 +1,6 @@
-@import "tailwindcss";
+@import "quint-ui/styles.css";
+/* We need to tell tailwind to detect classes from quint components */
+@source "../node_modules/quint-ui";
 
 /* Custom stone color palette */
 @theme {

examples/chat/src/ui.tsx

@@ -1,7 +1,7 @@
-import clsx from "clsx";
-import { CoPlainText, ImageDefinition } from "jazz-tools";
+import type { CoPlainText, ImageDefinition } from "jazz-tools";
 import { ProgressiveImg } from "jazz-tools/react";
 import { ImageIcon } from "lucide-react";
+import { cn } from "quint-ui";
 import { useId, useRef } from "react";
 
 export function AppContainer(props: { children: React.ReactNode }) {
@@ -57,7 +57,7 @@ export function BubbleBody(props: {
 }) {
   return (
     <div
-      className={clsx(
+      className={cn(
         "line-clamp-10 text-ellipsis whitespace-pre-wrap",
         "rounded-2xl overflow-hidden max-w-[calc(100%-5rem)] shadow-sm p-1",
         props.fromMe
@@ -75,9 +75,7 @@ export function BubbleText(props: {
   className?: string;
 }) {
   return (
-    <p className={clsx("px-2 leading-relaxed", props.className)}>
-      {props.text}
-    </p>
+    <p className={cn("px-2 leading-relaxed", props.className)}>{props.text}</p>
   );
 }
 

pnpm-lock.yaml

@@ -179,9 +179,6 @@ importers:
 
   examples/chat:
     dependencies:
-      clsx:
-        specifier: ^2.0.0
-        version: 2.1.1
       hash-slash:
         specifier: workspace:*
         version: link:../../packages/hash-slash
@@ -191,6 +188,9 @@ importers:
       lucide-react:
         specifier: ^0.274.0
         version: 0.274.0(react@19.1.0)
+      quint-ui:
+        specifier: workspace:*
+        version: link:../../packages/quint-ui
       react:
         specifier: 19.1.0
         version: 19.1.0