Update tailwind ui

Author: Kitenite

apps/web/package.json

@@ -49,7 +49,8 @@
         "superjson": "^2.2.1",
         "tailwind-merge": "^3.1.0",
         "tw-animate-css": "^1.2.5",
-        "zod": "^3.24.2"
+        "zod": "^3.24.2",
+        "@onlook/ui-v4": "*"
     },
     "devDependencies": {
         "@onlook/typescript": "*",

apps/web/src/app/_components/main.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { Routes } from "@/utils/constants";
 import { createClient } from "@/utils/supabase/client";
+import { Button } from "@onlook/ui-v4/button";
 import { type User } from "@supabase/supabase-js";
 import { redirect } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -25,14 +26,13 @@ export default function Main() {
     return (
         <main className="flex min-h-screen flex-col items-center justify-center relative">
             {/* Top bar */}
-            <div className="absolute flex top-0 left-0 w-full h-12 bg-gray-100 items-center justify-end p-2">
-
+            <div className="absolute flex top-0 left-0 w-full h-12 items-center justify-end p-2">
                 {user ? (
                     <div className="flex items-center gap-2">
                         <p>{user.user_metadata.name}</p>
-                        <button onClick={handleSignOut}>
+                        <Button onClick={handleSignOut}>
                             Sign Out
-                        </button>
+                        </Button>
                     </div>
                 ) : (
                     <button onClick={() => redirect(Routes.LOGIN)}>

apps/web/src/app/login/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { Dunes } from '@/components/ui/dunes';
-import { Button } from '@onlook/ui/button';
-import { Icons } from '@onlook/ui/icons';
+import { Button } from '@onlook/ui-v4/button';
+import { Icons } from '@onlook/ui-v4/icons';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { login } from './actions';

bun.lock

@@ -254,6 +254,58 @@
     "packages/ui": {
       "name": "@onlook/ui",
       "version": "0.0.0",
+      "dependencies": {
+        "@emotion/react": "^11.13.3",
+        "@emotion/styled": "^11.13.0",
+        "@onlook/foundation": "*",
+        "@radix-ui/react-accordion": "^1.2.0",
+        "@radix-ui/react-alert-dialog": "^1.1.1",
+        "@radix-ui/react-checkbox": "^1.1.2",
+        "@radix-ui/react-collapsible": "^1.1.2",
+        "@radix-ui/react-context-menu": "^2.2.1",
+        "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-dropdown-menu": "^2.1.1",
+        "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-popover": "^1.1.1",
+        "@radix-ui/react-progress": "^1.1.0",
+        "@radix-ui/react-scroll-area": "^1.2.0",
+        "@radix-ui/react-select": "^2.1.2",
+        "@radix-ui/react-separator": "^1.1.0",
+        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-tabs": "^1.1.0",
+        "@radix-ui/react-toast": "^1.2.1",
+        "@radix-ui/react-toggle": "^1.1.0",
+        "@radix-ui/react-toggle-group": "^1.1.0",
+        "@radix-ui/react-tooltip": "^1.1.2",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "cmdk": "1.0.4",
+        "color-namer": "^1.4.0",
+        "css-color-names": "^1.0.1",
+        "lodash.debounce": "^4.0.8",
+        "motion": "^11.15.0",
+        "parse-css-color": "^0.2.1",
+        "prosemirror-view": "^1.34.2",
+        "react-merge-refs": "^2.1.1",
+        "tailwind-merge": "^2.3.0",
+        "tailwind-styled-components": "^2.2.0",
+        "tailwindcss-animate": "^1.0.7",
+        "use-eye-dropper": "^1.6.4",
+      },
+      "devDependencies": {
+        "@onlook/typescript": "*",
+        "@onlook/utility": "*",
+        "@types/color-namer": "^1.3.3",
+        "autoprefixer": "^10.4.20",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "typescript": "^5.5.4",
+      },
+    },
+    "packages/ui-v4": {
+      "name": "@onlook/ui-v4",
+      "version": "0.0.0",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
@@ -638,6 +690,8 @@
 
     "@onlook/ui": ["@onlook/ui@workspace:packages/ui"],
 
+    "@onlook/ui-v4": ["@onlook/ui-v4@workspace:packages/ui-v4"],
+
     "@onlook/utility": ["@onlook/utility@workspace:packages/utility"],
 
     "@onlook/web": ["@onlook/web@workspace:apps/web"],
@@ -2964,7 +3018,7 @@
 
     "@npmcli/move-file/rimraf": ["[email protected]", "", { "dependencies": { "glob": "^7.1.3" }, "bin": { "rimraf": "bin.js" } }, "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA=="],
 
-    "@onlook/ui/tailwindcss": ["[email protected]", "", {}, "sha512-vBYstoFnvUZCDxaauNGQQEvJNQgCd1vSMDRYuZZMH1xRRcTboOk1rJrW5yFkEabU9X6Yx1C4LQ+QvPOvQj4Daw=="],
+    "@onlook/ui-v4/tailwindcss": ["[email protected]", "", {}, "sha512-vBYstoFnvUZCDxaauNGQQEvJNQgCd1vSMDRYuZZMH1xRRcTboOk1rJrW5yFkEabU9X6Yx1C4LQ+QvPOvQj4Daw=="],
 
     "@onlook/web/@types/node": ["@types/[email protected]", "", { "dependencies": { "undici-types": "~6.19.2" } }, "sha512-DHlH/fNL6Mho38jTy7/JT7sn2wnXI+wULR6PV4gy4VHLVvnrV/d3pHAMQHhc4gjdLmK2ZiPoMxzp6B3yRajLSQ=="],
 

packages/ui-v4/package.json

@@ -1,6 +1,6 @@
 {
-    "name": "@onlook/ui",
-    "description": "A ui library for Onlook",
+    "name": "@onlook/ui-v4",
+    "description": "A tailwind v4 ui library for Onlook",
     "version": "0.0.0",
     "private": true,
     "type": "module",