From 9c1a2719eddb662b0f527617f1c2f803f891f53d Mon Sep 17 00:00:00 2001
From: Alex Yang <himself65@outlook.com>
Date: Tue, 23 Sep 2025 14:50:49 -0700
Subject: [PATCH] chore(demo): migrate to tailwind v4 (#4855)

---
 .../app/(auth)/forget-password/page.tsx       |   2 +-
 .../app/accept-invitation/[id]/page.tsx       |   2 +-
 demo/nextjs/app/dashboard/change-plan.tsx     |   8 +-
 .../app/dashboard/organization-card.tsx       |   4 +-
 demo/nextjs/app/dashboard/upgrade-button.tsx  |   4 +-
 demo/nextjs/app/features.tsx                  |   2 +-
 demo/nextjs/app/globals.css                   | 107 +++++++++---------
 demo/nextjs/components/blocks/pricing.tsx     |   6 +-
 demo/nextjs/components/theme-toggle.tsx       |   2 +-
 .../components/ui/canvas-reveal-effect.tsx    |   2 +-
 demo/nextjs/components/ui/chart.tsx           |   4 +-
 demo/nextjs/components/ui/context-menu.tsx    |  10 +-
 demo/nextjs/components/ui/dropdown-menu.tsx   |  14 +--
 demo/nextjs/components/ui/input-otp.tsx       |   2 +-
 demo/nextjs/components/ui/menubar.tsx         |  10 +-
 demo/nextjs/components/ui/navigation-menu.tsx |   8 +-
 demo/nextjs/components/ui/scroll-area.tsx     |   4 +-
 demo/nextjs/components/ui/select.tsx          |   8 +-
 demo/nextjs/components/ui/separator.tsx       |   2 +-
 demo/nextjs/components/ui/tabs2.tsx           |   4 +-
 demo/nextjs/components/ui/toast.tsx           |   4 +-
 demo/nextjs/components/ui/tooltip.tsx         |   2 +-
 demo/nextjs/components/wrapper.tsx            |   2 +-
 demo/nextjs/package.json                      |   6 +-
 demo/nextjs/tailwind.config.ts                |  41 ++++---
 pnpm-lock.yaml                                |  13 ++-
 26 files changed, 138 insertions(+), 135 deletions(-)

diff --git a/demo/nextjs/app/(auth)/forget-password/page.tsx b/demo/nextjs/app/(auth)/forget-password/page.tsx
index 5a417bf1..26ff59c7 100644
--- a/demo/nextjs/app/(auth)/forget-password/page.tsx
+++ b/demo/nextjs/app/(auth)/forget-password/page.tsx
@@ -76,7 +76,7 @@ export default function Component() {
 	return (
 		<main className="flex flex-col items-center justify-center min-h-[calc(100vh-10rem)]">
 			{/* Radial gradient for the container to give a faded look */}
-			<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+			<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white mask-[radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
 			<Card className="w-[350px]">
 				<CardHeader>
 					<CardTitle>Forgot password</CardTitle>
diff --git a/demo/nextjs/app/accept-invitation/[id]/page.tsx b/demo/nextjs/app/accept-invitation/[id]/page.tsx
index b25599b5..b6f997d1 100644
--- a/demo/nextjs/app/accept-invitation/[id]/page.tsx
+++ b/demo/nextjs/app/accept-invitation/[id]/page.tsx
@@ -87,7 +87,7 @@ export default function InvitationPage() {
 
 	return (
 		<div className="min-h-[80vh] flex items-center justify-center">
-			<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+			<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white mask-[radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
 			{invitation ? (
 				<Card className="w-full max-w-md">
 					<CardHeader>
diff --git a/demo/nextjs/app/dashboard/change-plan.tsx b/demo/nextjs/app/dashboard/change-plan.tsx
index 1b5bdd0a..02d85e3a 100644
--- a/demo/nextjs/app/dashboard/change-plan.tsx
+++ b/demo/nextjs/app/dashboard/change-plan.tsx
@@ -27,7 +27,7 @@ function Component(props: { currentPlan?: string; isTrial?: boolean }) {
 					className={cn(
 						"gap-2",
 						!props.currentPlan &&
-							" bg-gradient-to-br from-purple-100 to-stone-300",
+							" bg-linear-to-br from-purple-100 to-stone-300",
 					)}
 				>
 					{props.currentPlan ? (
@@ -67,7 +67,7 @@ function Component(props: { currentPlan?: string; isTrial?: boolean }) {
 						value={selectedPlan}
 						onValueChange={(value) => setSelectedPlan(value)}
 					>
-						<div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent">
+						<div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent">
 							<RadioGroupItem
 								value="plus"
 								id={`${id}-1`}
@@ -84,7 +84,7 @@ function Component(props: { currentPlan?: string; isTrial?: boolean }) {
 								</p>
 							</div>
 						</div>
-						<div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent">
+						<div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent">
 							<RadioGroupItem
 								value="pro"
 								id={`${id}-2`}
@@ -101,7 +101,7 @@ function Component(props: { currentPlan?: string; isTrial?: boolean }) {
 								</p>
 							</div>
 						</div>
-						<div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent">
+						<div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent">
 							<RadioGroupItem
 								value="enterprise"
 								id={`${id}-3`}
diff --git a/demo/nextjs/app/dashboard/organization-card.tsx b/demo/nextjs/app/dashboard/organization-card.tsx
index a5cf2956..5be54480 100644
--- a/demo/nextjs/app/dashboard/organization-card.tsx
+++ b/demo/nextjs/app/dashboard/organization-card.tsx
@@ -140,7 +140,7 @@ export function OrganizationCard(props: {
 			</CardHeader>
 			<CardContent>
 				<div className="flex gap-8 flex-col md:flex-row">
-					<div className="flex flex-col gap-2 flex-grow">
+					<div className="flex flex-col gap-2 grow">
 						<p className="font-medium border-b-2 border-b-foreground/10">
 							Members
 						</p>
@@ -202,7 +202,7 @@ export function OrganizationCard(props: {
 							)}
 						</div>
 					</div>
-					<div className="flex flex-col gap-2 flex-grow">
+					<div className="flex flex-col gap-2 grow">
 						<p className="font-medium border-b-2 border-b-foreground/10">
 							Invites
 						</p>
diff --git a/demo/nextjs/app/dashboard/upgrade-button.tsx b/demo/nextjs/app/dashboard/upgrade-button.tsx
index 705424f0..82947dad 100644
--- a/demo/nextjs/app/dashboard/upgrade-button.tsx
+++ b/demo/nextjs/app/dashboard/upgrade-button.tsx
@@ -9,7 +9,7 @@ export default function UpgradeButton() {
 
 	return (
 		<motion.button
-			className="relative overflow-hidden px-6 py-3 rounded-md bg-gradient-to-r from-gray-900 to-black text-white font-bold text-lg shadow-lg transition-all duration-300 ease-out transform hover:scale-105 hover:shadow-xl"
+			className="relative overflow-hidden px-6 py-3 rounded-md bg-linear-to-r from-gray-900 to-black text-white font-bold text-lg shadow-lg transition-all duration-300 ease-out transform hover:scale-105 hover:shadow-xl"
 			onHoverStart={() => setIsHovered(true)}
 			onHoverEnd={() => setIsHovered(false)}
 			whileHover={{ scale: 1.05 }}
@@ -20,7 +20,7 @@ export default function UpgradeButton() {
 				Upgrade to Pro
 			</span>
 			<motion.div
-				className="absolute inset-0 bg-gradient-to-r from-gray-800 to-gray-700"
+				className="absolute inset-0 bg-linear-to-r from-gray-800 to-gray-700"
 				initial={{ opacity: 0 }}
 				animate={{ opacity: isHovered ? 1 : 0 }}
 				transition={{ duration: 0.3 }}
diff --git a/demo/nextjs/app/features.tsx b/demo/nextjs/app/features.tsx
index 8795b629..cacbe6c5 100644
--- a/demo/nextjs/app/features.tsx
+++ b/demo/nextjs/app/features.tsx
@@ -28,7 +28,7 @@ const Card = ({
 		<div
 			onMouseEnter={() => setHovered(true)}
 			onMouseLeave={() => setHovered(false)}
-			className="border border-black/[0.2] group/canvas-card flex items-center justify-center dark:border-white/[0.2]  max-w-sm w-full mx-auto p-4 relative h-[18rem]"
+			className="border border-black/20 group/canvas-card flex items-center justify-center dark:border-white/20  max-w-sm w-full mx-auto p-4 relative h-72"
 		>
 			<Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />
 			<Icon className="absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black" />
diff --git a/demo/nextjs/app/globals.css b/demo/nextjs/app/globals.css
index 7ad5e382..19e9a363 100644
--- a/demo/nextjs/app/globals.css
+++ b/demo/nextjs/app/globals.css
@@ -1,63 +1,62 @@
 @import "tailwindcss";
+@config "../tailwind.config.ts";
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
-@layer base {
-	:root {
-		--background: hsl(0 0% 100%);
-		--foreground: hsl(20 14.3% 4.1%);
-		--card: hsl(0 0% 100%);
-		--card-foreground: hsl(20 14.3% 4.1%);
-		--popover: hsl(0 0% 100%);
-		--popover-foreground: hsl(20 14.3% 4.1%);
-		--primary: hsl(24 9.8% 10%);
-		--primary-foreground: hsl(60 9.1% 97.8%);
-		--secondary: hsl(60 4.8% 95.9%);
-		--secondary-foreground: hsl(24 9.8% 10%);
-		--muted: hsl(60 4.8% 95.9%);
-		--muted-foreground: hsl(25 5.3% 44.7%);
-		--accent: hsl(60 4.8% 95.9%);
-		--accent-foreground: hsl(24 9.8% 10%);
-		--destructive: hsl(0 84.2% 60.2%);
-		--destructive-foreground: hsl(60 9.1% 97.8%);
-		--border: hsl(20 5.9% 90%);
-		--input: hsl(20 5.9% 90%);
-		--ring: hsl(20 14.3% 4.1%);
-		--radius: 0rem;
-		--chart-1: hsl(12 76% 61%);
-		--chart-2: hsl(173 58% 39%);
-		--chart-3: hsl(197 37% 24%);
-		--chart-4: hsl(43 74% 66%);
-		--chart-5: hsl(27 87% 67%);
-	}
+:root {
+	--background: hsl(0 0% 100%);
+	--foreground: hsl(20 14.3% 4.1%);
+	--card: hsl(0 0% 100%);
+	--card-foreground: hsl(20 14.3% 4.1%);
+	--popover: hsl(0 0% 100%);
+	--popover-foreground: hsl(20 14.3% 4.1%);
+	--primary: hsl(24 9.8% 10%);
+	--primary-foreground: hsl(60 9.1% 97.8%);
+	--secondary: hsl(60 4.8% 95.9%);
+	--secondary-foreground: hsl(24 9.8% 10%);
+	--muted: hsl(60 4.8% 95.9%);
+	--muted-foreground: hsl(25 5.3% 44.7%);
+	--accent: hsl(60 4.8% 95.9%);
+	--accent-foreground: hsl(24 9.8% 10%);
+	--destructive: hsl(0 84.2% 60.2%);
+	--destructive-foreground: hsl(60 9.1% 97.8%);
+	--border: hsl(20 5.9% 90%);
+	--input: hsl(20 5.9% 90%);
+	--ring: hsl(20 14.3% 4.1%);
+	--radius: 0rem;
+	--chart-1: hsl(12 76% 61%);
+	--chart-2: hsl(173 58% 39%);
+	--chart-3: hsl(197 37% 24%);
+	--chart-4: hsl(43 74% 66%);
+	--chart-5: hsl(27 87% 67%);
+}
 
-	.dark {
-		--background: hsl(20 14.3% 4.1%);
-		--foreground: hsl(60 9.1% 97.8%);
-		--card: hsl(20 14.3% 4.1%);
-		--card-foreground: hsl(60 9.1% 97.8%);
-		--popover: hsl(20 14.3% 4.1%);
-		--popover-foreground: hsl(60 9.1% 97.8%);
-		--primary: hsl(60 9.1% 97.8%);
-		--primary-foreground: hsl(24 9.8% 10%);
-		--secondary: hsl(12 6.5% 15.1%);
-		--secondary-foreground: hsl(60 9.1% 97.8%);
-		--muted: hsl(12 6.5% 15.1%);
-		--muted-foreground: hsl(24 5.4% 63.9%);
-		--accent: hsl(12 6.5% 15.1%);
-		--accent-foreground: hsl(60 9.1% 97.8%);
-		--destructive: hsl(0 62.8% 30.6%);
-		--destructive-foreground: hsl(60 9.1% 97.8%);
-		--border: hsl(12 6.5% 15.1%);
-		--input: hsl(12 6.5% 15.1%);
-		--ring: hsl(24 5.7% 82.9%);
-		--chart-1: hsl(220 70% 50%);
-		--chart-2: hsl(160 60% 45%);
-		--chart-3: hsl(30 80% 55%);
-		--chart-4: hsl(280 65% 60%);
-		--chart-5: hsl(340 75% 55%);
-	}
+.dark {
+	--background: hsl(20 14.3% 4.1%);
+	--foreground: hsl(60 9.1% 97.8%);
+	--card: hsl(20 14.3% 4.1%);
+	--card-foreground: hsl(60 9.1% 97.8%);
+	--popover: hsl(20 14.3% 4.1%);
+	--popover-foreground: hsl(60 9.1% 97.8%);
+	--primary: hsl(60 9.1% 97.8%);
+	--primary-foreground: hsl(24 9.8% 10%);
+	--secondary: hsl(12 6.5% 15.1%);
+	--secondary-foreground: hsl(60 9.1% 97.8%);
+	--muted: hsl(12 6.5% 15.1%);
+	--muted-foreground: hsl(24 5.4% 63.9%);
+	--accent: hsl(12 6.5% 15.1%);
+	--accent-foreground: hsl(60 9.1% 97.8%);
+	--destructive: hsl(0 62.8% 30.6%);
+	--destructive-foreground: hsl(60 9.1% 97.8%);
+	--border: hsl(12 6.5% 15.1%);
+	--input: hsl(12 6.5% 15.1%);
+	--ring: hsl(24 5.7% 82.9%);
+	--chart-1: hsl(220 70% 50%);
+	--chart-2: hsl(160 60% 45%);
+	--chart-3: hsl(30 80% 55%);
+	--chart-4: hsl(280 65% 60%);
+	--chart-5: hsl(340 75% 55%);
 }
 
 @theme inline {
diff --git a/demo/nextjs/components/blocks/pricing.tsx b/demo/nextjs/components/blocks/pricing.tsx
index 2330719a..be01e0e6 100644
--- a/demo/nextjs/components/blocks/pricing.tsx
+++ b/demo/nextjs/components/blocks/pricing.tsx
@@ -139,12 +139,12 @@ export function Pricing({
 							opacity: { duration: 0.5 },
 						}}
 						className={cn(
-							`rounded-sm border-[1px] p-6 bg-background text-center lg:flex lg:flex-col lg:justify-center relative`,
+							`rounded-sm border p-6 bg-background text-center lg:flex lg:flex-col lg:justify-center relative`,
 							plan.isPopular ? "border-border border-2" : "border-border",
 							"flex flex-col",
 							!plan.isPopular && "mt-5",
 							index === 0 || index === 2
-								? "z-0 transform translate-x-0 translate-y-0 -translate-z-[50px] rotate-y-[10deg]"
+								? "z-0 transform translate-x-0 translate-y-0 -translate-z-[50px] rotate-y-10"
 								: "z-10",
 							index === 0 && "origin-right",
 							index === 2 && "origin-left",
@@ -196,7 +196,7 @@ export function Pricing({
 							<ul className="mt-5 gap-2 flex flex-col">
 								{plan.features.map((feature, idx) => (
 									<li key={idx} className="flex items-start gap-2">
-										<CheckIcon className="h-4 w-4 text-primary mt-1 flex-shrink-0" />
+										<CheckIcon className="h-4 w-4 text-primary mt-1 shrink-0" />
 										<span className="text-left">{feature}</span>
 									</li>
 								))}
diff --git a/demo/nextjs/components/theme-toggle.tsx b/demo/nextjs/components/theme-toggle.tsx
index 6c2d457a..5310a798 100644
--- a/demo/nextjs/components/theme-toggle.tsx
+++ b/demo/nextjs/components/theme-toggle.tsx
@@ -13,7 +13,7 @@ export function ThemeToggle() {
 			size="icon"
 			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
 		>
-			<Sun className="h-[1.5rem] w-[1.3rem] dark:hidden" color="#000" />
+			<Sun className="h-6 w-[1.3rem] dark:hidden" color="#000" />
 			<Moon className="hidden h-5 w-5 dark:block" />
 			<span className="sr-only">Toggle theme</span>
 		</Button>
diff --git a/demo/nextjs/components/ui/canvas-reveal-effect.tsx b/demo/nextjs/components/ui/canvas-reveal-effect.tsx
index ac4e6447..3565b2e0 100644
--- a/demo/nextjs/components/ui/canvas-reveal-effect.tsx
+++ b/demo/nextjs/components/ui/canvas-reveal-effect.tsx
@@ -42,7 +42,7 @@ export const CanvasRevealEffect = ({
 				/>
 			</div>
 			{showGradient && (
-				<div className="absolute inset-0 bg-gradient-to-t from-gray-950 to-[84%]" />
+				<div className="absolute inset-0 bg-linear-to-t from-gray-950 to-84%" />
 			)}
 		</div>
 	);
diff --git a/demo/nextjs/components/ui/chart.tsx b/demo/nextjs/components/ui/chart.tsx
index 6689230f..86da51e3 100644
--- a/demo/nextjs/components/ui/chart.tsx
+++ b/demo/nextjs/components/ui/chart.tsx
@@ -158,7 +158,7 @@ const ChartTooltipContent = ({
 		<div
 			ref={ref}
 			className={cn(
-				"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+				"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
 				className,
 			)}
 		>
@@ -187,7 +187,7 @@ const ChartTooltipContent = ({
 										!hideIndicator && (
 											<div
 												className={cn(
-													"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+													"shrink-0 rounded-[2px] border-border bg-(--color-bg)",
 													{
 														"h-2.5 w-2.5": indicator === "dot",
 														"w-1": indicator === "line",
diff --git a/demo/nextjs/components/ui/context-menu.tsx b/demo/nextjs/components/ui/context-menu.tsx
index 0b1ba707..cc8c02ae 100644
--- a/demo/nextjs/components/ui/context-menu.tsx
+++ b/demo/nextjs/components/ui/context-menu.tsx
@@ -56,7 +56,7 @@ const ContextMenuSubContent = ({
 	<ContextMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 			className,
 		)}
 		{...props}
@@ -75,7 +75,7 @@ const ContextMenuContent = ({
 		<ContextMenuPrimitive.Content
 			ref={ref}
 			className={cn(
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				className,
 			)}
 			{...props}
@@ -88,7 +88,7 @@ const ContextMenuItem = ({ ref, className, inset, ...props }) => (
 	<ContextMenuPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			inset && "pl-8",
 			className,
 		)}
@@ -111,7 +111,7 @@ const ContextMenuCheckboxItem = ({
 	<ContextMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className,
 		)}
 		checked={checked}
@@ -139,7 +139,7 @@ const ContextMenuRadioItem = ({
 	<ContextMenuPrimitive.RadioItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className,
 		)}
 		{...props}
diff --git a/demo/nextjs/components/ui/dropdown-menu.tsx b/demo/nextjs/components/ui/dropdown-menu.tsx
index 131a5230..ce55f83c 100644
--- a/demo/nextjs/components/ui/dropdown-menu.tsx
+++ b/demo/nextjs/components/ui/dropdown-menu.tsx
@@ -42,7 +42,7 @@ function DropdownMenuContent({
 				data-slot="dropdown-menu-content"
 				sideOffset={sideOffset}
 				className={cn(
-					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
 					className,
 				)}
 				{...props}
@@ -74,7 +74,7 @@ function DropdownMenuItem({
 			data-inset={inset}
 			data-variant={variant}
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:text-destructive-foreground! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
 		<DropdownMenuPrimitive.CheckboxItem
 			data-slot="dropdown-menu-checkbox-item"
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
 		<DropdownMenuPrimitive.RadioItem
 			data-slot="dropdown-menu-radio-item"
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
@@ -155,7 +155,7 @@ function DropdownMenuLabel({
 			data-slot="dropdown-menu-label"
 			data-inset={inset}
 			className={cn(
-				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				"px-2 py-1.5 text-sm font-medium data-inset:pl-8",
 				className,
 			)}
 			{...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
 			data-slot="dropdown-menu-sub-trigger"
 			data-inset={inset}
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8",
 				className,
 			)}
 			{...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
 		<DropdownMenuPrimitive.SubContent
 			data-slot="dropdown-menu-sub-content"
 			className={cn(
-				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
 				className,
 			)}
 			{...props}
diff --git a/demo/nextjs/components/ui/input-otp.tsx b/demo/nextjs/components/ui/input-otp.tsx
index 4d3a5398..a3c7efc8 100644
--- a/demo/nextjs/components/ui/input-otp.tsx
+++ b/demo/nextjs/components/ui/input-otp.tsx
@@ -17,7 +17,7 @@ const InputOTP = ({
 	<OTPInput
 		ref={ref}
 		containerClassName={cn(
-			"flex items-center gap-2 has-[:disabled]:opacity-50",
+			"flex items-center gap-2 has-disabled:opacity-50",
 			containerClassName,
 		)}
 		className={cn("disabled:cursor-not-allowed", className)}
diff --git a/demo/nextjs/components/ui/menubar.tsx b/demo/nextjs/components/ui/menubar.tsx
index c830dbf7..e13cd8fd 100644
--- a/demo/nextjs/components/ui/menubar.tsx
+++ b/demo/nextjs/components/ui/menubar.tsx
@@ -82,7 +82,7 @@ const MenubarSubContent = ({
 	<MenubarPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 			className,
 		)}
 		{...props}
@@ -107,7 +107,7 @@ const MenubarContent = ({
 			alignOffset={alignOffset}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				className,
 			)}
 			{...props}
@@ -120,7 +120,7 @@ const MenubarItem = ({ ref, className, inset, ...props }) => (
 	<MenubarPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			inset && "pl-8",
 			className,
 		)}
@@ -141,7 +141,7 @@ const MenubarCheckboxItem = ({
 	<MenubarPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className,
 		)}
 		checked={checked}
@@ -168,7 +168,7 @@ const MenubarRadioItem = ({
 	<MenubarPrimitive.RadioItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className,
 		)}
 		{...props}
diff --git a/demo/nextjs/components/ui/navigation-menu.tsx b/demo/nextjs/components/ui/navigation-menu.tsx
index ce8f288d..083d7038 100644
--- a/demo/nextjs/components/ui/navigation-menu.tsx
+++ b/demo/nextjs/components/ui/navigation-menu.tsx
@@ -48,7 +48,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
 );
 
 const NavigationMenuTrigger = ({
@@ -68,7 +68,7 @@ const NavigationMenuTrigger = ({
 	>
 		{children}{" "}
 		<ChevronDownIcon
-			className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+			className="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
 			aria-hidden="true"
 		/>
 	</NavigationMenuPrimitive.Trigger>
@@ -109,7 +109,7 @@ const NavigationMenuViewport = ({
 	<div className={cn("absolute left-0 top-full flex justify-center")}>
 		<NavigationMenuPrimitive.Viewport
 			className={cn(
-				"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+				"origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)",
 				className,
 			)}
 			ref={ref}
@@ -132,7 +132,7 @@ const NavigationMenuIndicator = ({
 	<NavigationMenuPrimitive.Indicator
 		ref={ref}
 		className={cn(
-			"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+			"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
 			className,
 		)}
 		{...props}
diff --git a/demo/nextjs/components/ui/scroll-area.tsx b/demo/nextjs/components/ui/scroll-area.tsx
index 29c71c7f..72d30cc4 100644
--- a/demo/nextjs/components/ui/scroll-area.tsx
+++ b/demo/nextjs/components/ui/scroll-area.tsx
@@ -45,9 +45,9 @@ const ScrollBar = ({
 		className={cn(
 			"flex touch-none select-none transition-colors",
 			orientation === "vertical" &&
-				"h-full w-2.5 border-l border-l-transparent p-[1px]",
+				"h-full w-2.5 border-l border-l-transparent p-px",
 			orientation === "horizontal" &&
-				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
+				"h-2.5 flex-col border-t border-t-transparent p-px",
 			className,
 		)}
 		{...props}
diff --git a/demo/nextjs/components/ui/select.tsx b/demo/nextjs/components/ui/select.tsx
index aa0131a9..bce087c6 100644
--- a/demo/nextjs/components/ui/select.tsx
+++ b/demo/nextjs/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 			className,
 		)}
 		{...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
 		<SelectPrimitive.Content
 			ref={ref}
 			className={cn(
-				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				position === "popper" &&
 					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 				className,
@@ -88,7 +88,7 @@ const SelectContent = React.forwardRef<
 				className={cn(
 					"p-1",
 					position === "popper" &&
-						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+						"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)",
 				)}
 			>
 				{children}
@@ -118,7 +118,7 @@ const SelectItem = React.forwardRef<
 	<SelectPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className,
 		)}
 		{...props}
diff --git a/demo/nextjs/components/ui/separator.tsx b/demo/nextjs/components/ui/separator.tsx
index 75162ffc..157bde5f 100644
--- a/demo/nextjs/components/ui/separator.tsx
+++ b/demo/nextjs/components/ui/separator.tsx
@@ -20,7 +20,7 @@ const Separator = ({
 		orientation={orientation}
 		className={cn(
 			"shrink-0 bg-border",
-			orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+			orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
 			className,
 		)}
 		{...props}
diff --git a/demo/nextjs/components/ui/tabs2.tsx b/demo/nextjs/components/ui/tabs2.tsx
index 104d903c..5d482a82 100644
--- a/demo/nextjs/components/ui/tabs2.tsx
+++ b/demo/nextjs/components/ui/tabs2.tsx
@@ -40,7 +40,7 @@ export const Tabs = ({
 		<>
 			<div
 				className={cn(
-					"flex flex-row items-center justify-start mt-0 [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar border-x w-full border-t max-w-max bg-opacity-0",
+					"flex flex-row items-center justify-start mt-0 perspective-[1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar border-x w-full border-t max-w-max bg-opacity-0",
 					containerClassName,
 				)}
 			>
@@ -133,7 +133,7 @@ export const FadeInDiv = ({
 						},
 					}}
 					className={cn(
-						"w-50 h-full",
+						"w-full h-full",
 						isActive(tab) ? "" : "hidden",
 						className,
 					)}
diff --git a/demo/nextjs/components/ui/toast.tsx b/demo/nextjs/components/ui/toast.tsx
index b8ed48fc..6b417467 100644
--- a/demo/nextjs/components/ui/toast.tsx
+++ b/demo/nextjs/components/ui/toast.tsx
@@ -20,7 +20,7 @@ const ToastViewport = ({
 	<ToastPrimitives.Viewport
 		ref={ref}
 		className={cn(
-			"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+			"fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 			className,
 		)}
 		{...props}
@@ -29,7 +29,7 @@ const ToastViewport = ({
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-	"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 	{
 		variants: {
 			variant: {
diff --git a/demo/nextjs/components/ui/tooltip.tsx b/demo/nextjs/components/ui/tooltip.tsx
index 17b986be..1a4fc485 100644
--- a/demo/nextjs/components/ui/tooltip.tsx
+++ b/demo/nextjs/components/ui/tooltip.tsx
@@ -52,7 +52,7 @@ function TooltipContent({
 				{...props}
 			>
 				{children}
-				<TooltipPrimitive.Arrow className="-z-10 relative bg-primary dark:bg-stone-900 dark:fill-stone-900 fill-primary size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+				<TooltipPrimitive.Arrow className="-z-10 relative bg-primary dark:bg-stone-900 dark:fill-stone-900 fill-primary size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
 			</TooltipPrimitive.Content>
 		</TooltipPrimitive.Portal>
 	);
diff --git a/demo/nextjs/components/wrapper.tsx b/demo/nextjs/components/wrapper.tsx
index f318bc84..742eb016 100644
--- a/demo/nextjs/components/wrapper.tsx
+++ b/demo/nextjs/components/wrapper.tsx
@@ -8,7 +8,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 export function Wrapper(props: { children: React.ReactNode }) {
 	return (
 		<div className="min-h-screen w-full dark:bg-black bg-white  dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2] relative flex justify-center">
-			<div className="absolute pointer-events-none inset-0 md:flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] hidden"></div>
+			<div className="absolute pointer-events-none inset-0 md:flex items-center justify-center dark:bg-black bg-white mask-[radial-gradient(ellipse_at_center,transparent_20%,black)] hidden"></div>
 			<div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-full lg:w-8/12 px-4 md:px-1">
 				<Link href="/">
 					<div className="flex gap-2 cursor-pointer">
diff --git a/demo/nextjs/package.json b/demo/nextjs/package.json
index cde215ff..8d651933 100644
--- a/demo/nextjs/package.json
+++ b/demo/nextjs/package.json
@@ -11,8 +11,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@better-auth/stripe": "workspace:*",
     "@better-auth/sso": "workspace:*",
+    "@better-auth/stripe": "workspace:*",
     "@better-fetch/fetch": "catalog:",
     "@hookform/resolvers": "^5.2.1",
     "@libsql/client": "^0.15.14",
@@ -84,7 +84,6 @@
     "shiki": "^3.12.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7",
     "three": "^0.180.0",
     "ua-parser-js": "^2.0.4",
     "vaul": "^1.1.2",
@@ -98,6 +97,7 @@
     "@types/three": "^0.180.0",
     "@types/ua-parser-js": "^0.7.39",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.13"
+    "tailwindcss": "^4.1.13",
+    "tw-animate-css": "^1.3.8"
   }
 }
diff --git a/demo/nextjs/tailwind.config.ts b/demo/nextjs/tailwind.config.ts
index 7210b911..fb8d4eb5 100644
--- a/demo/nextjs/tailwind.config.ts
+++ b/demo/nextjs/tailwind.config.ts
@@ -8,7 +8,7 @@ const {
 } = require("tailwindcss/lib/util/flattenColorPalette");
 
 const config = {
-	darkMode: ["class"],
+	darkMode: ["class", '[data-theme="dark"]'],
 	content: [
 		"./pages/**/*.{ts,tsx}",
 		"./components/**/*.{ts,tsx}",
@@ -26,38 +26,38 @@ const config = {
 		},
 		extend: {
 			colors: {
-				border: "hsl(var(--border))",
-				input: "hsl(var(--input))",
-				ring: "hsl(var(--ring))",
-				background: "hsl(var(--background))",
-				foreground: "hsl(var(--foreground))",
+				border: "var(--border)",
+				input: "var(--input)",
+				ring: "var(--ring)",
+				background: "var(--background)",
+				foreground: "var(--foreground)",
 				primary: {
-					DEFAULT: "hsl(var(--primary))",
-					foreground: "hsl(var(--primary-foreground))",
+					DEFAULT: "var(--primary)",
+					foreground: "var(--primary-foreground)",
 				},
 				secondary: {
-					DEFAULT: "hsl(var(--secondary))",
-					foreground: "hsl(var(--secondary-foreground))",
+					DEFAULT: "var(--secondary)",
+					foreground: "var(--secondary-foreground)",
 				},
 				destructive: {
-					DEFAULT: "hsl(var(--destructive))",
-					foreground: "hsl(var(--destructive-foreground))",
+					DEFAULT: "var(--destructive)",
+					foreground: "var(--destructive-foreground)",
 				},
 				muted: {
-					DEFAULT: "hsl(var(--muted))",
-					foreground: "hsl(var(--muted-foreground))",
+					DEFAULT: "var(--muted)",
+					foreground: "var(--muted-foreground)",
 				},
 				accent: {
-					DEFAULT: "hsl(var(--accent))",
-					foreground: "hsl(var(--accent-foreground))",
+					DEFAULT: "var(--accent)",
+					foreground: "var(--accent-foreground)",
 				},
 				popover: {
-					DEFAULT: "hsl(var(--popover))",
-					foreground: "hsl(var(--popover-foreground))",
+					DEFAULT: "var(--popover)",
+					foreground: "var(--popover-foreground)",
 				},
 				card: {
-					DEFAULT: "hsl(var(--card))",
-					foreground: "hsl(var(--card-foreground))",
+					DEFAULT: "var(--card)",
+					foreground: "var(--card-foreground)",
 				},
 			},
 			borderRadius: {
@@ -85,7 +85,6 @@ const config = {
 		},
 	},
 	plugins: [
-		require("tailwindcss-animate"),
 		addVariablesForColors,
 		function ({ matchUtilities, theme }: any) {
 			matchUtilities(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3bfa2c2..afeb23e6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -274,9 +274,6 @@ importers:
       tailwind-merge:
         specifier: ^3.3.1
         version: 3.3.1
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@4.1.13)
       three:
         specifier: ^0.180.0
         version: 0.180.0
@@ -314,6 +311,9 @@ importers:
       tailwindcss:
         specifier: ^4.1.13
         version: 4.1.13
+      tw-animate-css:
+        specifier: ^1.3.8
+        version: 1.3.8
 
   docs:
     dependencies:
@@ -11404,6 +11404,9 @@ packages:
     resolution: {integrity: sha512-gxToHmi9oTBNB05UjUsrWf0OyN5ZXtD0apOarC1KIx232Vp3WimRNy3810QzeNSgyD5rsaIDXlxlbnOzlouo+w==}
     hasBin: true
 
+  tw-animate-css@1.3.8:
+    resolution: {integrity: sha512-Qrk3PZ7l7wUcGYhwZloqfkWCmaXZAoqjkdbIDvzfGshwGtexa/DAs9koXxIkrpEasyevandomzCBAV1Yyop5rw==}
+
   type-detect@4.0.8:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
     engines: {node: '>=4'}
@@ -16543,7 +16546,7 @@ snapshots:
     dependencies:
       '@jridgewell/remapping': 2.3.5
       enhanced-resolve: 5.18.3
-      jiti: 2.5.1
+      jiti: 2.6.0
       lightningcss: 1.30.1
       magic-string: 0.30.19
       source-map-js: 1.2.1
@@ -24677,6 +24680,8 @@ snapshots:
       turbo-windows-64: 2.5.6
       turbo-windows-arm64: 2.5.6
 
+  tw-animate-css@1.3.8: {}
+
   type-detect@4.0.8: {}
 
   type-fest@0.21.3: {}