diff --git a/.changeset/wild-phones-feel.md b/.changeset/wild-phones-feel.md new file mode 100644 index 0000000..7268232 --- /dev/null +++ b/.changeset/wild-phones-feel.md @@ -0,0 +1,5 @@ +--- +"create-better-t-stack": patch +--- + +Migrate to radix-ui monorepo package and update imports diff --git a/apps/cli/templates/frontend/react/next/package.json.hbs b/apps/cli/templates/frontend/react/next/package.json.hbs index f62e941..7d35144 100644 --- a/apps/cli/templates/frontend/react/next/package.json.hbs +++ b/apps/cli/templates/frontend/react/next/package.json.hbs @@ -9,10 +9,7 @@ "lint": "next lint" }, "dependencies": { - "@radix-ui/react-checkbox": "^1.1.5", - "@radix-ui/react-dropdown-menu": "^2.1.7", - "@radix-ui/react-label": "^2.1.3", - "@radix-ui/react-slot": "^1.2.0", + "radix-ui": "^1.4.2", "@tanstack/react-form": "^1.3.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/apps/cli/templates/frontend/react/react-router/package.json b/apps/cli/templates/frontend/react/react-router/package.json index 9c42fda..3adae8e 100644 --- a/apps/cli/templates/frontend/react/react-router/package.json +++ b/apps/cli/templates/frontend/react/react-router/package.json @@ -9,10 +9,7 @@ "typecheck": "react-router typegen && tsc" }, "dependencies": { - "@radix-ui/react-checkbox": "^1.3.2", - "@radix-ui/react-dropdown-menu": "^2.1.15", - "@radix-ui/react-label": "^2.1.7", - "@radix-ui/react-slot": "^1.2.3", + "radix-ui": "^1.4.2", "@react-router/fs-routes": "^7.6.1", "@react-router/node": "^7.6.1", "@react-router/serve": "^7.6.1", diff --git a/apps/cli/templates/frontend/react/tanstack-router/package.json b/apps/cli/templates/frontend/react/tanstack-router/package.json index 372eeaf..513be39 100644 --- a/apps/cli/templates/frontend/react/tanstack-router/package.json +++ b/apps/cli/templates/frontend/react/tanstack-router/package.json @@ -23,10 +23,7 @@ }, "dependencies": { "@hookform/resolvers": "^3.10.0", - "@radix-ui/react-checkbox": "^1.1.4", - "@radix-ui/react-dropdown-menu": "^2.1.6", - "@radix-ui/react-label": "^2.1.2", - "@radix-ui/react-slot": "^1.1.2", + "radix-ui": "^1.4.2", "@tanstack/react-form": "^1.0.5", "@tailwindcss/vite": "^4.0.15", "@tanstack/react-router": "^1.114.25", diff --git a/apps/cli/templates/frontend/react/tanstack-start/package.json b/apps/cli/templates/frontend/react/tanstack-start/package.json index abf34c7..6951869 100644 --- a/apps/cli/templates/frontend/react/tanstack-start/package.json +++ b/apps/cli/templates/frontend/react/tanstack-start/package.json @@ -8,10 +8,7 @@ "dev": "vite dev --port=3001" }, "dependencies": { - "@radix-ui/react-checkbox": "^1.1.4", - "@radix-ui/react-dropdown-menu": "^2.1.6", - "@radix-ui/react-label": "^2.1.2", - "@radix-ui/react-slot": "^1.1.2", + "radix-ui": "^1.4.2", "@tanstack/react-form": "^1.0.5", "@tailwindcss/vite": "^4.1.8", "@tanstack/react-query": "^5.80.6", diff --git a/apps/cli/templates/frontend/react/web-base/src/components/ui/button.tsx b/apps/cli/templates/frontend/react/web-base/src/components/ui/button.tsx index 66ab90e..44d2a42 100644 --- a/apps/cli/templates/frontend/react/web-base/src/components/ui/button.tsx +++ b/apps/cli/templates/frontend/react/web-base/src/components/ui/button.tsx @@ -1,8 +1,8 @@ -import * as React from "react"; -import { Slot } from "@radix-ui/react-slot"; -import { cva, type VariantProps } from "class-variance-authority"; +import * as React from "react" +import { Slot as SlotPrimitive } from "radix-ui" +import { cva, type VariantProps } from "class-variance-authority" -import { cn } from "@/lib/utils"; +import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", @@ -33,7 +33,7 @@ const buttonVariants = cva( size: "default", }, } -); +) function Button({ className, @@ -43,9 +43,9 @@ function Button({ ...props }: React.ComponentProps<"button"> & VariantProps & { - asChild?: boolean; + asChild?: boolean }) { - const Comp = asChild ? Slot : "button"; + const Comp = asChild ? SlotPrimitive.Slot : "button" return ( - ); + ) } -export { Button, buttonVariants }; +export { Button, buttonVariants } diff --git a/apps/cli/templates/frontend/react/web-base/src/components/ui/card.tsx b/apps/cli/templates/frontend/react/web-base/src/components/ui/card.tsx index 93a82d9..d05bbc6 100644 --- a/apps/cli/templates/frontend/react/web-base/src/components/ui/card.tsx +++ b/apps/cli/templates/frontend/react/web-base/src/components/ui/card.tsx @@ -1,6 +1,6 @@ -import * as React from "react"; +import * as React from "react" -import { cn } from "@/lib/utils"; +import { cn } from "@/lib/utils" function Card({ className, ...props }: React.ComponentProps<"div">) { return ( @@ -12,7 +12,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) { )} {...props} /> - ); + ) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) { )} {...props} /> - ); + ) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { @@ -35,7 +35,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) { className={cn("leading-none font-semibold", className)} {...props} /> - ); + ) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { @@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) { className={cn("text-muted-foreground text-sm", className)} {...props} /> - ); + ) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { @@ -58,7 +58,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) { )} {...props} /> - ); + ) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { @@ -68,7 +68,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) { className={cn("px-6", className)} {...props} /> - ); + ) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { @@ -78,7 +78,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) { className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} /> - ); + ) } export { @@ -89,4 +89,4 @@ export { CardAction, CardDescription, CardContent, -}; +} diff --git a/apps/cli/templates/frontend/react/web-base/src/components/ui/checkbox.tsx b/apps/cli/templates/frontend/react/web-base/src/components/ui/checkbox.tsx index 6afea5d..c13c91b 100644 --- a/apps/cli/templates/frontend/react/web-base/src/components/ui/checkbox.tsx +++ b/apps/cli/templates/frontend/react/web-base/src/components/ui/checkbox.tsx @@ -1,8 +1,8 @@ -import * as React from "react"; -import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; -import { CheckIcon } from "lucide-react"; +import * as React from "react" +import { Checkbox as CheckboxPrimitive } from "radix-ui" +import { CheckIcon } from "lucide-react" -import { cn } from "@/lib/utils"; +import { cn } from "@/lib/utils" function Checkbox({ className, @@ -24,7 +24,7 @@ function Checkbox({ - ); + ) } -export { Checkbox }; +export { Checkbox } diff --git a/apps/cli/templates/frontend/react/web-base/src/components/ui/dropdown-menu.tsx b/apps/cli/templates/frontend/react/web-base/src/components/ui/dropdown-menu.tsx index 5de13d8..caf7f69 100644 --- a/apps/cli/templates/frontend/react/web-base/src/components/ui/dropdown-menu.tsx +++ b/apps/cli/templates/frontend/react/web-base/src/components/ui/dropdown-menu.tsx @@ -1,13 +1,15 @@ -import * as React from "react"; -import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; -import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"; +"use client" -import { cn } from "@/lib/utils"; +import * as React from "react" +import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui" +import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react" + +import { cn } from "@/lib/utils" function DropdownMenu({ ...props }: React.ComponentProps) { - return ; + return } function DropdownMenuPortal({ @@ -15,7 +17,7 @@ function DropdownMenuPortal({ }: React.ComponentProps) { return ( - ); + ) } function DropdownMenuTrigger({ @@ -26,7 +28,7 @@ function DropdownMenuTrigger({ data-slot="dropdown-menu-trigger" {...props} /> - ); + ) } function DropdownMenuContent({ @@ -46,7 +48,7 @@ function DropdownMenuContent({ {...props} /> - ); + ) } function DropdownMenuGroup({ @@ -54,7 +56,7 @@ function DropdownMenuGroup({ }: React.ComponentProps) { return ( - ); + ) } function DropdownMenuItem({ @@ -63,8 +65,8 @@ function DropdownMenuItem({ variant = "default", ...props }: React.ComponentProps & { - inset?: boolean; - variant?: "default" | "destructive"; + inset?: boolean + variant?: "default" | "destructive" }) { return ( - ); + ) } function DropdownMenuCheckboxItem({ @@ -103,7 +105,7 @@ function DropdownMenuCheckboxItem({ {children} - ); + ) } function DropdownMenuRadioGroup({ @@ -114,7 +116,7 @@ function DropdownMenuRadioGroup({ data-slot="dropdown-menu-radio-group" {...props} /> - ); + ) } function DropdownMenuRadioItem({ @@ -138,7 +140,7 @@ function DropdownMenuRadioItem({ {children} - ); + ) } function DropdownMenuLabel({ @@ -146,7 +148,7 @@ function DropdownMenuLabel({ inset, ...props }: React.ComponentProps & { - inset?: boolean; + inset?: boolean }) { return ( - ); + ) } function DropdownMenuSeparator({ @@ -171,7 +173,7 @@ function DropdownMenuSeparator({ className={cn("bg-border -mx-1 my-1 h-px", className)} {...props} /> - ); + ) } function DropdownMenuShortcut({ @@ -187,13 +189,13 @@ function DropdownMenuShortcut({ )} {...props} /> - ); + ) } function DropdownMenuSub({ ...props }: React.ComponentProps) { - return ; + return } function DropdownMenuSubTrigger({ @@ -202,7 +204,7 @@ function DropdownMenuSubTrigger({ children, ...props }: React.ComponentProps & { - inset?: boolean; + inset?: boolean }) { return ( - ); + ) } function DropdownMenuSubContent({ @@ -233,7 +235,7 @@ function DropdownMenuSubContent({ )} {...props} /> - ); + ) } export { @@ -252,4 +254,4 @@ export { DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, -}; +} diff --git a/apps/cli/templates/frontend/react/web-base/src/components/ui/input.tsx b/apps/cli/templates/frontend/react/web-base/src/components/ui/input.tsx index 0316cc4..03295ca 100644 --- a/apps/cli/templates/frontend/react/web-base/src/components/ui/input.tsx +++ b/apps/cli/templates/frontend/react/web-base/src/components/ui/input.tsx @@ -1,6 +1,6 @@ -import * as React from "react"; +import * as React from "react" -import { cn } from "@/lib/utils"; +import { cn } from "@/lib/utils" function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( @@ -15,7 +15,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) { )} {...props} /> - ); + ) } -export { Input }; +export { Input } diff --git a/apps/cli/templates/frontend/react/web-base/src/components/ui/label.tsx b/apps/cli/templates/frontend/react/web-base/src/components/ui/label.tsx index 747d8eb..f752f82 100644 --- a/apps/cli/templates/frontend/react/web-base/src/components/ui/label.tsx +++ b/apps/cli/templates/frontend/react/web-base/src/components/ui/label.tsx @@ -1,9 +1,7 @@ -"use client"; +import * as React from "react" +import { Label as LabelPrimitive } from "radix-ui" -import * as React from "react"; -import * as LabelPrimitive from "@radix-ui/react-label"; - -import { cn } from "@/lib/utils"; +import { cn } from "@/lib/utils" function Label({ className, @@ -18,7 +16,7 @@ function Label({ )} {...props} /> - ); + ) } -export { Label }; +export { Label } diff --git a/apps/cli/templates/frontend/react/web-base/src/components/ui/skeleton.tsx b/apps/cli/templates/frontend/react/web-base/src/components/ui/skeleton.tsx index 0168998..32ea0ef 100644 --- a/apps/cli/templates/frontend/react/web-base/src/components/ui/skeleton.tsx +++ b/apps/cli/templates/frontend/react/web-base/src/components/ui/skeleton.tsx @@ -1,4 +1,4 @@ -import { cn } from "@/lib/utils"; +import { cn } from "@/lib/utils" function Skeleton({ className, ...props }: React.ComponentProps<"div">) { return ( @@ -7,7 +7,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) { className={cn("bg-accent animate-pulse rounded-md", className)} {...props} /> - ); + ) } -export { Skeleton }; +export { Skeleton } diff --git a/apps/cli/templates/frontend/react/web-base/src/components/ui/sonner.tsx b/apps/cli/templates/frontend/react/web-base/src/components/ui/sonner.tsx index 7264637..f96a98d 100644 --- a/apps/cli/templates/frontend/react/web-base/src/components/ui/sonner.tsx +++ b/apps/cli/templates/frontend/react/web-base/src/components/ui/sonner.tsx @@ -1,3 +1,5 @@ +"use client"; + import { useTheme } from "next-themes"; import { Toaster as Sonner, type ToasterProps } from "sonner"; diff --git a/apps/web/package.json b/apps/web/package.json index 8e3bc10..0f87a15 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -11,11 +11,6 @@ "generate-analytics": "bun scripts/generate-analytics.ts" }, "dependencies": { - "@radix-ui/react-dialog": "^1.1.14", - "@radix-ui/react-scroll-area": "^1.2.9", - "@radix-ui/react-slot": "^1.2.3", - "@radix-ui/react-switch": "^1.2.5", - "@radix-ui/react-tooltip": "^1.2.7", "babel-plugin-react-compiler": "^19.1.0-rc.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -29,6 +24,7 @@ "next-themes": "^0.4.6", "nuqs": "^2.4.3", "papaparse": "^5.5.3", + "radix-ui": "^1.4.2", "react": "^19.1.0", "react-dom": "^19.1.0", "react-tweet": "^3.2.2", diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx index cb18d26..992922c 100644 --- a/apps/web/src/components/ui/button.tsx +++ b/apps/web/src/components/ui/button.tsx @@ -1,5 +1,5 @@ -import { Slot } from "@radix-ui/react-slot"; import { type VariantProps, cva } from "class-variance-authority"; +import { Slot as SlotPrimitive } from "radix-ui"; import type * as React from "react"; import { cn } from "@/lib/utils"; @@ -45,7 +45,7 @@ function Button({ VariantProps & { asChild?: boolean; }) { - const Comp = asChild ? Slot : "button"; + const Comp = asChild ? SlotPrimitive.Slot : "button"; return (