diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx
index f297380..0fd1f35 100644
--- a/app/(docs)/docs/[[...slug]]/page.tsx
+++ b/app/(docs)/docs/[[...slug]]/page.tsx
@@ -48,7 +48,7 @@ export default function page({ params }: IProps) {
     <div className="space-y-12 py-8">
       <div className="border-b border-black pb-6">
         <Text as="h1">{doc.title}</Text>
-        <p className="text-lg text-muted mt-2">{doc.description}</p>
+        <p className="text-lg text-muted-foreground mt-2">{doc.description}</p>
         {doc.links && (
           <div className="flex space-x-4 text-sm mt-4">
             {doc.links?.api_reference && (
diff --git a/app/(marketing)/blogs/[slug]/page.tsx b/app/(marketing)/blogs/[slug]/page.tsx
index 1c8e5e2..204a7e7 100644
--- a/app/(marketing)/blogs/[slug]/page.tsx
+++ b/app/(marketing)/blogs/[slug]/page.tsx
@@ -57,13 +57,15 @@ export default function page({ params }: IProps) {
   return (
     <div className="max-w-3xl mx-auto">
       <div className="border-b border-black pb-6 mb-6">
-        <Text className="text-muted text-sm">
+        <Text className="text-muted-foreground text-sm">
           {format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
         </Text>
         <Text as="h2" className="mb-2">
           {blog.title}
         </Text>
-        <p className="text-lg text-muted  mb-8">{blog.description}</p>
+        <p className="text-lg text-muted-foreground  mb-8">
+          {blog.description}
+        </p>
         <Image
           src={blog.coverImage}
           alt={blog.title}
@@ -82,7 +84,7 @@ export default function page({ params }: IProps) {
               <Link
                 href={`https://x.com/@${blog.author.x}`}
                 target="_blank"
-                className="text-muted"
+                className="text-muted-foreground"
               >
                 @{blog.author.x}
               </Link>
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index 7daf833..1485dc2 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -60,15 +60,9 @@ export default async function Home() {
       <div className="bg-[url('/images/banner_void_2.svg')] bg-cover bg-no-repeat bg-center flex flex-col items-center h-[1900px] lg:h-[1400px]">
         <section className="container max-w-6xl mx-auto px-4 lg:px-0 text-gray-900 flex justify-center items-center lg:gap-28 xl:gap-32 my-28">
           <div className="text-center lg:text-left w-full lg:w-2/3">
-            <Link
-              id="checkout-figma-kit"
-              data-umami-event="checkout-figma-kit"
-              href="https://dub.sh/retroui-figma"
-              target="_blank"
-              className="mb-6 inline-block"
-            >
+            <Link href="/docs" className="mb-6 inline-block">
               <Badge>
-                Checkout Retro UI Figma Kit{" "}
+                We upgraded to TailwindCSS v4{" "}
                 <ArrowRightIcon className="ml-2 h-4 w-4 inline-block" />
               </Badge>
             </Link>
@@ -80,7 +74,7 @@ export default async function Home() {
               stand out!
             </Text>
 
-            <p className="text-lg text-muted mb-8 mt-4">
+            <p className="text-lg text-muted-foreground mb-8 mt-4">
               Retro styled component library based on React and TailwindCSS.
               Comes with 40+ free UI components that you can just copy paste
               into your projects.
@@ -187,14 +181,14 @@ export default async function Home() {
             Easily <span className="text-outlined">Customize</span> to Your Own
             Needs! 🛠️
           </Text>
-          <div className="flex flex-col space-y-1 mt-6 mb-8 text-muted">
-            <Text className="text-xl">
+          <div className="flex flex-col space-y-1 mt-6 mb-8 text-muted-foreground">
+            <Text className="text-lg">
               Copy-Paste Ready: Components that you can just copy paste.
             </Text>
-            <Text className="text-xl">
+            <Text className="text-lg">
               Tailwind Based: Customizable with Tailwind CSS.
             </Text>
-            <Text className="text-xl">
+            <Text className="text-lg">
               Type Safe: Typescript support for all components.
             </Text>
           </div>
@@ -292,20 +286,20 @@ export default async function Home() {
         </div>
       </section>
 
-      <section className="container max-w-6xl mx-auto px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 items-center my-36">
+      <section className="container max-w-6xl mx-auto px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center my-36">
         <div className="w-full">
           <Text as="h2">
             The <span className="text-outlined">Figma</span> UI Kit You Were
             Looking For!
           </Text>
-          <div className="flex flex-col space-y-1 mt-6 mb-8 text-muted">
-            <Text className="text-xl">
+          <div className="flex flex-col space-y-1 mt-6 mb-8 text-muted-foreground">
+            <Text className="text-lg">
               - Based on the design foundation of RetroUI.
             </Text>
-            <Text className="text-xl">
+            <Text className="text-lg">
               - Comes with 60+ UI elements like cards, modals, stats, etc .
             </Text>
-            <Text className="text-xl">
+            <Text className="text-lg">
               - Get Lifetime update of new versions.
             </Text>
           </div>
@@ -329,11 +323,11 @@ export default async function Home() {
         </div>
       </section>
 
-      <section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black py-16 px-4 lg:p-16 my-36">
+      <section className="container max-w-6xl mx-auto border-2 bg-primary border-black py-16 px-4 lg:p-16 my-36">
         <Text as="h2" className="text-center mb-2">
           Community Contributors
         </Text>
-        <Text className="text-xl text-center text-muted mb-8">
+        <Text className="text-xl text-center text-muted-foreground mb-8">
           RetroUI core is free and open-source, and it is made possible by our
           awesome contributors.
         </Text>
@@ -378,23 +372,23 @@ export default async function Home() {
       <footer className="bg-black py-8">
         <div className="container max-w-6xl mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 justify-between items-center">
           <div className="flex justify-center space-x-4">
-            <a href="https://twitter.com/ariflogs" className="text-primary-500">
+            <a href="https://twitter.com/ariflogs" className="text-primary">
               Twitter
             </a>
             <a
               href="https://github.com/Logging-Stuff/retroui"
-              className="text-primary-500"
+              className="text-primary"
             >
               GitHub
             </a>
-            <a href="/docs" className="text-primary-500">
+            <a href="/docs" className="text-primary">
               Documentation
             </a>
           </div>
 
           <p className="text-gray-300 text-sm">
             Built by{" "}
-            <a href="https://twitter.com/ariflogs" className="text-primary-500">
+            <a href="https://twitter.com/ariflogs" className="text-primary">
               Arif Hossain
             </a>
             .
diff --git a/app/global.css b/app/global.css
index 3d82d32..82d11e9 100644
--- a/app/global.css
+++ b/app/global.css
@@ -1,29 +1,78 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --font-head: var(--font-head);
+  --font-sans: var(--font-sans);
+
+  --shadow-xs: 1px 1px 0 0 var(--border);
+  --shadow-sm: 2px 2px 0 0 var(--border);
+  --shadow-md: 3px 3px 0 0 var(--border);
+  --shadow-lg: 4px 4px 0 1px var(--border);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+}
 
 :root {
-  --muted: #606067;
   --background: #fff;
   --foreground: #000;
-  --primary-50: #fffef0;
-  --primary-100: #fffac2;
-  --primary-200: #fff299;
-  --primary-300: #ffe766;
-  --primary-400: #ffdb33;
-  --primary-500: #ffcc00;
-  --primary-600: #ffb700;
-  --primary-700: #ff9f00;
-  --primary-800: #e68a00;
-  --primary-900: #b36b00;
+  --card: #fff;
+  --card-foreground: #000;
+  --primary: #ffdb33;
+  --primary-hover: #ffcc00;
+  --primary-foreground: #000;
+  --muted: #aeaeae;
+  --muted-foreground: #5a5a5a;
+  --accent: #fae583;
+  --accent-foreground: #000;
+  --destructive: #e63946;
+  --destructive-foreground: #fff;
+  --border: #000;
+}
+
+.dark {
+  --background: #121212;
+  --foreground: #fff;
+  --card: #1e1e1e;
+  --card-foreground: #fff;
+  --popover: #1e1e1e;
+  --popover-foreground: #fff;
+  --primary: #ffdb33;
+  --primary-foreground: #000;
+  --secondary: #292929;
+  --secondary-foreground: #e5e5e5;
+  --muted: #3b3b3b;
+  --muted-foreground: #9a9b9c;
+  --accent: #ffdb33;
+  --accent-foreground: #000;
+  --destructive: #ff6b6b;
+  --destructive-foreground: #fff;
+  --border: #333;
+  --input: #444;
+  --ring: #ffdb33;
+  --radius: 0.5rem;
+  --chart-1: #ff4500;
+  --chart-2: #ff8c00;
+  --chart-3: #00b894;
+  --chart-4: #355070;
+  --chart-5: #e9c46a;
 }
 
 .text-outlined {
-  /* @apply relative text-primary-400 font-bold; */
   letter-spacing: 2px;
-  text-shadow: 0px 0px 0 theme("colors.primary.400"),
-    0px 0px 0 theme("colors.primary.400"), 4px 4px 0 theme("colors.primary.400"),
-    4px 4px 0 theme("colors.primary.400");
+  text-shadow: 0px 0px 0 var(--color-primary), 0px 0px 0 var(--color-primary),
+    4px 4px 0 var(--color-primary), 4px 4px 0 var(--color-primary);
 }
 
 /* Syntax Highlighting stuff */
diff --git a/app/layout.tsx b/app/layout.tsx
index c60e33c..0396d04 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,6 @@
 import TopNav from "@/components/TopNav";
 import "./global.css";
-import { Archivo_Black, Share_Tech, Share_Tech_Mono } from "next/font/google";
+import { Archivo_Black, Space_Grotesk, Space_Mono } from "next/font/google";
 import { Metadata } from "next";
 
 const archivoBlack = Archivo_Black({
@@ -10,14 +10,14 @@ const archivoBlack = Archivo_Black({
   display: "swap",
 });
 
-const shareTech = Share_Tech({
+const space = Space_Grotesk({
   subsets: ["latin"],
   weight: "400",
   variable: "--font-sans",
   display: "swap",
 });
 
-const shareTechMono = Share_Tech_Mono({
+const spaceMono = Space_Mono({
   subsets: ["latin"],
   weight: "400",
   variable: "--font-mono",
@@ -49,7 +49,7 @@ export default function RootLayout({
         />
       </head>
       <body
-        className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
+        className={`${space.className} ${archivoBlack.variable} ${space.variable} ${spaceMono.variable}`}
       >
         <div className="relative z-40 pb-16">
           <TopNav />
diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx
index 0b88b47..e1a7a60 100644
--- a/components/CodeBlock.tsx
+++ b/components/CodeBlock.tsx
@@ -32,7 +32,7 @@ export function CodeBlock({ className, children, ...props }: ICodeBlock) {
     <div className="relative">
       <pre
         className={cn(
-          "overflow-x-auto rounded bg-[#282A36] mt-3 mb-6 p-4",
+          "overflow-x-auto rounded-sm bg-[#282A36] mt-3 mb-6 p-4",
           className
         )}
         {...props}
diff --git a/components/ComponentInstall.tsx b/components/ComponentInstall.tsx
index 9b91c3b..6f8bb1f 100644
--- a/components/ComponentInstall.tsx
+++ b/components/ComponentInstall.tsx
@@ -16,11 +16,11 @@ function ComponentInstallManual({ children }: { children: React.ReactNode }) {
 function ComponentInstall({ children }: IComponentShowcase) {
   return (
     <TabGroup>
-      <TabList className="border-b bg-transparent flex space-x-4 mb-6">
-        <Tab className="text-lg min-w-12 relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
+      <TabList className="border-b bg-transparent flex space-x-4 mb-6 text-sm">
+        <Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
           CLI
         </Tab>
-        <Tab className="text-lg min-w-12 relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
+        <Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
           Manual
         </Tab>
       </TabList>
diff --git a/components/ComponentShowcase.tsx b/components/ComponentShowcase.tsx
index 5d5969b..d693f88 100644
--- a/components/ComponentShowcase.tsx
+++ b/components/ComponentShowcase.tsx
@@ -12,22 +12,22 @@ export function ComponentShowcase({ name, children }: IComponentShowcase) {
 
   return (
     <TabGroup>
-      <TabList className="space-x-4 border-b mb-6">
-        <Tab className="min-w-12 text-lg relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
+      <TabList className="space-x-4 border-b mb-6 text-sm">
+        <Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
           Preview
         </Tab>
-        <Tab className="min-w-12 text-lg relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
+        <Tab className="min-w-12 cursor-pointer relative px-2 py-1 bg-transparent data-selected:border data-selected:border-b-0 data-selected:bg-black data-selected:text-white focus:outline-hidden">
           Code
         </Tab>
       </TabList>
       <TabPanels>
         <TabPanel>
-          <div className="border rounded p-6 mt-4">
+          <div className="border rounded-sm p-6 mt-4">
             <Preview />
           </div>
         </TabPanel>
         <TabPanel>
-          <div className="relative rounded overflow-auto">{Code}</div>
+          <div className="relative rounded-sm overflow-auto">{Code}</div>
         </TabPanel>
       </TabPanels>
     </TabGroup>
diff --git a/components/JoinNewsletter.tsx b/components/JoinNewsletter.tsx
index 9c9e43c..0eddcd3 100644
--- a/components/JoinNewsletter.tsx
+++ b/components/JoinNewsletter.tsx
@@ -151,7 +151,7 @@ export function JoinNewsletter() {
         <div className="w-full max-w-6xl mx-auto py-16 px-4 border-2 border-black">
           <div className="flex flex-col justify-center items-center text-center">
             <Text as="h2">Join Our Newsletter</Text>
-            <p className="text-lg text-muted mb-8">
+            <p className="text-lg text-muted-foreground mb-8">
               Get notified about latest updates and new launches.
             </p>
 
diff --git a/components/MDX.tsx b/components/MDX.tsx
index 27af5ff..1f96185 100644
--- a/components/MDX.tsx
+++ b/components/MDX.tsx
@@ -63,13 +63,13 @@ const components = (type: "doc" | "blog") => ({
         href={href}
         target={target || "_blank"}
         rel={rel || "noopener noreferrer"}
-        className="underline underline-offset-4 hover:decoration-primary-500"
+        className="underline underline-offset-4 hover:decoration-primary"
         {...rest}
       />
     ) : (
       <Link
         href={href}
-        className="underline underline-offset-4 hover:decoration-primary-500"
+        className="underline underline-offset-4 hover:decoration-primary"
         {...rest}
       />
     );
@@ -82,7 +82,7 @@ const components = (type: "doc" | "blog") => ({
   }: React.HTMLAttributes<HTMLElement>) => (
     <code
       className={cn(
-        "relative rounded bg-[#282A36] p-1 text-primary-500 text-sm",
+        "relative rounded-sm bg-[#282A36] p-1 text-primary text-sm",
         className
       )}
       {...props}
diff --git a/components/TopNav.tsx b/components/TopNav.tsx
index f98d9d8..dae2af5 100644
--- a/components/TopNav.tsx
+++ b/components/TopNav.tsx
@@ -12,7 +12,7 @@ export default function TopNav() {
       <div className="container max-w-6xl px-4 lg:px-0 mx-auto">
         <div className="flex justify-between items-center h-16">
           {/* Logo Section */}
-          <div className="flex-shrink-0">
+          <div className="shrink-0">
             <a
               href="/"
               className="text-black font-head text-2xl flex items-end"
@@ -34,7 +34,7 @@ export default function TopNav() {
               <Link
                 key={item.title}
                 href={item.href}
-                className="hover:underline decoration-primary-500 underline-offset-2 transition-all"
+                className="hover:underline decoration-primary underline-offset-2 transition-all"
               >
                 {item.title}
               </Link>
diff --git a/components/ui/Accordion.tsx b/components/ui/Accordion.tsx
index b041418..dee8128 100644
--- a/components/ui/Accordion.tsx
+++ b/components/ui/Accordion.tsx
@@ -31,7 +31,7 @@ const AccordionHeader = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-none [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-hidden [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
diff --git a/components/ui/Alert.tsx b/components/ui/Alert.tsx
index 32d60f5..5f9299c 100644
--- a/components/ui/Alert.tsx
+++ b/components/ui/Alert.tsx
@@ -7,7 +7,7 @@ import { Text } from "@/components/ui/Text";
 const alertVariants = cva("relative w-full border-2 border-black p-4", {
   variants: {
     variant: {
-      default: "bg-primary-300 text-foreground",
+      default: "bg-background text-foreground",
       solid: "bg-black text-white",
     },
     status: {
@@ -44,7 +44,7 @@ AlertTitle.displayName = "AlertTitle";
 interface IAlertDescriptionProps
   extends HtmlHTMLAttributes<HTMLParagraphElement> {}
 const AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (
-  <div className={cn("text-muted", className)} {...props} />
+  <div className={cn("text-muted-foreground", className)} {...props} />
 );
 
 AlertDescription.displayName = "AlertDescription";
diff --git a/components/ui/Avatar.tsx b/components/ui/Avatar.tsx
index be292ab..dfec77d 100644
--- a/components/ui/Avatar.tsx
+++ b/components/ui/Avatar.tsx
@@ -37,7 +37,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted bg-primary-400",
+      "flex h-full w-full items-center justify-center rounded-full bg-muted bg-primary",
       className
     )}
     {...props}
diff --git a/components/ui/Badge.tsx b/components/ui/Badge.tsx
index c086ff7..e66be20 100644
--- a/components/ui/Badge.tsx
+++ b/components/ui/Badge.tsx
@@ -6,9 +6,9 @@ const badgeVariants = cva("font-semibold ", {
   variants: {
     variant: {
       default: "bg-gray-200 text-gray-700",
-      outline: "outline outline-2 outline-black text-black",
+      outline: "outline-2 outline-black text-black",
       solid: "bg-black text-white",
-      surface: "outline outline-2 bg-primary-300 text-black",
+      surface: "outline-2 bg-primary text-black",
     },
     size: {
       sm: "px-2 py-1 text-xs",
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 2ac1fe1..d5e4b33 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -2,11 +2,11 @@ import { cn } from "@/lib/utils";
 import { cva, VariantProps } from "class-variance-authority";
 import React, { ButtonHTMLAttributes } from "react";
 
-const buttonVariants = cva("font-head transition-all outline-none", {
+const buttonVariants = cva("font-head transition-all outline-hidden", {
   variants: {
     variant: {
       default:
-        "shadow-md hover:shadow-xs bg-primary-400 text-black border-2 border-black hover:bg-primary-500",
+        "shadow-md hover:shadow-xs bg-primary text-black border-2 border-black hover:bg-primary-hover",
       outline:
         "shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black",
       link: "bg-transparent text-black hover:underline",
diff --git a/components/ui/Card.tsx b/components/ui/Card.tsx
index c8d5594..b86cf1d 100644
--- a/components/ui/Card.tsx
+++ b/components/ui/Card.tsx
@@ -32,7 +32,7 @@ const CardTitle = ({ className, ...props }: ICardProps) => {
 };
 
 const CardDescription = ({ className, ...props }: ICardProps) => (
-  <p className={cn("text-muted", className)} {...props} />
+  <p className={cn("text-muted-foreground", className)} {...props} />
 );
 
 const CardContent = ({ className, ...props }: ICardProps) => {
diff --git a/components/ui/Checkbox.tsx b/components/ui/Checkbox.tsx
index e471d92..46324b1 100644
--- a/components/ui/Checkbox.tsx
+++ b/components/ui/Checkbox.tsx
@@ -6,7 +6,7 @@ import { Check } from "lucide-react";
 const checkboxVariants = cva("border-black border-2", {
   variants: {
     variant: {
-      default: " data-[state=checked]:bg-primary-500",
+      default: "data-[state=checked]:bg-primary",
       outline: "",
       solid: "data-[state=checked]:bg-black *:text-white",
     },
diff --git a/components/ui/Dialog.tsx b/components/ui/Dialog.tsx
index 0430966..5811b72 100644
--- a/components/ui/Dialog.tsx
+++ b/components/ui/Dialog.tsx
@@ -175,7 +175,7 @@ const dialogHeaderVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary-400 text-black",
+        default: "bg-primary text-black",
       },
       position: {
         fixed: "sticky top-0",
diff --git a/components/ui/IconButton.tsx b/components/ui/IconButton.tsx
index 7294cc2..6626946 100644
--- a/components/ui/IconButton.tsx
+++ b/components/ui/IconButton.tsx
@@ -21,9 +21,9 @@ export function IconButton({
 
   const variantClasses = {
     primary:
-      "bg-primary-400 text-black border-2 border-black hover:bg-primary-500",
+      "bg-primary text-black border-2 border-black hover:bg-primary-hover",
     outline: "bg-transparent text-black border-2 border-black",
-    link: "bg-transparent text-primary-400 hover:underline",
+    link: "bg-transparent text-primary hover:underline",
   };
 
   return (
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index 798f84a..f97c7b5 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -14,7 +14,7 @@ export const Input: React.FC<InputProps> = ({
     <input
       type={type}
       placeholder={placeholder}
-      className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs ${
+      className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-hidden focus:shadow-xs ${
         props["aria-invalid"]
           ? "border-red-500 text-red-500 shadow-xs shadow-red-600"
           : ""
diff --git a/components/ui/Menu.tsx b/components/ui/Menu.tsx
index 8ff236e..f2b5e1d 100644
--- a/components/ui/Menu.tsx
+++ b/components/ui/Menu.tsx
@@ -31,7 +31,7 @@ const MenuItem = React.forwardRef<
   <DropdownMenu.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary-400 focus:bg-primary-400 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-primary focus:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
diff --git a/components/ui/ProductCard.tsx b/components/ui/ProductCard.tsx
index f30e5db..ec112ff 100644
--- a/components/ui/ProductCard.tsx
+++ b/components/ui/ProductCard.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Button } from "./Button";
 
 export function ProductCard() {
   return (
@@ -11,9 +12,7 @@ export function ProductCard() {
         <h3 className="font-head text-3xl font-medium mb-1">Classic Gameboy</h3>
         <div className="flex justify-between items-center">
           <span className="text-lg font-semibold">$29.99</span>
-          <button className="px-6 py-2 text-sm font-head bg-primary-400 border-2 border-black shadow-md hover:shadow-xs transition-all">
-            Add To Cart
-          </button>
+          <Button>Add To Cart</Button>
         </div>
       </div>
     </div>
diff --git a/components/ui/Radio.tsx b/components/ui/Radio.tsx
index 59c643d..9923a35 100644
--- a/components/ui/Radio.tsx
+++ b/components/ui/Radio.tsx
@@ -24,7 +24,7 @@ const radioVariants = cva("border-black border-2", {
 const radioIndicatorVariants = cva("flex ", {
   variants: {
     variant: {
-      default: "bg-primary-500 border-2 border-black",
+      default: "bg-primary border-2 border-black",
       outline: "border-2 border-black",
       solid: "bg-black",
     },
diff --git a/components/ui/Select.tsx b/components/ui/Select.tsx
index 74433f1..5e2d6b5 100644
--- a/components/ui/Select.tsx
+++ b/components/ui/Select.tsx
@@ -15,7 +15,7 @@ const SelectTrigger = ({
   return (
     <SelectPrimitive.Trigger
       className={cn(
-        "flex h-10 min-w-40 items-center shadow-md justify-between border-2 border-input border-black bg-transparent px-4 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 min-w-40 items-center shadow-md justify-between border-2 border-input border-black bg-transparent px-4 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -72,7 +72,7 @@ const SelectItem = ({
 }: SelectPrimitive.SelectItemProps) => (
   <SelectPrimitive.Item
     className={cn(
-      "relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-none hover:bg-primary-400 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
diff --git a/components/ui/Switch.tsx b/components/ui/Switch.tsx
index 1689fdd..483099d 100644
--- a/components/ui/Switch.tsx
+++ b/components/ui/Switch.tsx
@@ -8,14 +8,14 @@ import { cn } from "@/lib/utils";
 const Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-400",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
       className
     )}
     {...props}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 bg-primary-500 border-2 mx-0.5 border-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background"
+        "pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background"
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/components/ui/Tab.tsx b/components/ui/Tab.tsx
index e494b96..f635f49 100644
--- a/components/ui/Tab.tsx
+++ b/components/ui/Tab.tsx
@@ -35,7 +35,7 @@ const TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {
   return (
     <Tab
       className={cn(
-        "px-4 py-1 border-2 border-transparent data-[selected]:border-black data-[selected]:bg-primary-400 data-[selected]:font-semibold focus:outline-none",
+        "px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden",
         className
       )}
       {...props}
diff --git a/components/ui/Text.tsx b/components/ui/Text.tsx
index 03a82c4..e76563f 100644
--- a/components/ui/Text.tsx
+++ b/components/ui/Text.tsx
@@ -7,7 +7,7 @@ const textVariants = cva("font-head", {
     as: {
       p: "font-sans text-base",
       li: "font-sans text-base",
-      a: "font-sans text-base hover:underline underline-offset-2 decoration-primary-500",
+      a: "font-sans text-base hover:underline underline-offset-2 decoration-primary",
       h1: "text-4xl lg:text-5xl font-bold",
       h2: "text-3xl lg:text-4xl font-semibold",
       h3: "text-2xl font-medium",
diff --git a/components/ui/Textarea.tsx b/components/ui/Textarea.tsx
index 10ab18e..a8009ad 100644
--- a/components/ui/Textarea.tsx
+++ b/components/ui/Textarea.tsx
@@ -10,7 +10,7 @@ export function Textarea({
     <textarea
         placeholder={placeholder}
         rows={4}
-        className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs ${className}`}
+        className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-hidden focus:shadow-xs ${className}`}
         {...props}
     />
   );
diff --git a/content/docs/install/nextjs.mdx b/content/docs/install/nextjs.mdx
index b8ed1b3..ed51d79 100644
--- a/content/docs/install/nextjs.mdx
+++ b/content/docs/install/nextjs.mdx
@@ -72,26 +72,11 @@ You are free to pick your own fonts and theme, but if you'd like to use RetroUI
 <br />
 
 #### 1. Add Fonts
-We are using `Archivo Black` for headings and `Share Tech` for everything else. You can install them from `Nextjs fonts` or manually from Google fonts.
-
-<br />
-
-<TabGroup>
-  <TabList className="border-b bg-transparent flex space-x-4 mb-6">
-    <Tab className="text-lg min-w-12 relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
-      Nextjs Fonts
-    </Tab>
-    <Tab className="text-lg min-w-12 relative px-2 py-1 border-b-2 border-b-transparent bg-transparent data-[selected]:border-primary-500 data-[selected]:text-foreground focus:outline-none">
-      Google Fonts
-    </Tab>
-  </TabList>
-
-  <TabPanels>
-    <TabPanel>
+We are using `Archivo Black` for headings and `Space Grotesk` for everything else. You can install them from Nextjs fonts or manually from Google fonts.
 
 ```tsx
 
-import { Archivo_Black, Share_Tech } from "next/font/google";
+import { Archivo_Black, Space_Grotesk } from "next/font/google";
 
 const archivoBlack = Archivo_Black({
   subsets: ["latin"],
@@ -100,7 +85,7 @@ const archivoBlack = Archivo_Black({
   display: "swap",
 });
 
-const shareTech = Share_Tech({
+const space = Space_Grotesk({
   subsets: ["latin"],
   weight: "400",
   variable: "--font-sans",
@@ -116,117 +101,61 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${archivoBlack.variable} ${shareTech.variable}`}
+        className={`${archivoBlack.variable} ${space.variable}`}
       >
         {children}
       </body>
     </html>
   );
 }
-
-```
-
-    </TabPanel>
-
-    <TabPanel>
-
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Share+Tech&display=swap"
-  rel="stylesheet"
-/>
-```
-
-Save the fonts in `global.css`:
-
-```css
-:root {
-  --font-head: "Archivo Black", sans-serif;
-  --font-sans: "Share Tech", sans-serif;
-}
 ```
 
-    </TabPanel>
-
-  </TabPanels>
-</TabGroup>
-
 <br />
 
 #### 2. Add Theme
 
 Save your theme as CSS variables in `global.css`:
 
-```css
+```scss
+@theme {
+  --font-head: var(--font-head);
+  --font-sans: var(--font-sans);
+
+  --shadow-xs: 1px 1px 0 0 var(--border);
+  --shadow-sm: 2px 2px 0 0 var(--border);
+  --shadow-md: 3px 3px 0 0 var(--border);
+  --shadow-lg: 4px 4px 0 1px var(--border);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+}
+
 :root {
-  --muted: #606067;
   --background: #fff;
   --foreground: #000;
-  --primary-50: #fffef0;
-  --primary-100: #fffac2;
-  --primary-200: #fff299;
-  --primary-300: #ffe766;
-  --primary-400: #ffdb33;
-  --primary-500: #ffcc00;
-  --primary-600: #ffb700;
-  --primary-700: #ff9f00;
-  --primary-800: #e68a00;
-  --primary-900: #b36b00;
+  --card: #fff;
+  --card-foreground: #000;
+  --primary: #ffdb33;
+  --primary-hover: #ffcc00;
+  --primary-foreground: #000;
+  --muted: #aeaeae;
+  --muted-foreground: #5a5a5a;
+  --accent: #fae583;
+  --accent-foreground: #000;
+  --destructive: #e63946;
+  --destructive-foreground: #fff;
+  --border: #000;
 }
 ```
-<br />
-
-#### 3. Tailwind Config
-
-Connect your theme to Tailwind in `tailwind.config.ts`:
-
-```ts
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./preview/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      textColor: {
-        muted: "var(--muted)",
-      },
-      fontFamily: {
-        head: ["var(--font-head)"],
-        sans: ["var(--font-sans)"],
-      },
-      boxShadow: {
-        xs: "1px 1px 0 0 #000",
-        sm: "2px 2px 0 0 #000",
-        md: "3px 3px 0 0 #000",
-      },
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-        primary: {
-          50: "var(--primary-50)",
-          100: "var(--primary-100)",
-          200: "var(--primary-200)",
-          300: "var(--primary-300)",
-          400: "var(--primary-400)",
-          500: "var(--primary-500)",
-          600: "var(--primary-600)",
-          700: "var(--primary-700)",
-          800: "var(--primary-800)",
-          900: "var(--primary-900)",
-        },
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-};
-
-export default config;
-```
-
+<br />
\ No newline at end of file
diff --git a/package.json b/package.json
index 575bfa3..5359265 100644
--- a/package.json
+++ b/package.json
@@ -38,13 +38,14 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.14",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.7",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.0.14",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 17a8e80..b74398d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,6 +87,9 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0
     devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.0.14
+        version: 4.0.14
       '@types/node':
         specifier: ^20
         version: 20.17.1
@@ -106,11 +109,11 @@ importers:
         specifier: ^8
         version: 8.4.47
       tailwindcss:
-        specifier: ^3.4.1
-        version: 3.4.14
+        specifier: ^4.0.14
+        version: 4.0.14
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.14)
+        version: 1.0.7(tailwindcss@4.0.14)
       typescript:
         specifier: ^5
         version: 5.6.3
@@ -1444,6 +1447,82 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
+  '@tailwindcss/node@4.0.14':
+    resolution: {integrity: sha512-Ux9NbFkKWYE4rfUFz6M5JFLs/GEYP6ysxT8uSyPn6aTbh2K3xDE1zz++eVK4Vwx799fzMF8CID9sdHn4j/Ab8w==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.14':
+    resolution: {integrity: sha512-VBFKC2rFyfJ5J8lRwjy6ub3rgpY186kAcYgiUr8ArR8BAZzMruyeKJ6mlsD22Zp5ZLcPW/FXMasJiJBx0WsdQg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.14':
+    resolution: {integrity: sha512-U3XOwLrefGr2YQZ9DXasDSNWGPZBCh8F62+AExBEDMLDfvLLgI/HDzY8Oq8p/JtqkAY38sWPOaNnRwEGKU5Zmg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.14':
+    resolution: {integrity: sha512-V5AjFuc3ndWGnOi1d379UsODb0TzAS2DYIP/lwEbfvafUaD2aNZIcbwJtYu2DQqO2+s/XBvDVA+w4yUyaewRwg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.14':
+    resolution: {integrity: sha512-tXvtxbaZfcPfqBwW3f53lTcyH6EDT+1eT7yabwcfcxTs+8yTPqxsDUhrqe9MrnEzpNkd+R/QAjJapfd4tjWdLg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.14':
+    resolution: {integrity: sha512-cSeLNWWqIWeSTmBntQvyY2/2gcLX8rkPFfDDTQVF8qbRcRMVPLxBvFVJyfSAYRNch6ZyVH2GI6dtgALOBDpdNA==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.14':
+    resolution: {integrity: sha512-bwDWLBalXFMDItcSXzFk6y7QKvj6oFlaY9vM+agTlwFL1n1OhDHYLZkSjaYsh6KCeG0VB0r7H8PUJVOM1LRZyg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.14':
+    resolution: {integrity: sha512-gVkJdnR/L6iIcGYXx64HGJRmlme2FGr/aZH0W6u4A3RgPMAb+6ELRLi+UBiH83RXBm9vwCfkIC/q8T51h8vUJQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.14':
+    resolution: {integrity: sha512-EE+EQ+c6tTpzsg+LGO1uuusjXxYx0Q00JE5ubcIGfsogSKth8n8i2BcS2wYTQe4jXGs+BQs35l78BIPzgwLddw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.14':
+    resolution: {integrity: sha512-KCCOzo+L6XPT0oUp2Jwh233ETRQ/F6cwUnMnR0FvMUCbkDAzHbcyOgpfuAtRa5HD0WbTbH4pVD+S0pn1EhNfbw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.14':
+    resolution: {integrity: sha512-AHObFiFL9lNYcm3tZSPqa/cHGpM5wOrNmM2uOMoKppp+0Hom5uuyRh0QkOp7jftsHZdrZUpmoz0Mp6vhh2XtUg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.14':
+    resolution: {integrity: sha512-rNXXMDJfCJLw/ZaFTOLOHoGULxyXfh2iXTGiChFiYTSgKBKQHIGEpV0yn5N25WGzJJ+VBnRjHzlmDqRV+d//oQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.14':
+    resolution: {integrity: sha512-M8VCNyO/NBi5vJ2cRcI9u8w7Si+i76a7o1vveoGtbbjpEYJZYiyc7f2VGps/DqawO56l3tImIbq2OT/533jcrA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.0.14':
+    resolution: {integrity: sha512-+uIR6KtKhla1XeIanF27KtrfYy+PX+R679v5LxbkmEZlhQe3g8rk+wKj7Xgt++rWGRuFLGMXY80Ek8JNn+kN/g==}
+
   '@tanstack/react-virtual@3.10.8':
     resolution: {integrity: sha512-VbzbVGSsZlQktyLrP5nxE+vE1ZR+U0NFAWPbJLoG2+DKPwd2D7dVICTVIIaYlJqX1ZCEnYDbaOpmMwbsyhBoIA==}
     peerDependencies:
@@ -1596,16 +1675,10 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -1734,10 +1807,6 @@ packages:
   camel-case@4.1.2:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   caniuse-lite@1.0.30001671:
     resolution: {integrity: sha512-jocyVaSSfXg2faluE6hrWkMgDOiULBMca4QLtDT39hw1YxaIPHWc1CcTCKkPmHgGH6tKji6ZNbMSmUAvENf2/A==}
 
@@ -1827,10 +1896,6 @@ packages:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   comment-json@4.2.5:
     resolution: {integrity: sha512-bKw/r35jR3HGt5PEPm1ljsQQGyCrR8sFGNiN5L+ykDHdpO8Smxkrkla9Yi6NkQyUrb8V54PGhfMs6NrIwtxtdw==}
     engines: {node: '>= 6'}
@@ -1866,11 +1931,6 @@ packages:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -1938,15 +1998,16 @@ packages:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
+  detect-libc@2.0.3:
+    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
+    engines: {node: '>=8'}
+
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff@5.2.0:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
@@ -1955,9 +2016,6 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -1982,6 +2040,10 @@ packages:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
 
+  enhanced-resolve@5.18.1:
+    resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
+    engines: {node: '>=10.13.0'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -2311,10 +2373,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  glob@10.4.5:
-    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    hasBin: true
-
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
@@ -2673,11 +2731,8 @@ packages:
     resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
     engines: {node: '>=14'}
 
-  jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
-
-  jiti@1.21.6:
-    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
   js-tokens@4.0.0:
@@ -2753,13 +2808,69 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
-  lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
+  lightningcss-darwin-arm64@1.29.2:
+    resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
 
-  lilconfig@3.1.2:
-    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
-    engines: {node: '>=14'}
+  lightningcss-darwin-x64@1.29.2:
+    resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.2:
+    resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.2:
+    resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.2:
+    resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.2:
+    resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.2:
+    resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.2:
+    resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.2:
+    resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.2:
+    resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
+    engines: {node: '>= 12.0.0'}
 
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
@@ -3021,9 +3132,6 @@ packages:
     resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
   nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -3084,10 +3192,6 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.2:
     resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
     engines: {node: '>= 0.4'}
@@ -3153,9 +3257,6 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
-
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -3222,55 +3323,10 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-
   possible-typed-array-names@1.0.0:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-
   postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -3382,9 +3438,6 @@ packages:
     resolution: {integrity: sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==}
     engines: {node: '>=0.10.0'}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
@@ -3672,11 +3725,6 @@ packages:
       babel-plugin-macros:
         optional: true
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -3696,10 +3744,8 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.4.14:
-    resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.0.14:
+    resolution: {integrity: sha512-92YT2dpt671tFiHH/e1ok9D987N9fHD5VWoly1CdPD/Cd1HMglvZwP3nx2yTj2lbXDAHt8QssZkxTLCCTNL+xw==}
 
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -3708,13 +3754,6 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -3741,9 +3780,6 @@ packages:
     peerDependencies:
       typescript: '>=4.2.0'
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   ts-morph@18.0.0:
     resolution: {integrity: sha512-Kg5u0mk19PIIe4islUI/HWRvm9bC1lHejK4S0oh1zaZ77TMZAEmQC0sHQYiu2RgCQFZKXz1fMVi/7nOOeirznA==}
 
@@ -5424,6 +5460,68 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.8.0
 
+  '@tailwindcss/node@4.0.14':
+    dependencies:
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      tailwindcss: 4.0.14
+
+  '@tailwindcss/oxide-android-arm64@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.14':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.14':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.14
+      '@tailwindcss/oxide-darwin-arm64': 4.0.14
+      '@tailwindcss/oxide-darwin-x64': 4.0.14
+      '@tailwindcss/oxide-freebsd-x64': 4.0.14
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.14
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.14
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.14
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.14
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.14
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.14
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.14
+
+  '@tailwindcss/postcss@4.0.14':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.0.14
+      '@tailwindcss/oxide': 4.0.14
+      lightningcss: 1.29.2
+      postcss: 8.4.47
+      tailwindcss: 4.0.14
+
   '@tanstack/react-virtual@3.10.8(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@tanstack/virtual-core': 3.10.8
@@ -5578,15 +5676,11 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
-  any-promise@1.3.0: {}
-
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  arg@5.0.2: {}
-
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -5744,8 +5838,6 @@ snapshots:
       pascal-case: 3.1.2
       tslib: 2.8.0
 
-  camelcase-css@2.0.1: {}
-
   caniuse-lite@1.0.30001671: {}
 
   caniuse-lite@1.0.30001702: {}
@@ -5821,8 +5913,6 @@ snapshots:
 
   commander@10.0.1: {}
 
-  commander@4.1.1: {}
-
   comment-json@4.2.5:
     dependencies:
       array-timsort: 1.0.3
@@ -5868,8 +5958,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  cssesc@3.0.0: {}
-
   csstype@3.1.3: {}
 
   damerau-levenshtein@1.0.8: {}
@@ -5930,22 +6018,20 @@ snapshots:
 
   dequal@2.0.3: {}
 
+  detect-libc@2.0.3: {}
+
   detect-node-es@1.1.0: {}
 
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
 
-  didyoumean@1.2.2: {}
-
   diff@5.2.0: {}
 
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
 
-  dlv@1.1.3: {}
-
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -5967,6 +6053,11 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.2.1
 
+  enhanced-resolve@5.18.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+
   entities@4.5.0: {}
 
   error-ex@1.3.2:
@@ -6102,7 +6193,7 @@ snapshots:
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.1(eslint@8.57.1)
       eslint-plugin-react: 7.37.2(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -6133,7 +6224,7 @@ snapshots:
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
@@ -6151,7 +6242,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -6480,15 +6571,6 @@ snapshots:
       minipass: 7.1.2
       path-scurry: 1.11.1
 
-  glob@10.4.5:
-    dependencies:
-      foreground-child: 3.3.0
-      jackspeak: 3.4.3
-      minimatch: 9.0.5
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.1
-      path-scurry: 1.11.1
-
   glob@7.2.3:
     dependencies:
       fs.realpath: 1.0.0
@@ -6904,13 +6986,7 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jackspeak@3.4.3:
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
-
-  jiti@1.21.6: {}
+  jiti@2.4.2: {}
 
   js-tokens@4.0.0: {}
 
@@ -6975,9 +7051,50 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  lilconfig@2.1.0: {}
+  lightningcss-darwin-arm64@1.29.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.2:
+    optional: true
 
-  lilconfig@3.1.2: {}
+  lightningcss-linux-x64-musl@1.29.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.2:
+    optional: true
+
+  lightningcss@1.29.2:
+    dependencies:
+      detect-libc: 2.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.2
+      lightningcss-darwin-x64: 1.29.2
+      lightningcss-freebsd-x64: 1.29.2
+      lightningcss-linux-arm-gnueabihf: 1.29.2
+      lightningcss-linux-arm64-gnu: 1.29.2
+      lightningcss-linux-arm64-musl: 1.29.2
+      lightningcss-linux-x64-gnu: 1.29.2
+      lightningcss-linux-x64-musl: 1.29.2
+      lightningcss-win32-arm64-msvc: 1.29.2
+      lightningcss-win32-x64-msvc: 1.29.2
 
   lines-and-columns@1.2.4: {}
 
@@ -7452,12 +7569,6 @@ snapshots:
 
   mute-stream@2.0.0: {}
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
   nanoid@3.3.7: {}
 
   natural-compare@1.4.0: {}
@@ -7525,8 +7636,6 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.2: {}
 
   object-keys@1.1.1: {}
@@ -7612,8 +7721,6 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  package-json-from-dist@1.0.1: {}
-
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -7680,43 +7787,8 @@ snapshots:
 
   picomatch@2.3.1: {}
 
-  pify@2.3.0: {}
-
-  pirates@4.0.6: {}
-
   possible-typed-array-names@1.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.4.47):
-    dependencies:
-      postcss: 8.4.47
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
-
-  postcss-js@4.0.1(postcss@8.4.47):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.47
-
-  postcss-load-config@4.0.2(postcss@8.4.47):
-    dependencies:
-      lilconfig: 3.1.2
-      yaml: 2.6.0
-    optionalDependencies:
-      postcss: 8.4.47
-
-  postcss-nested@6.2.0(postcss@8.4.47):
-    dependencies:
-      postcss: 8.4.47
-      postcss-selector-parser: 6.1.2
-
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
-  postcss-value-parser@4.2.0: {}
-
   postcss@8.4.31:
     dependencies:
       nanoid: 3.3.7
@@ -7836,10 +7908,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
@@ -8214,16 +8282,6 @@ snapshots:
     optionalDependencies:
       '@babel/core': 7.26.9
 
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
-      commander: 4.1.1
-      glob: 10.4.5
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -8234,49 +8292,16 @@ snapshots:
 
   tailwind-merge@2.5.4: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.14):
+  tailwindcss-animate@1.0.7(tailwindcss@4.0.14):
     dependencies:
-      tailwindcss: 3.4.14
+      tailwindcss: 4.0.14
 
-  tailwindcss@3.4.14:
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.4.47
-      postcss-import: 15.1.0(postcss@8.4.47)
-      postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)
-      postcss-nested: 6.2.0(postcss@8.4.47)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.0.14: {}
 
   tapable@2.2.1: {}
 
   text-table@0.2.0: {}
 
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
   tiny-invariant@1.3.3: {}
 
   to-regex-range@5.0.1:
@@ -8300,8 +8325,6 @@ snapshots:
     dependencies:
       typescript: 5.6.3
 
-  ts-interface-checker@0.1.13: {}
-
   ts-morph@18.0.0:
     dependencies:
       '@ts-morph/common': 0.19.0
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 1a69fd2..5d6d845 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 
diff --git a/preview/components/badge-style-rounded.tsx b/preview/components/badge-style-rounded.tsx
index bdfb677..4eab449 100644
--- a/preview/components/badge-style-rounded.tsx
+++ b/preview/components/badge-style-rounded.tsx
@@ -3,7 +3,7 @@ import { Badge } from "@/components/ui";
 export default function BadgeStyleRounded() {
   return (
     <div className="space-x-4">
-      <Badge variant="solid" className="rounded">
+      <Badge variant="solid" className="rounded-sm">
         Rounded
       </Badge>
       <Badge variant="solid" className="rounded-full">
diff --git a/preview/components/input-style-default.tsx b/preview/components/input-style-default.tsx
index 143b228..a71368b 100644
--- a/preview/components/input-style-default.tsx
+++ b/preview/components/input-style-default.tsx
@@ -3,7 +3,7 @@ export default function InputStyleDefault() {
     <input
       type="text"
       placeholder="type something..."
-      className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
+      className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-hidden focus:shadow-xs"
     />
   );
 }
diff --git a/preview/components/tab-style-default.tsx b/preview/components/tab-style-default.tsx
index 706aa3b..e4d230c 100644
--- a/preview/components/tab-style-default.tsx
+++ b/preview/components/tab-style-default.tsx
@@ -4,13 +4,13 @@ export default function TabStyleDefault() {
   return (
     <TabGroup>
       <TabList>
-        <Tab className="px-4 py-1 border-2 border-transparent data-[selected]:border-black data-[selected]:bg-primary-400 data-[selected]:font-semibold focus:outline-none">
+        <Tab className="px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden">
           Home
         </Tab>
-        <Tab className="px-4 py-1 border-2 border-transparent data-[selected]:border-black data-[selected]:bg-primary-400 data-[selected]:font-semibold focus:outline-none">
+        <Tab className="px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden">
           About
         </Tab>
-        <Tab className="px-4 py-1 border-2 border-transparent data-[selected]:border-black data-[selected]:bg-primary-400 data-[selected]:font-semibold focus:outline-none">
+        <Tab className="px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden">
           Contact
         </Tab>
       </TabList>
diff --git a/preview/components/textarea-style-default.tsx b/preview/components/textarea-style-default.tsx
index 1cc2c2f..d3fca04 100644
--- a/preview/components/textarea-style-default.tsx
+++ b/preview/components/textarea-style-default.tsx
@@ -3,7 +3,7 @@ export default function TextareaStyleDefault() {
     <textarea
       rows={4}
       placeholder="type something..."
-      className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
+      className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-hidden focus:shadow-xs"
     />
   );
 }
diff --git a/public/r/accordion.json b/public/r/accordion.json
index a4c1e43..3df048c 100644
--- a/public/r/accordion.json
+++ b/public/r/accordion.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "components/ui/Accordion.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"border-2 border-black shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden\",\n      className\n    )}\n    {...props}\n  />\n));\nAccordionItem.displayName = AccordionPrimitive.Item.displayName;\n\nconst AccordionHeader = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-none [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n));\nAccordionHeader.displayName = AccordionPrimitive.Header.displayName;\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden px-4 py-2 font-body bg-white text-gray-700 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nconst AccordionComponent = Object.assign(Accordion, {\n  Item: AccordionItem,\n  Header: AccordionHeader,\n  Content: AccordionContent,\n});\n\nexport { AccordionComponent as Accordion };\n",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"border-2 border-black shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden\",\n      className\n    )}\n    {...props}\n  />\n));\nAccordionItem.displayName = AccordionPrimitive.Item.displayName;\n\nconst AccordionHeader = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-hidden [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n));\nAccordionHeader.displayName = AccordionPrimitive.Header.displayName;\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden px-4 py-2 font-body bg-white text-gray-700 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nconst AccordionComponent = Object.assign(Accordion, {\n  Item: AccordionItem,\n  Header: AccordionHeader,\n  Content: AccordionContent,\n});\n\nexport { AccordionComponent as Accordion };\n",
       "type": "registry:component",
       "target": "components/retroui/Accordion.tsx"
     }
diff --git a/public/r/alert.json b/public/r/alert.json
index 0db8dd7..3c99c95 100644
--- a/public/r/alert.json
+++ b/public/r/alert.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/Alert.tsx",
-      "content": "import { HtmlHTMLAttributes } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Text } from \"@/components/ui/Text\";\n\nconst alertVariants = cva(\"relative w-full border-2 border-black p-4\", {\n  variants: {\n    variant: {\n      default: \"bg-primary-300 text-foreground\",\n      solid: \"bg-black text-white\",\n    },\n    status: {\n      error: \"bg-red-300 text-red-800 border-red-800\",\n      success: \"bg-green-300 text-green-800 border-green-800\",\n      warning: \"bg-yellow-300 text-yellow-800 border-yellow-800\",\n      info: \"bg-blue-300 text-blue-800 border-blue-800\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface IAlertProps\n  extends HtmlHTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\nconst Alert = ({ className, variant, status, ...props }: IAlertProps) => (\n  <div\n    role=\"alert\"\n    className={cn(alertVariants({ variant, status }), className)}\n    {...props}\n  />\n);\nAlert.displayName = \"Alert\";\n\ninterface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}\nconst AlertTitle = ({ className, ...props }: IAlertTitleProps) => (\n  <Text as=\"h5\" className={cn(className)} {...props} />\n);\nAlertTitle.displayName = \"AlertTitle\";\n\ninterface IAlertDescriptionProps\n  extends HtmlHTMLAttributes<HTMLParagraphElement> {}\nconst AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (\n  <div className={cn(\"text-muted\", className)} {...props} />\n);\n\nAlertDescription.displayName = \"AlertDescription\";\n\nconst AlertComponent = Object.assign(Alert, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n});\n\nexport { AlertComponent as Alert };\n",
+      "content": "import { HtmlHTMLAttributes } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Text } from \"@/components/ui/Text\";\n\nconst alertVariants = cva(\"relative w-full border-2 border-black p-4\", {\n  variants: {\n    variant: {\n      default: \"bg-background text-foreground\",\n      solid: \"bg-black text-white\",\n    },\n    status: {\n      error: \"bg-red-300 text-red-800 border-red-800\",\n      success: \"bg-green-300 text-green-800 border-green-800\",\n      warning: \"bg-yellow-300 text-yellow-800 border-yellow-800\",\n      info: \"bg-blue-300 text-blue-800 border-blue-800\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface IAlertProps\n  extends HtmlHTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\nconst Alert = ({ className, variant, status, ...props }: IAlertProps) => (\n  <div\n    role=\"alert\"\n    className={cn(alertVariants({ variant, status }), className)}\n    {...props}\n  />\n);\nAlert.displayName = \"Alert\";\n\ninterface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}\nconst AlertTitle = ({ className, ...props }: IAlertTitleProps) => (\n  <Text as=\"h5\" className={cn(className)} {...props} />\n);\nAlertTitle.displayName = \"AlertTitle\";\n\ninterface IAlertDescriptionProps\n  extends HtmlHTMLAttributes<HTMLParagraphElement> {}\nconst AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (\n  <div className={cn(\"text-muted-foreground\", className)} {...props} />\n);\n\nAlertDescription.displayName = \"AlertDescription\";\n\nconst AlertComponent = Object.assign(Alert, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n});\n\nexport { AlertComponent as Alert };\n",
       "type": "registry:component",
       "target": "components/retroui/Alert.tsx"
     }
diff --git a/public/r/avatar.json b/public/r/avatar.json
index 1dd3c75..f2cf0df 100644
--- a/public/r/avatar.json
+++ b/public/r/avatar.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/Avatar.tsx",
-      "content": "import * as React from \"react\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex h-14 w-14 border-2 border-black rounded-full overflow-hidden\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatar.displayName = \"Avatar\";\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = \"Avatar.Image\";\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted bg-primary-400\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatarFallback.displayName = \"Avatar.Fallback\";\n\nconst AvatarComponent = Object.assign(Avatar, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n});\n\nexport { AvatarComponent as Avatar };\n",
+      "content": "import * as React from \"react\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex h-14 w-14 border-2 border-black rounded-full overflow-hidden\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatar.displayName = \"Avatar\";\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = \"Avatar.Image\";\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted bg-primary\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatarFallback.displayName = \"Avatar.Fallback\";\n\nconst AvatarComponent = Object.assign(Avatar, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n});\n\nexport { AvatarComponent as Avatar };\n",
       "type": "registry:component",
       "target": "components/retroui/Avatar.tsx"
     }
diff --git a/public/r/badge.json b/public/r/badge.json
index 4b5e575..990542e 100644
--- a/public/r/badge.json
+++ b/public/r/badge.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/Badge.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { HTMLAttributes } from \"react\";\n\nconst badgeVariants = cva(\"font-semibold \", {\n  variants: {\n    variant: {\n      default: \"bg-gray-200 text-gray-700\",\n      outline: \"outline outline-2 outline-black text-black\",\n      solid: \"bg-black text-white\",\n      surface: \"outline outline-2 bg-primary-300 text-black\",\n    },\n    size: {\n      sm: \"px-2 py-1 text-xs\",\n      md: \"px-2.5 py-1.5 text-sm\",\n      lg: \"px-3 py-2 text-base\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface ButtonProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nexport function Badge({\n  children,\n  size = \"md\",\n  variant = \"default\",\n  className = \"\",\n  ...props\n}: ButtonProps) {\n  return (\n    <span\n      className={cn(badgeVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { HTMLAttributes } from \"react\";\n\nconst badgeVariants = cva(\"font-semibold \", {\n  variants: {\n    variant: {\n      default: \"bg-gray-200 text-gray-700\",\n      outline: \"outline-2 outline-black text-black\",\n      solid: \"bg-black text-white\",\n      surface: \"outline-2 bg-primary text-black\",\n    },\n    size: {\n      sm: \"px-2 py-1 text-xs\",\n      md: \"px-2.5 py-1.5 text-sm\",\n      lg: \"px-3 py-2 text-base\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface ButtonProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nexport function Badge({\n  children,\n  size = \"md\",\n  variant = \"default\",\n  className = \"\",\n  ...props\n}: ButtonProps) {\n  return (\n    <span\n      className={cn(badgeVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/retroui/Badge.tsx"
     }
diff --git a/public/r/button.json b/public/r/button.json
index 378dc69..808c008 100644
--- a/public/r/button.json
+++ b/public/r/button.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/Button.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\n\nconst buttonVariants = cva(\"font-head transition-all outline-none\", {\n  variants: {\n    variant: {\n      default:\n        \"shadow-md hover:shadow-xs bg-primary-400 text-black border-2 border-black hover:bg-primary-500\",\n      outline:\n        \"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black\",\n      link: \"bg-transparent text-black hover:underline\",\n    },\n    size: {\n      sm: \"px-4 py-1 text-sm\",\n      md: \"px-6 py-2 text-base\",\n      lg: \"px-8 py-3 text-lg\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    variant: \"default\",\n  },\n});\n\nexport interface IButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\n  (\n    {\n      children,\n      size = \"md\",\n      className = \"\",\n      variant = \"default\",\n      ...props\n    }: IButtonProps,\n    forwardedRef\n  ) => (\n    <button\n      ref={forwardedRef}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nButton.displayName = \"Button\";\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\n\nconst buttonVariants = cva(\"font-head transition-all outline-hidden\", {\n  variants: {\n    variant: {\n      default:\n        \"shadow-md hover:shadow-xs bg-primary text-black border-2 border-black hover:bg-primary-hover\",\n      outline:\n        \"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black\",\n      link: \"bg-transparent text-black hover:underline\",\n    },\n    size: {\n      sm: \"px-4 py-1 text-sm\",\n      md: \"px-6 py-2 text-base\",\n      lg: \"px-8 py-3 text-lg\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    variant: \"default\",\n  },\n});\n\nexport interface IButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\n  (\n    {\n      children,\n      size = \"md\",\n      className = \"\",\n      variant = \"default\",\n      ...props\n    }: IButtonProps,\n    forwardedRef\n  ) => (\n    <button\n      ref={forwardedRef}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nButton.displayName = \"Button\";\n",
       "type": "registry:component",
       "target": "components/retroui/Button.tsx"
     }
diff --git a/public/r/card.json b/public/r/card.json
index 830c68d..8726953 100644
--- a/public/r/card.json
+++ b/public/r/card.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "components/ui/Card.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport { HTMLAttributes } from \"react\";\nimport { Text } from \"@/components/ui/Text\";\n\ninterface ICardProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nconst Card = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\n        \"inline-block border-2 border-black shadow-md cursor-pointer transition-all hover:shadow-xs\",\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\nconst CardHeader = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\"flex flex-col justify-start p-4\", className)}\n      {...props}\n    />\n  );\n};\n\nconst CardTitle = ({ className, ...props }: ICardProps) => {\n  return <Text as=\"h3\" className={cn(\"mb-2\", className)} {...props} />;\n};\n\nconst CardDescription = ({ className, ...props }: ICardProps) => (\n  <p className={cn(\"text-muted\", className)} {...props} />\n);\n\nconst CardContent = ({ className, ...props }: ICardProps) => {\n  return <div className={cn(\"p-4\", className)} {...props} />;\n};\n\nconst CardComponent = Object.assign(Card, {\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Content: CardContent,\n});\n\nexport { CardComponent as Card };\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { HTMLAttributes } from \"react\";\nimport { Text } from \"@/components/ui/Text\";\n\ninterface ICardProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nconst Card = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\n        \"inline-block border-2 border-black shadow-md cursor-pointer transition-all hover:shadow-xs\",\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\nconst CardHeader = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\"flex flex-col justify-start p-4\", className)}\n      {...props}\n    />\n  );\n};\n\nconst CardTitle = ({ className, ...props }: ICardProps) => {\n  return <Text as=\"h3\" className={cn(\"mb-2\", className)} {...props} />;\n};\n\nconst CardDescription = ({ className, ...props }: ICardProps) => (\n  <p className={cn(\"text-muted-foreground\", className)} {...props} />\n);\n\nconst CardContent = ({ className, ...props }: ICardProps) => {\n  return <div className={cn(\"p-4\", className)} {...props} />;\n};\n\nconst CardComponent = Object.assign(Card, {\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Content: CardContent,\n});\n\nexport { CardComponent as Card };\n",
       "type": "registry:component",
       "target": "components/retroui/Card.tsx"
     }
diff --git a/public/r/checkbox.json b/public/r/checkbox.json
index 5e49c26..f7d359d 100644
--- a/public/r/checkbox.json
+++ b/public/r/checkbox.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "components/ui/Checkbox.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { Check } from \"lucide-react\";\n\nconst checkboxVariants = cva(\"border-black border-2\", {\n  variants: {\n    variant: {\n      default: \" data-[state=checked]:bg-primary-500\",\n      outline: \"\",\n      solid: \"data-[state=checked]:bg-black *:text-white\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface CheckboxProps\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nexport const Checkbox = ({\n  className,\n  size,\n  variant,\n  ...props\n}: CheckboxProps) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      checkboxVariants({\n        size,\n        variant,\n      }),\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"h-full w-full\">\n      <Check className=\"h-full w-full\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n);\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { Check } from \"lucide-react\";\n\nconst checkboxVariants = cva(\"border-black border-2\", {\n  variants: {\n    variant: {\n      default: \"data-[state=checked]:bg-primary\",\n      outline: \"\",\n      solid: \"data-[state=checked]:bg-black *:text-white\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface CheckboxProps\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nexport const Checkbox = ({\n  className,\n  size,\n  variant,\n  ...props\n}: CheckboxProps) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      checkboxVariants({\n        size,\n        variant,\n      }),\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"h-full w-full\">\n      <Check className=\"h-full w-full\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n);\n",
       "type": "registry:component",
       "target": "components/retroui/Checkbox.tsx"
     }
diff --git a/public/r/dialog.json b/public/r/dialog.json
index 4b49bbe..2c0762a 100644
--- a/public/r/dialog.json
+++ b/public/r/dialog.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "components/ui/Dialog.tsx",
-      "content": "\"use client\";\n\nimport * as ReactDialog from \"@radix-ui/react-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { HTMLAttributes, ReactNode } from \"react\";\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\nimport { X } from \"lucide-react\";\n\nconst Dialog = ReactDialog.Root;\nconst DialogTrigger = ReactDialog.Trigger;\n\nconst overlayVariants = cva(\n  ` fixed bg-black/80 font-head\n    data-[state=open]:fade-in-0\n    data-[state=open]:animate-in \n    data-[state=closed]:animate-out \n    data-[state=closed]:fade-out-0 \n  `,\n  {\n    variants: {\n      variant: {\n        default: \"inset-0 z-50 bg-black/80\",\n        none: \"fixed bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\ninterface IDialogBackgroupProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof overlayVariants> {}\n\nconst DialogBackdrop = React.forwardRef<HTMLDivElement, IDialogBackgroupProps>(\n  function DialogBackdrop(inputProps: IDialogBackgroupProps, forwardedRef) {\n    const { variant = \"default\", className, ...props } = inputProps;\n\n    return (\n      <ReactDialog.Overlay\n        className={cn(overlayVariants({ variant }), className)}\n        ref={forwardedRef}\n        {...props}\n      />\n    );\n  }\n);\nDialogBackdrop.displayName = \"DialogBackdrop\";\n\nconst dialogVariants = cva(\n  `fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 \n  flex flex-col border-2 border-black shadow-md gap-4 overflow-y-auto bg-white\n  w-full h-fit max-h-[80vh] max-w-[97%] duration-300\n  data-[state=open]:animate-in \n  data-[state=open]:slide-in-from-left-1/2 \n  data-[state=open]:slide-in-from-top-[48%]\n  data-[state=open]:fade-in-0 \n  data-[state=open]:zoom-in-95 \n  data-[state=closed]:animate-out \n  data-[state=closed]:fade-out-0 \n  data-[state=closed]:slide-out-to-top-[48%] \n  data-[state=closed]:slide-out-to-left-1/2 \n  data-[state=closed]:zoom-out-95`,\n  {\n    variants: {\n      size: {\n        auto: \"max-w-fit\",\n        sm: \"lg:max-w-[30%]\",\n        md: \"lg:max-w-[40%]\",\n        lg: \"lg:max-w-[50%]\",\n        xl: \"lg:max-w-[60%]\",\n        \"2xl\": \"lg:max-w-[70%]\",\n        \"3xl\": \"lg:max-w-[80%]\",\n        \"4xl\": \"lg:max-w-[90%]\",\n        screen: \"max-w-[100%]\",\n      },\n    },\n    defaultVariants: {\n      size: \"auto\",\n    },\n  }\n);\n\ninterface IDialogContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogVariants> {\n  overlay?: IDialogBackgroupProps;\n}\n\nconst DialogContent = React.forwardRef<HTMLDivElement, IDialogContentProps>(\n  function DialogContent(inputProps: IDialogContentProps, forwardedRef) {\n    const {\n      children,\n      size = \"auto\",\n      className,\n      overlay,\n      ...props\n    } = inputProps;\n\n    return (\n      <ReactDialog.Portal>\n        <DialogBackdrop {...overlay} />\n        <ReactDialog.Content\n          className={cn(dialogVariants({ size }), className)}\n          ref={forwardedRef}\n          {...props}\n        >\n          <VisuallyHidden>\n            <ReactDialog.Title />\n          </VisuallyHidden>\n          <div className=\"flex flex-col relative\">{children}</div>\n        </ReactDialog.Content>\n      </ReactDialog.Portal>\n    );\n  }\n);\nDialogContent.displayName = \"DialogContent\";\n\ninterface IDialogDescriptionProps extends HTMLAttributes<HTMLDivElement> {}\nconst DialogDescription = ({\n  children,\n  className,\n  ...props\n}: IDialogDescriptionProps) => {\n  return (\n    <ReactDialog.Description className={cn(className)} {...props}>\n      {children}\n    </ReactDialog.Description>\n  );\n};\n\nconst dialogFooterVariants = cva(\n  \"flex items-center justify-end border-t-2 border-black min-h-12 gap-4 px-4 py-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-white text-black\",\n      },\n      position: {\n        fixed: \"sticky bottom-0\",\n        static: \"static\",\n      },\n    },\n    defaultVariants: {\n      position: \"fixed\",\n    },\n  }\n);\n\nexport interface IDialogFooterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogFooterVariants> {}\n\nconst DialogFooter = ({\n  children,\n  className,\n  position,\n  variant,\n  ...props\n}: IDialogFooterProps) => {\n  return (\n    <div\n      className={cn(dialogFooterVariants({ position, variant }), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst dialogHeaderVariants = cva(\n  \"flex items-center justify-between border-b-2 border-black px-4 min-h-12\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary-400 text-black\",\n      },\n      position: {\n        fixed: \"sticky top-0\",\n        static: \"static\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      position: \"static\",\n    },\n  }\n);\n\nconst DialogHeaderDefaultLayout = ({ children }: { children: ReactNode }) => {\n  return (\n    <>\n      {children}\n      <DialogTrigger title=\"Close pop-up\" className=\"cursor-pointer\" asChild>\n        <X />\n      </DialogTrigger>\n    </>\n  );\n};\n\ninterface IDialogHeaderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogHeaderVariants>,\n    ReactDialog.DialogTitleProps {}\n\nconst DialogHeader = ({\n  children,\n  className,\n  position,\n  variant,\n  asChild,\n  ...props\n}: IDialogHeaderProps) => {\n  return (\n    <div\n      className={cn(dialogHeaderVariants({ position, variant }), className)}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <DialogHeaderDefaultLayout>{children}</DialogHeaderDefaultLayout>\n      )}\n    </div>\n  );\n};\n\nconst DialogComponent = Object.assign(Dialog, {\n  Trigger: DialogTrigger,\n  Header: DialogHeader,\n  Content: DialogContent,\n  Description: DialogDescription,\n  Footer: DialogFooter,\n});\n\nexport { DialogComponent as Dialog };\n",
+      "content": "\"use client\";\n\nimport * as ReactDialog from \"@radix-ui/react-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { HTMLAttributes, ReactNode } from \"react\";\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\nimport { X } from \"lucide-react\";\n\nconst Dialog = ReactDialog.Root;\nconst DialogTrigger = ReactDialog.Trigger;\n\nconst overlayVariants = cva(\n  ` fixed bg-black/80 font-head\n    data-[state=open]:fade-in-0\n    data-[state=open]:animate-in \n    data-[state=closed]:animate-out \n    data-[state=closed]:fade-out-0 \n  `,\n  {\n    variants: {\n      variant: {\n        default: \"inset-0 z-50 bg-black/80\",\n        none: \"fixed bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\ninterface IDialogBackgroupProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof overlayVariants> {}\n\nconst DialogBackdrop = React.forwardRef<HTMLDivElement, IDialogBackgroupProps>(\n  function DialogBackdrop(inputProps: IDialogBackgroupProps, forwardedRef) {\n    const { variant = \"default\", className, ...props } = inputProps;\n\n    return (\n      <ReactDialog.Overlay\n        className={cn(overlayVariants({ variant }), className)}\n        ref={forwardedRef}\n        {...props}\n      />\n    );\n  }\n);\nDialogBackdrop.displayName = \"DialogBackdrop\";\n\nconst dialogVariants = cva(\n  `fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 \n  flex flex-col border-2 border-black shadow-md gap-4 overflow-y-auto bg-white\n  w-full h-fit max-h-[80vh] max-w-[97%] duration-300\n  data-[state=open]:animate-in \n  data-[state=open]:slide-in-from-left-1/2 \n  data-[state=open]:slide-in-from-top-[48%]\n  data-[state=open]:fade-in-0 \n  data-[state=open]:zoom-in-95 \n  data-[state=closed]:animate-out \n  data-[state=closed]:fade-out-0 \n  data-[state=closed]:slide-out-to-top-[48%] \n  data-[state=closed]:slide-out-to-left-1/2 \n  data-[state=closed]:zoom-out-95`,\n  {\n    variants: {\n      size: {\n        auto: \"max-w-fit\",\n        sm: \"lg:max-w-[30%]\",\n        md: \"lg:max-w-[40%]\",\n        lg: \"lg:max-w-[50%]\",\n        xl: \"lg:max-w-[60%]\",\n        \"2xl\": \"lg:max-w-[70%]\",\n        \"3xl\": \"lg:max-w-[80%]\",\n        \"4xl\": \"lg:max-w-[90%]\",\n        screen: \"max-w-[100%]\",\n      },\n    },\n    defaultVariants: {\n      size: \"auto\",\n    },\n  }\n);\n\ninterface IDialogContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogVariants> {\n  overlay?: IDialogBackgroupProps;\n}\n\nconst DialogContent = React.forwardRef<HTMLDivElement, IDialogContentProps>(\n  function DialogContent(inputProps: IDialogContentProps, forwardedRef) {\n    const {\n      children,\n      size = \"auto\",\n      className,\n      overlay,\n      ...props\n    } = inputProps;\n\n    return (\n      <ReactDialog.Portal>\n        <DialogBackdrop {...overlay} />\n        <ReactDialog.Content\n          className={cn(dialogVariants({ size }), className)}\n          ref={forwardedRef}\n          {...props}\n        >\n          <VisuallyHidden>\n            <ReactDialog.Title />\n          </VisuallyHidden>\n          <div className=\"flex flex-col relative\">{children}</div>\n        </ReactDialog.Content>\n      </ReactDialog.Portal>\n    );\n  }\n);\nDialogContent.displayName = \"DialogContent\";\n\ninterface IDialogDescriptionProps extends HTMLAttributes<HTMLDivElement> {}\nconst DialogDescription = ({\n  children,\n  className,\n  ...props\n}: IDialogDescriptionProps) => {\n  return (\n    <ReactDialog.Description className={cn(className)} {...props}>\n      {children}\n    </ReactDialog.Description>\n  );\n};\n\nconst dialogFooterVariants = cva(\n  \"flex items-center justify-end border-t-2 border-black min-h-12 gap-4 px-4 py-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-white text-black\",\n      },\n      position: {\n        fixed: \"sticky bottom-0\",\n        static: \"static\",\n      },\n    },\n    defaultVariants: {\n      position: \"fixed\",\n    },\n  }\n);\n\nexport interface IDialogFooterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogFooterVariants> {}\n\nconst DialogFooter = ({\n  children,\n  className,\n  position,\n  variant,\n  ...props\n}: IDialogFooterProps) => {\n  return (\n    <div\n      className={cn(dialogFooterVariants({ position, variant }), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst dialogHeaderVariants = cva(\n  \"flex items-center justify-between border-b-2 border-black px-4 min-h-12\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-black\",\n      },\n      position: {\n        fixed: \"sticky top-0\",\n        static: \"static\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      position: \"static\",\n    },\n  }\n);\n\nconst DialogHeaderDefaultLayout = ({ children }: { children: ReactNode }) => {\n  return (\n    <>\n      {children}\n      <DialogTrigger title=\"Close pop-up\" className=\"cursor-pointer\" asChild>\n        <X />\n      </DialogTrigger>\n    </>\n  );\n};\n\ninterface IDialogHeaderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dialogHeaderVariants>,\n    ReactDialog.DialogTitleProps {}\n\nconst DialogHeader = ({\n  children,\n  className,\n  position,\n  variant,\n  asChild,\n  ...props\n}: IDialogHeaderProps) => {\n  return (\n    <div\n      className={cn(dialogHeaderVariants({ position, variant }), className)}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <DialogHeaderDefaultLayout>{children}</DialogHeaderDefaultLayout>\n      )}\n    </div>\n  );\n};\n\nconst DialogComponent = Object.assign(Dialog, {\n  Trigger: DialogTrigger,\n  Header: DialogHeader,\n  Content: DialogContent,\n  Description: DialogDescription,\n  Footer: DialogFooter,\n});\n\nexport { DialogComponent as Dialog };\n",
       "type": "registry:component",
       "target": "components/retroui/Dialog.tsx"
     }
diff --git a/public/r/input.json b/public/r/input.json
index 31d7627..db57fa5 100644
--- a/public/r/input.json
+++ b/public/r/input.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "components/ui/Input.tsx",
-      "content": "import React, { InputHTMLAttributes } from \"react\";\n\ninterface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  className?: string;\n}\n\nexport const Input: React.FC<InputProps> = ({\n  type = \"text\",\n  placeholder = \"Enter text\",\n  className = \"\",\n  ...props\n}) => {\n  return (\n    <input\n      type={type}\n      placeholder={placeholder}\n      className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs ${\n        props[\"aria-invalid\"]\n          ? \"border-red-500 text-red-500 shadow-xs shadow-red-600\"\n          : \"\"\n      } ${className}`}\n      {...props}\n    />\n  );\n};\n",
+      "content": "import React, { InputHTMLAttributes } from \"react\";\n\ninterface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  className?: string;\n}\n\nexport const Input: React.FC<InputProps> = ({\n  type = \"text\",\n  placeholder = \"Enter text\",\n  className = \"\",\n  ...props\n}) => {\n  return (\n    <input\n      type={type}\n      placeholder={placeholder}\n      className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-hidden focus:shadow-xs ${\n        props[\"aria-invalid\"]\n          ? \"border-red-500 text-red-500 shadow-xs shadow-red-600\"\n          : \"\"\n      } ${className}`}\n      {...props}\n    />\n  );\n};\n",
       "type": "registry:component",
       "target": "components/retroui/Input.tsx"
     }
diff --git a/public/r/menu.json b/public/r/menu.json
index 874a88e..7465120 100644
--- a/public/r/menu.json
+++ b/public/r/menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/Menu.tsx",
-      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport React, { ComponentPropsWithoutRef } from \"react\";\n\nconst Menu = DropdownMenu.Root;\nconst Trigger = DropdownMenu.Trigger;\n\ninterface IMenuContent\n  extends ComponentPropsWithoutRef<typeof DropdownMenu.Content> {}\n\nconst Content = ({ className, ...props }: IMenuContent) => (\n  <DropdownMenu.Portal>\n    <DropdownMenu.Content\n      side=\"bottom\"\n      align=\"start\"\n      className={cn(\n        \"bg-white border-2 border-black shadow-md absolute top-2 min-w-20\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenu.Portal>\n);\n\nconst MenuItem = React.forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof DropdownMenu.Item>\n>(({ className, ...props }, ref) => (\n  <DropdownMenu.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary-400 focus:bg-primary-400 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n));\nMenuItem.displayName = \"MenuItem\";\n\nconst MenuComponent = Object.assign(Menu, {\n  Trigger,\n  Content,\n  Item: MenuItem,\n});\n\nexport { MenuComponent as Menu };\n",
+      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport React, { ComponentPropsWithoutRef } from \"react\";\n\nconst Menu = DropdownMenu.Root;\nconst Trigger = DropdownMenu.Trigger;\n\ninterface IMenuContent\n  extends ComponentPropsWithoutRef<typeof DropdownMenu.Content> {}\n\nconst Content = ({ className, ...props }: IMenuContent) => (\n  <DropdownMenu.Portal>\n    <DropdownMenu.Content\n      side=\"bottom\"\n      align=\"start\"\n      className={cn(\n        \"bg-white border-2 border-black shadow-md absolute top-2 min-w-20\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenu.Portal>\n);\n\nconst MenuItem = React.forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof DropdownMenu.Item>\n>(({ className, ...props }, ref) => (\n  <DropdownMenu.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-primary focus:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n));\nMenuItem.displayName = \"MenuItem\";\n\nconst MenuComponent = Object.assign(Menu, {\n  Trigger,\n  Content,\n  Item: MenuItem,\n});\n\nexport { MenuComponent as Menu };\n",
       "type": "registry:component",
       "target": "components/retroui/Menu.tsx"
     }
diff --git a/public/r/radio.json b/public/r/radio.json
index af6d009..9283b01 100644
--- a/public/r/radio.json
+++ b/public/r/radio.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "components/ui/Radio.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport * as RadioPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst radioVariants = cva(\"border-black border-2\", {\n  variants: {\n    variant: {\n      default: \"\",\n      outline: \"\",\n      solid: \"\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nconst radioIndicatorVariants = cva(\"flex \", {\n  variants: {\n    variant: {\n      default: \"bg-primary-500 border-2 border-black\",\n      outline: \"border-2 border-black\",\n      solid: \"bg-black\",\n    },\n    size: {\n      sm: \"h-2 w-2\",\n      md: \"h-2.5 w-2.5\",\n      lg: \"h-3.5 w-3.5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface RadioGroupProps\n  extends React.ComponentProps<typeof RadioPrimitive.Root> {}\n\nexport const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (\n  <RadioPrimitive.Root className={cn(\"grid gap-2\", className)} {...props} />\n);\n\ninterface RadioProps\n  extends React.ComponentProps<typeof RadioPrimitive.Item>,\n    VariantProps<typeof radioVariants> {}\n\nexport const RadioItem = ({\n  children,\n  className,\n  size,\n  variant,\n  ...props\n}: RadioProps) => (\n  <RadioPrimitive.Item\n    {...props}\n    className={cn(\n      radioVariants({\n        size,\n        variant,\n      }),\n      className\n    )}\n  >\n    <RadioPrimitive.Indicator className=\"flex justify-center items-center\">\n      <span className={radioIndicatorVariants({ size, variant })}></span>\n    </RadioPrimitive.Indicator>\n    {children}\n  </RadioPrimitive.Item>\n);\n\nconst RadioComponent = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport { RadioComponent as RadioGroup };\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport * as RadioPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst radioVariants = cva(\"border-black border-2\", {\n  variants: {\n    variant: {\n      default: \"\",\n      outline: \"\",\n      solid: \"\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nconst radioIndicatorVariants = cva(\"flex \", {\n  variants: {\n    variant: {\n      default: \"bg-primary border-2 border-black\",\n      outline: \"border-2 border-black\",\n      solid: \"bg-black\",\n    },\n    size: {\n      sm: \"h-2 w-2\",\n      md: \"h-2.5 w-2.5\",\n      lg: \"h-3.5 w-3.5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface RadioGroupProps\n  extends React.ComponentProps<typeof RadioPrimitive.Root> {}\n\nexport const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (\n  <RadioPrimitive.Root className={cn(\"grid gap-2\", className)} {...props} />\n);\n\ninterface RadioProps\n  extends React.ComponentProps<typeof RadioPrimitive.Item>,\n    VariantProps<typeof radioVariants> {}\n\nexport const RadioItem = ({\n  children,\n  className,\n  size,\n  variant,\n  ...props\n}: RadioProps) => (\n  <RadioPrimitive.Item\n    {...props}\n    className={cn(\n      radioVariants({\n        size,\n        variant,\n      }),\n      className\n    )}\n  >\n    <RadioPrimitive.Indicator className=\"flex justify-center items-center\">\n      <span className={radioIndicatorVariants({ size, variant })}></span>\n    </RadioPrimitive.Indicator>\n    {children}\n  </RadioPrimitive.Item>\n);\n\nconst RadioComponent = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport { RadioComponent as RadioGroup };\n",
       "type": "registry:component",
       "target": "components/retroui/Radio.tsx"
     }
diff --git a/public/r/select.json b/public/r/select.json
index c4c9e0c..4557625 100644
--- a/public/r/select.json
+++ b/public/r/select.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "components/ui/Select.tsx",
-      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport React from \"react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectTrigger = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        \"flex h-10 min-w-40 items-center shadow-md justify-between border-2 border-input border-black bg-transparent px-4 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"ml-2 h-4 w-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectIcon = SelectPrimitive.Icon;\n\nconst SelectContent = ({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: SelectPrimitive.SelectContentProps) => {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          \"relative z-50 min-w-[8rem] overflow-hidden border border-black bg-white 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\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.Viewport\n          className={cn(\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectItem = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectItemProps) => (\n  <SelectPrimitive.Item\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-none hover:bg-primary-400 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4 text-foreground\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n  </SelectPrimitive.Item>\n);\nconst SelectLabel = SelectPrimitive.Label;\nconst SelectSeparator = SelectPrimitive.Separator;\n\nconst SelectObj = Object.assign(Select, {\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Content: SelectContent,\n  Group: SelectGroup,\n  Item: SelectItem,\n  Label: SelectLabel,\n  Separator: SelectSeparator,\n});\n\nexport { SelectObj as Select };\n",
+      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport React from \"react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectTrigger = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        \"flex h-10 min-w-40 items-center shadow-md justify-between border-2 border-input border-black bg-transparent px-4 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"ml-2 h-4 w-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectIcon = SelectPrimitive.Icon;\n\nconst SelectContent = ({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: SelectPrimitive.SelectContentProps) => {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          \"relative z-50 min-w-[8rem] overflow-hidden border border-black bg-white 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\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.Viewport\n          className={cn(\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectItem = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectItemProps) => (\n  <SelectPrimitive.Item\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4 text-foreground\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n  </SelectPrimitive.Item>\n);\nconst SelectLabel = SelectPrimitive.Label;\nconst SelectSeparator = SelectPrimitive.Separator;\n\nconst SelectObj = Object.assign(Select, {\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Content: SelectContent,\n  Group: SelectGroup,\n  Item: SelectItem,\n  Label: SelectLabel,\n  Separator: SelectSeparator,\n});\n\nexport { SelectObj as Select };\n",
       "type": "registry:component",
       "target": "components/retroui/Select.tsx"
     }
diff --git a/public/r/switch.json b/public/r/switch.json
index 66059ad..ac69117 100644
--- a/public/r/switch.json
+++ b/public/r/switch.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/Switch.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-400\",\n      className\n    )}\n    {...props}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 bg-primary-500 border-2 mx-0.5 border-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background\"\n      )}\n    />\n  </SwitchPrimitives.Root>\n);\n\nexport { Switch };\n",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary\",\n      className\n    )}\n    {...props}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background\"\n      )}\n    />\n  </SwitchPrimitives.Root>\n);\n\nexport { Switch };\n",
       "type": "registry:component",
       "target": "components/retroui/Switch.tsx"
     }
diff --git a/public/r/tab.json b/public/r/tab.json
index 60e3ad2..c97c1ca 100644
--- a/public/r/tab.json
+++ b/public/r/tab.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/Tab.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  Tab,\n  TabGroup,\n  TabList,\n  TabListProps,\n  TabPanel,\n  TabPanelProps,\n  TabPanels,\n  TabProps,\n} from \"@headlessui/react\";\n\nconst Tabs = TabGroup;\nconst TabsPanels = TabPanels;\n\ninterface ITabsTriggerList extends TabListProps {\n  className?: string;\n}\nconst TabsTriggerList = ({\n  children,\n  className,\n  ...props\n}: ITabsTriggerList) => {\n  return (\n    <TabList className={cn(\"flex flex-row space-x-2\", className)} {...props}>\n      {children}\n    </TabList>\n  );\n};\n\ninterface ITabsTrigger extends TabProps {\n  className?: string;\n}\nconst TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {\n  return (\n    <Tab\n      className={cn(\n        \"px-4 py-1 border-2 border-transparent data-[selected]:border-black data-[selected]:bg-primary-400 data-[selected]:font-semibold focus:outline-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Tab>\n  );\n};\n\ninterface ITabsContent extends TabPanelProps {\n  className?: string;\n}\nconst TabsContent = ({ children, className, ...props }: ITabsContent) => {\n  return (\n    <TabPanel\n      className={cn(\"border-2 border-black mt-2 p-4\", className)}\n      {...props}\n    >\n      {children}\n    </TabPanel>\n  );\n};\n\nexport { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList };\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  Tab,\n  TabGroup,\n  TabList,\n  TabListProps,\n  TabPanel,\n  TabPanelProps,\n  TabPanels,\n  TabProps,\n} from \"@headlessui/react\";\n\nconst Tabs = TabGroup;\nconst TabsPanels = TabPanels;\n\ninterface ITabsTriggerList extends TabListProps {\n  className?: string;\n}\nconst TabsTriggerList = ({\n  children,\n  className,\n  ...props\n}: ITabsTriggerList) => {\n  return (\n    <TabList className={cn(\"flex flex-row space-x-2\", className)} {...props}>\n      {children}\n    </TabList>\n  );\n};\n\ninterface ITabsTrigger extends TabProps {\n  className?: string;\n}\nconst TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {\n  return (\n    <Tab\n      className={cn(\n        \"px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Tab>\n  );\n};\n\ninterface ITabsContent extends TabPanelProps {\n  className?: string;\n}\nconst TabsContent = ({ children, className, ...props }: ITabsContent) => {\n  return (\n    <TabPanel\n      className={cn(\"border-2 border-black mt-2 p-4\", className)}\n      {...props}\n    >\n      {children}\n    </TabPanel>\n  );\n};\n\nexport { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList };\n",
       "type": "registry:component",
       "target": "components/retroui/Tab.tsx"
     }
diff --git a/public/r/text.json b/public/r/text.json
index f06824e..b619d62 100644
--- a/public/r/text.json
+++ b/public/r/text.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/Text.tsx",
-      "content": "import type { ElementType, HTMLAttributes } from \"react\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst textVariants = cva(\"font-head\", {\n  variants: {\n    as: {\n      p: \"font-sans text-base\",\n      li: \"font-sans text-base\",\n      a: \"font-sans text-base hover:underline underline-offset-2 decoration-primary-500\",\n      h1: \"text-4xl lg:text-5xl font-bold\",\n      h2: \"text-3xl lg:text-4xl font-semibold\",\n      h3: \"text-2xl font-medium\",\n      h4: \"text-xl font-normal\",\n      h5: \"text-lg font-normal\",\n      h6: \"text-base font-normal\",\n    },\n  },\n  defaultVariants: {\n    as: \"p\",\n  },\n});\n\ninterface TextProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"className\">,\n    VariantProps<typeof textVariants> {\n  className?: string;\n}\n\nexport const Text = (props: TextProps) => {\n  const { className, as, ...otherProps } = props;\n  const Tag: ElementType = as || \"p\";\n\n  return (\n    <Tag className={cn(textVariants({ as }), className)} {...otherProps} />\n  );\n};\n",
+      "content": "import type { ElementType, HTMLAttributes } from \"react\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst textVariants = cva(\"font-head\", {\n  variants: {\n    as: {\n      p: \"font-sans text-base\",\n      li: \"font-sans text-base\",\n      a: \"font-sans text-base hover:underline underline-offset-2 decoration-primary\",\n      h1: \"text-4xl lg:text-5xl font-bold\",\n      h2: \"text-3xl lg:text-4xl font-semibold\",\n      h3: \"text-2xl font-medium\",\n      h4: \"text-xl font-normal\",\n      h5: \"text-lg font-normal\",\n      h6: \"text-base font-normal\",\n    },\n  },\n  defaultVariants: {\n    as: \"p\",\n  },\n});\n\ninterface TextProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"className\">,\n    VariantProps<typeof textVariants> {\n  className?: string;\n}\n\nexport const Text = (props: TextProps) => {\n  const { className, as, ...otherProps } = props;\n  const Tag: ElementType = as || \"p\";\n\n  return (\n    <Tag className={cn(textVariants({ as }), className)} {...otherProps} />\n  );\n};\n",
       "type": "registry:component",
       "target": "components/retroui/Text.tsx"
     }
diff --git a/public/r/textarea.json b/public/r/textarea.json
index db2c815..b8f5d70 100644
--- a/public/r/textarea.json
+++ b/public/r/textarea.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "components/ui/Textarea.tsx",
-      "content": "import React from \"react\";\n\nexport function Textarea({\n  type = \"text\",\n  placeholder = \"Enter text...\",\n  className = \"\",\n  ...props\n}) {\n  return (\n    <textarea\n        placeholder={placeholder}\n        rows={4}\n        className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs ${className}`}\n        {...props}\n    />\n  );\n}\n",
+      "content": "import React from \"react\";\n\nexport function Textarea({\n  type = \"text\",\n  placeholder = \"Enter text...\",\n  className = \"\",\n  ...props\n}) {\n  return (\n    <textarea\n        placeholder={placeholder}\n        rows={4}\n        className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-hidden focus:shadow-xs ${className}`}\n        {...props}\n    />\n  );\n}\n",
       "type": "registry:component",
       "target": "components/retroui/Textarea.tsx"
     }
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index d05295b..0000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./preview/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontSize: {
-        base: "1.15rem",
-        lg: "1.20rem",
-      },
-      textColor: {
-        muted: "var(--muted)",
-      },
-      fontFamily: {
-        head: ["var(--font-head)"],
-        sans: ["var(--font-sans)"],
-      },
-      boxShadow: {
-        xs: "1px 1px 0 0 #000",
-        sm: "2px 2px 0 0 #000",
-        md: "3px 3px 0 0 #000",
-      },
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-        primary: {
-          50: "var(--primary-50)",
-          100: "var(--primary-100)",
-          200: "var(--primary-200)",
-          300: "var(--primary-300)",
-          400: "var(--primary-400)",
-          500: "var(--primary-500)",
-          600: "var(--primary-600)",
-          700: "var(--primary-700)",
-          800: "var(--primary-800)",
-          900: "var(--primary-900)",
-        },
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-};
-export default config;