diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 8b50a49..fa5d3a0 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -4,7 +4,7 @@ on: release: types: - published - + jobs: build-and-deploy: runs-on: ubuntu-latest @@ -12,10 +12,10 @@ jobs: steps: - name: Check out the repository uses: actions/checkout@v4 - + - name: Setup Docker Buildx uses: docker/setup-buildx-action@v3 - + - name: DockerHub login uses: docker/login-action@v3 with: @@ -24,9 +24,9 @@ jobs: - name: Build and push to DockerHub run: | - docker build -t devarifhossain/retroui:1.1.9 ./ - docker push devarifhossain/retroui:1.1.9 - + docker build -t devarifhossain/retroui:1.1.10 ./ + docker push devarifhossain/retroui:1.1.10 + # - name: Set up SSH # uses: webfactory/ssh-agent@v0.9.0 # with: @@ -35,7 +35,7 @@ jobs: # - name: Add VPS to known_hosts # run: | # ssh-keyscan -H ${{ secrets.VPS_HOST }} >> ~/.ssh/known_hosts - + # - name: Deploy to VPS # run: | - # ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d" \ No newline at end of file + # ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d" diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..7935eb2 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 2, + "semi": true, + "printWidth": 80 +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 25b826a..8cb1a4e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -37,7 +37,7 @@ Thank you for your interest in contributing to RetroUI 🙏. I hope this guide t ## Adding a New Component -1. Create the main component in `/components/ui/NewComponent/NewComponent.tsx` +1. Create the main component in `/components/retroui/NewComponent/NewComponent.tsx` ```ts export function NewComponent() { @@ -45,7 +45,7 @@ export function NewComponent() { } ``` -2. Export your component in `/components/ui/NewComponent/index.ts` and `/components/ui/index.ts` +2. Export your component in `/components/retroui/NewComponent/index.ts` and `/components/retroui/index.ts` ```ts export * from "./NewComponent"; diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx index 0fd1f35..a83fb41 100644 --- a/app/(docs)/docs/[[...slug]]/page.tsx +++ b/app/(docs)/docs/[[...slug]]/page.tsx @@ -3,7 +3,7 @@ import { allDocs } from "contentlayer/generated"; import { notFound } from "next/navigation"; import { format } from "date-fns"; import MDX from "@/components/MDX"; -import { Text } from "@/components/ui"; +import { Text } from "@/components/retroui/Text"; import { Metadata } from "next"; import { MoveRightIcon, MoveUpRightIcon } from "lucide-react"; diff --git a/app/(marketing)/blogs/[slug]/page.tsx b/app/(marketing)/blogs/[slug]/page.tsx index 204a7e7..22dc6f3 100644 --- a/app/(marketing)/blogs/[slug]/page.tsx +++ b/app/(marketing)/blogs/[slug]/page.tsx @@ -3,7 +3,7 @@ import { allBlogs } from "contentlayer/generated"; import { notFound } from "next/navigation"; import { format } from "date-fns"; import MDX from "@/components/MDX"; -import { Avatar, Badge, Button, Text } from "@/components/ui"; +import { Avatar, Badge, Button, Text } from "@/components/retroui"; import { Metadata } from "next"; import { MoveRightIcon, MoveUpRightIcon } from "lucide-react"; import Image from "next/image"; diff --git a/app/(marketing)/blogs/page.tsx b/app/(marketing)/blogs/page.tsx index a819d18..9ff003c 100644 --- a/app/(marketing)/blogs/page.tsx +++ b/app/(marketing)/blogs/page.tsx @@ -1,5 +1,5 @@ import { allBlogs } from "@/.contentlayer/generated"; -import { Card, Text } from "@/components/ui"; +import { Card, Text } from "@/components/retroui"; import Image from "next/image"; import Link from "next/link"; import React from "react"; diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index 886a5f2..92672e1 100644 --- a/app/(marketing)/page.tsx +++ b/app/(marketing)/page.tsx @@ -8,7 +8,7 @@ import { Card, Avatar, Badge, -} from "@/components/ui"; +} from "@/components/retroui"; import AccordionStyleDefault from "@/preview/components/accordion-style-default"; import AlertStyleDefaultIcon from "@/preview/components/alert-style-with-icon"; import AvatarStyleCircle from "@/preview/components/avatar-style-circle-sizes"; @@ -32,7 +32,7 @@ async function getContributors(): Promise< headers: { "Content-Type": "application/json", }, - } + }, ); const contributorsList = await request.json(); @@ -47,7 +47,7 @@ async function getContributors(): Promise< avatar: c.avatar_url, username: c.login, url: c.html_url, - }) + }), ), ]; } diff --git a/app/(sink)/demo/components/page.tsx b/app/(sink)/demo/components/page.tsx index 60813d8..6932309 100644 --- a/app/(sink)/demo/components/page.tsx +++ b/app/(sink)/demo/components/page.tsx @@ -15,8 +15,8 @@ import { TabsPanels, TabsTrigger, TabsTriggerList, -} from "@/components/ui"; -import { Card } from "@/components/ui/Card"; +} from "@/components/retroui"; +import { Card } from "@/components/retroui/Card"; import BadgeStyleVariants from "@/preview/components/badge-style-variants"; import TestimonialCard from "@/preview/components/card-style-testimonial"; import { CheckCircle } from "lucide-react"; diff --git a/app/global.css b/app/global.css index b9c894f..4eaca53 100644 --- a/app/global.css +++ b/app/global.css @@ -74,8 +74,11 @@ .text-outlined { letter-spacing: 2px; - 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); + 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/robots.ts b/app/robots.ts index 6796d42..e56e5f8 100644 --- a/app/robots.ts +++ b/app/robots.ts @@ -1,11 +1,11 @@ -import type { MetadataRoute } from 'next' - +import type { MetadataRoute } from "next"; + export default function robots(): MetadataRoute.Robots { return { rules: { - userAgent: '*', - allow: '/', + userAgent: "*", + allow: "/", }, - sitemap: 'https://retroui.dev/sitemap.xml', - } -} \ No newline at end of file + sitemap: "https://retroui.dev/sitemap.xml", + }; +} diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx index e1a7a60..582168a 100644 --- a/components/CodeBlock.tsx +++ b/components/CodeBlock.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { cn } from "@/lib/utils"; -import { Button } from "@/components/ui"; +import { Button } from "@/components/retroui"; interface ICodeBlock extends React.HTMLAttributes {} @@ -33,7 +33,7 @@ export function CodeBlock({ className, children, ...props }: ICodeBlock) { 
diff --git a/components/ComponentInstall.tsx b/components/ComponentInstall.tsx
index 783939e..6f8bb1f 100644
--- a/components/ComponentInstall.tsx
+++ b/components/ComponentInstall.tsx
@@ -23,9 +23,6 @@ function ComponentInstall({ children }: IComponentShowcase) {
         
           Manual
         
-        
-          Open in V0
-        
       
 
       {children}
diff --git a/components/ComponentShowcase.tsx b/components/ComponentShowcase.tsx
index c411889..7b19de7 100644
--- a/components/ComponentShowcase.tsx
+++ b/components/ComponentShowcase.tsx
@@ -1,7 +1,7 @@
 import { componentConfig } from "@/config";
 import { TabGroup, TabList, TabPanels, TabPanel, Tab } from "@headlessui/react";
 import React, { HTMLAttributes } from "react";
-import { Button } from "./ui";
+import { Button } from "./retroui";
 
 interface IComponentShowcase extends HTMLAttributes {
   name: keyof typeof componentConfig.examples;
diff --git a/components/HamburgerMenu.tsx b/components/HamburgerMenu.tsx
index 8f036e4..af29af3 100644
--- a/components/HamburgerMenu.tsx
+++ b/components/HamburgerMenu.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react";
 import SideNav from "./SideNav";
 import { AlignJustify, X } from "lucide-react";
-import { Button } from "@/components/ui";
+import { Button } from "@/components/retroui";
 
 export default function HamburgerMenu() {
   const [isOpen, setIsOpen] = useState(false);
diff --git a/components/JoinNewsletter.tsx b/components/JoinNewsletter.tsx
index 0eddcd3..e9dd9d5 100644
--- a/components/JoinNewsletter.tsx
+++ b/components/JoinNewsletter.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Text, Input } from "@/components/ui";
+import { Button, Text, Input } from "@/components/retroui";
 import { useState } from "react";
 
 const INIT = "INIT";
@@ -79,7 +79,7 @@ export function JoinNewsletter() {
 
     // build body
     const formBody = `userGroup=${encodeURIComponent(
-      formStyles.userGroup
+      formStyles.userGroup,
     )}&email=${encodeURIComponent(email)}&mailingLists=`;
 
     // API request to add user to newsletter
@@ -108,7 +108,7 @@ export function JoinNewsletter() {
         // check for cloudflare error
         if (error.message === "Failed to fetch") {
           setErrorMessage(
-            "Too many signups, please try again in a little while"
+            "Too many signups, please try again in a little while",
           );
         } else if (error.message) {
           setErrorMessage(error.message);
diff --git a/components/MDX.tsx b/components/MDX.tsx
index 1f96185..e12e877 100644
--- a/components/MDX.tsx
+++ b/components/MDX.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Alert, Badge, Card, Text } from "@/components/ui";
+import { Alert, Badge, Card, Text } from "@/components/retroui";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
@@ -83,7 +83,7 @@ const components = (type: "doc" | "blog") => ({
     
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 2d9b309..adcd4ca 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { navConfig } from "@/config/navigation";
-import { Badge, Text } from "@/components/ui";
+import { Badge, Text } from "@/components/retroui";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
diff --git a/components/Testimonial.tsx b/components/Testimonial.tsx
index 5573d3c..42eb1a7 100644
--- a/components/Testimonial.tsx
+++ b/components/Testimonial.tsx
@@ -1,4 +1,4 @@
-import { Text, Card, Avatar } from "@/components/ui";
+import { Text, Card, Avatar } from "@/components/retroui";
 
 interface TestimonialCardProps {
   quote: string;
diff --git a/components/TopNav.tsx b/components/TopNav.tsx
index 045c902..5ae704b 100644
--- a/components/TopNav.tsx
+++ b/components/TopNav.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { GithubIcon } from "lucide-react";
 import HamburgerMenu from "./HamburgerMenu";
-import { Button, Text } from "@/components/ui";
+import { Button, Text } from "@/components/retroui";
 import { navConfig } from "@/config/navigation";
 
 export default function TopNav() {
diff --git a/components/index.ts b/components/index.ts
index 27a33de..917a70e 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,2 +1,2 @@
 export * from "./ComponentShowcase";
-export * from "./JoinNewsletter";
\ No newline at end of file
+export * from "./JoinNewsletter";
diff --git a/components/ui/Accordion.tsx b/components/retroui/Accordion.tsx
similarity index 98%
rename from components/ui/Accordion.tsx
rename to components/retroui/Accordion.tsx
index dee8128..d7c1c93 100644
--- a/components/ui/Accordion.tsx
+++ b/components/retroui/Accordion.tsx
@@ -16,7 +16,7 @@ const AccordionItem = React.forwardRef<
     ref={ref}
     className={cn(
       "border-2 border-black shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden",
-      className
+      className,
     )}
     {...props}
   />
@@ -32,7 +32,7 @@ const AccordionHeader = React.forwardRef<
       ref={ref}
       className={cn(
         "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
+        className,
       )}
       {...props}
     >
diff --git a/components/ui/Alert.tsx b/components/retroui/Alert.tsx
similarity index 97%
rename from components/ui/Alert.tsx
rename to components/retroui/Alert.tsx
index 5f9299c..ffb33ae 100644
--- a/components/ui/Alert.tsx
+++ b/components/retroui/Alert.tsx
@@ -2,7 +2,7 @@ import { HtmlHTMLAttributes } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
-import { Text } from "@/components/ui/Text";
+import { Text } from "@/components/retroui/Text";
 
 const alertVariants = cva("relative w-full border-2 border-black p-4", {
   variants: {
diff --git a/components/ui/Avatar.tsx b/components/retroui/Avatar.tsx
similarity index 97%
rename from components/ui/Avatar.tsx
rename to components/retroui/Avatar.tsx
index dfec77d..ca0b13e 100644
--- a/components/ui/Avatar.tsx
+++ b/components/retroui/Avatar.tsx
@@ -11,7 +11,7 @@ const Avatar = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex h-14 w-14 border-2 border-black rounded-full overflow-hidden",
-      className
+      className,
     )}
     {...props}
   />
@@ -38,7 +38,7 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-muted bg-primary",
-      className
+      className,
     )}
     {...props}
   />
diff --git a/components/ui/Badge.tsx b/components/retroui/Badge.tsx
similarity index 100%
rename from components/ui/Badge.tsx
rename to components/retroui/Badge.tsx
diff --git a/components/ui/BasicCard.tsx b/components/retroui/BasicCard.tsx
similarity index 100%
rename from components/ui/BasicCard.tsx
rename to components/retroui/BasicCard.tsx
diff --git a/components/ui/Button.tsx b/components/retroui/Button.tsx
similarity index 98%
rename from components/ui/Button.tsx
rename to components/retroui/Button.tsx
index 5140359..bbf8414 100644
--- a/components/ui/Button.tsx
+++ b/components/retroui/Button.tsx
@@ -25,7 +25,7 @@ const buttonVariants = cva(
       size: "md",
       variant: "default",
     },
-  }
+  },
 );
 
 export interface IButtonProps
@@ -41,7 +41,7 @@ export const Button = React.forwardRef(
       variant = "default",
       ...props
     }: IButtonProps,
-    forwardedRef
+    forwardedRef,
   ) => (
     
-  )
+  ),
 );
 
 Button.displayName = "Button";
diff --git a/components/ui/Card.tsx b/components/retroui/Card.tsx
similarity index 98%
rename from components/ui/Card.tsx
rename to components/retroui/Card.tsx
index 7decfae..4a90db3 100644
--- a/components/ui/Card.tsx
+++ b/components/retroui/Card.tsx
@@ -11,7 +11,7 @@ const Card = ({ className, ...props }: ICardProps) => {
     

diff --git a/components/ui/Checkbox.tsx b/components/retroui/Checkbox.tsx
similarity index 98%
rename from components/ui/Checkbox.tsx
rename to components/retroui/Checkbox.tsx
index 46324b1..b39c5f1 100644
--- a/components/ui/Checkbox.tsx
+++ b/components/retroui/Checkbox.tsx
@@ -38,7 +38,7 @@ export const Checkbox = ({
         size,
         variant,
       }),
-      className
+      className,
     )}
     {...props}
   >
diff --git a/components/ui/Dialog.tsx b/components/retroui/Dialog.tsx
similarity index 99%
rename from components/ui/Dialog.tsx
rename to components/retroui/Dialog.tsx
index 5811b72..ed02988 100644
--- a/components/ui/Dialog.tsx
+++ b/components/retroui/Dialog.tsx
@@ -27,7 +27,7 @@ const overlayVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 interface IDialogBackgroupProps
@@ -45,7 +45,7 @@ const DialogBackdrop = React.forwardRef(
         {...props}
       />
     );
-  }
+  },
 );
 DialogBackdrop.displayName = "DialogBackdrop";
 
@@ -80,7 +80,7 @@ const dialogVariants = cva(
     defaultVariants: {
       size: "auto",
     },
-  }
+  },
 );
 
 interface IDialogContentProps
@@ -114,7 +114,7 @@ const DialogContent = React.forwardRef(
         
       
     );
-  }
+  },
 );
 DialogContent.displayName = "DialogContent";
 
@@ -146,7 +146,7 @@ const dialogFooterVariants = cva(
     defaultVariants: {
       position: "fixed",
     },
-  }
+  },
 );
 
 export interface IDialogFooterProps
@@ -186,7 +186,7 @@ const dialogHeaderVariants = cva(
       variant: "default",
       position: "static",
     },
-  }
+  },
 );
 
 const DialogHeaderDefaultLayout = ({ children }: { children: ReactNode }) => {
diff --git a/components/ui/IconButton.tsx b/components/retroui/IconButton.tsx
similarity index 100%
rename from components/ui/IconButton.tsx
rename to components/retroui/IconButton.tsx
diff --git a/components/ui/Input.tsx b/components/retroui/Input.tsx
similarity index 100%
rename from components/ui/Input.tsx
rename to components/retroui/Input.tsx
diff --git a/components/ui/Label.tsx b/components/retroui/Label.tsx
similarity index 90%
rename from components/ui/Label.tsx
rename to components/retroui/Label.tsx
index 7fed06a..b5df1a1 100644
--- a/components/ui/Label.tsx
+++ b/components/retroui/Label.tsx
@@ -5,14 +5,12 @@ import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
-const Label = ({
+export const Label = ({
   className,
   ...props
 }: React.ComponentProps) => (
   
 );
-
-export { Label };
diff --git a/components/ui/Login.tsx b/components/retroui/Login.tsx
similarity index 100%
rename from components/ui/Login.tsx
rename to components/retroui/Login.tsx
diff --git a/components/ui/Menu.tsx b/components/retroui/Menu.tsx
similarity index 97%
rename from components/ui/Menu.tsx
rename to components/retroui/Menu.tsx
index f2b5e1d..dc026df 100644
--- a/components/ui/Menu.tsx
+++ b/components/retroui/Menu.tsx
@@ -17,7 +17,7 @@ const Content = ({ className, ...props }: IMenuContent) => (
       align="start"
       className={cn(
         "bg-white border-2 border-black shadow-md absolute top-2 min-w-20",
-        className
+        className,
       )}
       {...props}
     />
@@ -32,7 +32,7 @@ const MenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "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
+      className,
     )}
     {...props}
   />
diff --git a/components/ui/ProductCard.tsx b/components/retroui/ProductCard.tsx
similarity index 100%
rename from components/ui/ProductCard.tsx
rename to components/retroui/ProductCard.tsx
diff --git a/components/ui/Progress.tsx b/components/retroui/Progress.tsx
similarity index 97%
rename from components/ui/Progress.tsx
rename to components/retroui/Progress.tsx
index bdc74d4..cf4d8cc 100644
--- a/components/ui/Progress.tsx
+++ b/components/retroui/Progress.tsx
@@ -13,7 +13,7 @@ const Progress = React.forwardRef<
     ref={ref}
     className={cn(
       "relative h-4 w-full overflow-hidden bg-background border-2 border-black",
-      className
+      className,
     )}
     {...props}
   >
diff --git a/components/ui/Radio.tsx b/components/retroui/Radio.tsx
similarity index 99%
rename from components/ui/Radio.tsx
rename to components/retroui/Radio.tsx
index 9923a35..a52f36f 100644
--- a/components/ui/Radio.tsx
+++ b/components/retroui/Radio.tsx
@@ -65,7 +65,7 @@ export const RadioItem = ({
         size,
         variant,
       }),
-      className
+      className,
     )}
   >
     
diff --git a/components/ui/Select.tsx b/components/retroui/Select.tsx
similarity index 97%
rename from components/ui/Select.tsx
rename to components/retroui/Select.tsx
index 5e2d6b5..3677ffd 100644
--- a/components/ui/Select.tsx
+++ b/components/retroui/Select.tsx
@@ -16,7 +16,7 @@ const SelectTrigger = ({
     
@@ -45,7 +45,7 @@ const SelectContent = ({
           "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",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
+          className,
         )}
         position={position}
         {...props}
@@ -53,7 +53,7 @@ const SelectContent = ({
         
           {children}
@@ -73,7 +73,7 @@ const SelectItem = ({
   
diff --git a/components/retroui/Slider.tsx b/components/retroui/Slider.tsx
new file mode 100644
index 0000000..b6fb8c8
--- /dev/null
+++ b/components/retroui/Slider.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+  
+    
+      
+    
+    
+  
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
diff --git a/components/ui/Switch.tsx b/components/retroui/Switch.tsx
similarity index 93%
rename from components/ui/Switch.tsx
rename to components/retroui/Switch.tsx
index f86fd75..d52d67e 100644
--- a/components/ui/Switch.tsx
+++ b/components/retroui/Switch.tsx
@@ -9,13 +9,13 @@ const Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (
   
     
   
diff --git a/components/ui/Tab.tsx b/components/retroui/Tab.tsx
similarity index 98%
rename from components/ui/Tab.tsx
rename to components/retroui/Tab.tsx
index f635f49..27d3d47 100644
--- a/components/ui/Tab.tsx
+++ b/components/retroui/Tab.tsx
@@ -36,7 +36,7 @@ const TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {
     
diff --git a/components/ui/Text.tsx b/components/retroui/Text.tsx
similarity index 100%
rename from components/ui/Text.tsx
rename to components/retroui/Text.tsx
diff --git a/components/retroui/Textarea.tsx b/components/retroui/Textarea.tsx
new file mode 100644
index 0000000..77cb522
--- /dev/null
+++ b/components/retroui/Textarea.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+export function Textarea({
+  type = "text",
+  placeholder = "Enter text...",
+  className = "",
+  ...props
+}) {
+  return (
+