wip

Author: mehdibha

pnpm-lock.yaml

@@ -48,7 +48,7 @@
     "npm-to-yarn": "^3.0.0",
     "react": "19.0.0",
     "react-aria": "^3.33.0",
-    "react-aria-components": "^1.6.0",
+    "react-aria-components": "^1.7.0",
     "react-dom": "19.0.0",
     "react-hook-form": "^7.54.2",
     "react-resizable-panels": "^2.0.19",
@@ -58,7 +58,7 @@
     "sharp": "^0.33.2",
     "shiki": "^2.2.0",
     "tailwind-merge": "^2.2.0",
-    "tailwind-variants": "^0.3.1",
+    "tailwind-variants": "^1.0.0",
     "tsx": "^4.7.1",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
@@ -81,6 +81,7 @@
     "tailwindcss": "4.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-rac": "workspace:*",
+    "tailwindcss-react-aria-components": "^2.0.0",
     "typescript": "^5",
     "vfile": "^6.0.3"
   }

www/package.json

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import { LayoutTemplateIcon } from "lucide-react";
 import { Link } from "react-aria-components";
 import { Announcement } from "@/components/announcement";
 import { Button } from "@/components/core/button";
@@ -27,7 +26,7 @@ export default function HomePage() {
             <span className="font-bold italic">unique</span> look.
           </h1>
           <p className="text-fg-muted text-balace mt-2 text-lg">
-            Over 40 components available in multiple variants ready to match
+            Over 40 components available in differents styles ready to match
             your brand identity.
           </p>
           <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
@@ -37,15 +36,15 @@ export default function HomePage() {
               size="lg"
               className="h-10"
             >
-              Create your library
+              Get started
             </Button>
             <Button
               href="/themes"
               variant="outline"
               size="lg"
               className="bg-bg-inverse/5 h-10"
             >
-              Explore docs
+              Explore themes
             </Button>
           </div>
         </section>

www/src/app/(home)/page.tsx

@@ -4,12 +4,12 @@ import { Button } from "@/registry/core/button_basic";
 export function Announcement() {
   return (
     <Button
-      href="/themes"
+      href="/docs/getting-started/introduction"
       prefix={<LayoutTemplateIcon />}
       variant="outline"
       className="bg-bg-inverse/5 text-fg-muted mb-3 h-7 rounded-lg text-xs [&_svvg]:size-4"
     >
-      Introducing blocks
+      Introducing dotUI beta
     </Button>
   );
 }

www/src/components/announcement.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { siteConfig } from "@/config";
+import { Badge } from "./core/badge";
 
 export const Logo = ({
   extanded = true,
@@ -49,9 +50,12 @@ export const Logo = ({
         </g>
       </svg>
       {extanded && (
-        <div className="font-josefin group-data-collapsed/sidebar:opacity-0 mt-1.5 text-base font-bold leading-normal tracking-tighter transition-colors">
-          {siteConfig.global.name}
-        </div>
+        <>
+          <div className="font-josefin group-data-collapsed/sidebar:opacity-0 mt-1.5 text-base font-bold leading-normal tracking-tighter transition-colors">
+            {siteConfig.global.name}
+          </div>
+          <Badge className="border mt-0.5 px-2 group-data-collapsed/sidebar:opacity-0">beta</Badge>
+        </>
       )}
     </Link>
   );

www/src/components/logo.tsx

@@ -3,11 +3,7 @@
 import React from "react";
 import { ChevronDownIcon } from "lucide-react";
 import { useInView } from "motion/react";
-import {
-  UNSTABLE_Virtualizer as Virtualizer,
-  UNSTABLE_ListLayout as ListLayout,
-  useFilter,
-} from "react-aria-components";
+import { Virtualizer, ListLayout, useFilter } from "react-aria-components";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/core/button";
 import { CommandRoot } from "@/components/core/command";

www/src/modules/themes/components/font-selector.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { UNSTABLE_Autocomplete as AriaAutocomplete } from "react-aria-components";
+import { Autocomplete as AriaAutocomplete } from "react-aria-components";
 import { tv } from "tailwind-variants";
 
 const commandStyles = tv({

www/src/registry/core/command_basic.tsx

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 @plugin "tailwindcss-animate";
-@plugin "tailwindcss-rac";
+@plugin "tailwindcss-react-aria-components";
 @import "./docs.css";
 @import "./themes.css";