diff --git a/apps/www/src/app/page.tsx b/apps/www/src/app/page.tsx
index 7bc45ca..9c07458 100644
--- a/apps/www/src/app/page.tsx
+++ b/apps/www/src/app/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import Button from "@/components/neobruu/Button";
 import { IoLogoGithub } from "react-icons/io";
diff --git a/apps/www/src/components/CopyCode.tsx b/apps/www/src/components/CopyCode.tsx
index f42bb59..1fe704e 100644
--- a/apps/www/src/components/CopyCode.tsx
+++ b/apps/www/src/components/CopyCode.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useState } from "react";
 import Button from "./neobruu/Button";
 import { IoCheckmark, IoCopy } from "react-icons/io5";
diff --git a/apps/www/src/components/MobileSidebar.tsx b/apps/www/src/components/MobileSidebar.tsx
index 3f89fa8..9526479 100644
--- a/apps/www/src/components/MobileSidebar.tsx
+++ b/apps/www/src/components/MobileSidebar.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { useState } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
diff --git a/apps/www/src/components/Navbar.tsx b/apps/www/src/components/Navbar.tsx
index 644b071..eb62c91 100644
--- a/apps/www/src/components/Navbar.tsx
+++ b/apps/www/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import Link from "next/link";
 import { AiFillGithub } from "react-icons/ai";
diff --git a/apps/www/src/components/Pagination.tsx b/apps/www/src/components/Pagination.tsx
index 3134ab6..94c7a6c 100644
--- a/apps/www/src/components/Pagination.tsx
+++ b/apps/www/src/components/Pagination.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { useRouter } from "next/navigation";
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 import Button from "@/components/neobruu/Button";
diff --git a/apps/www/src/components/Sidebar.tsx b/apps/www/src/components/Sidebar.tsx
index 490f820..ada4a91 100644
--- a/apps/www/src/components/Sidebar.tsx
+++ b/apps/www/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { usePathname } from "next/navigation";
 import components from "@/data/components";
 import Link from "next/link";
diff --git a/apps/www/src/components/example/AccordionExample.tsx b/apps/www/src/components/example/AccordionExample.tsx
index 88d9fed..c0b9673 100644
--- a/apps/www/src/components/example/AccordionExample.tsx
+++ b/apps/www/src/components/example/AccordionExample.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Accordion from "@/components/neobruu/Accordion";
 
 export default function AccordionExample() {
diff --git a/apps/www/src/components/example/CheckboxExample.tsx b/apps/www/src/components/example/CheckboxExample.tsx
index 9c3823c..fe235ef 100644
--- a/apps/www/src/components/example/CheckboxExample.tsx
+++ b/apps/www/src/components/example/CheckboxExample.tsx
@@ -5,8 +5,8 @@ export default function CheckboxExample() {
     <div className="flex gap-3">
       <Checkbox />
       <Checkbox rounded="sm" variant="red" />
-      <Checkbox rounded="lg" variant="yellow" />
-      <Checkbox rounded="full" variant="blue" />
+      <Checkbox rounded="md" variant="yellow" />
+      <Checkbox rounded="lg" variant="blue" />
     </div>
   );
 }
diff --git a/apps/www/src/components/example/DialogExample.tsx b/apps/www/src/components/example/DialogExample.tsx
index b5098e9..8ab0c96 100644
--- a/apps/www/src/components/example/DialogExample.tsx
+++ b/apps/www/src/components/example/DialogExample.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { useState } from "react";
 
 import Dialog from "@/components/neobruu/Dialog";
diff --git a/apps/www/src/components/example/DrawerExample.tsx b/apps/www/src/components/example/DrawerExample.tsx
index 4ba4eef..df05b68 100644
--- a/apps/www/src/components/example/DrawerExample.tsx
+++ b/apps/www/src/components/example/DrawerExample.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Drawer from "@/components/neobruu/Drawer";
 import { useState } from "react";
 import Button from "@/components/neobruu/Button";
diff --git a/apps/www/src/components/example/DropdownExample.tsx b/apps/www/src/components/example/DropdownExample.tsx
index d3bfbf8..8e2d1b9 100644
--- a/apps/www/src/components/example/DropdownExample.tsx
+++ b/apps/www/src/components/example/DropdownExample.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Dropdown from "@/components/neobruu/Dropdown";
 
 export default function DropdownExample() {
diff --git a/apps/www/src/components/example/InputExample.tsx b/apps/www/src/components/example/InputExample.tsx
index 9d5e339..3011af9 100644
--- a/apps/www/src/components/example/InputExample.tsx
+++ b/apps/www/src/components/example/InputExample.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Input from "@/components/neobruu/Input";
 import { ChangeEvent, useState } from "react";
 
diff --git a/apps/www/src/components/example/RadioExample.tsx b/apps/www/src/components/example/RadioExample.tsx
new file mode 100644
index 0000000..1a9b3c3
--- /dev/null
+++ b/apps/www/src/components/example/RadioExample.tsx
@@ -0,0 +1,12 @@
+import Radio from "@/components/neobruu/Radio";
+
+export default function RadioExample() {
+  return (
+    <div className="flex gap-3">
+      <Radio name="example" />
+      <Radio name="example" variant="red" />
+      <Radio name="example" variant="yellow" />
+      <Radio name="example" variant="blue" />
+    </div>
+  );
+}
diff --git a/apps/www/src/components/example/TabsExample.tsx b/apps/www/src/components/example/TabsExample.tsx
index ab8ac53..cde3db9 100644
--- a/apps/www/src/components/example/TabsExample.tsx
+++ b/apps/www/src/components/example/TabsExample.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Tabs from "@/components/neobruu/Tabs";
 
 export default function TabsExample() {
diff --git a/apps/www/src/components/example/TextareaExample.tsx b/apps/www/src/components/example/TextareaExample.tsx
index 4c8cbfe..6a5d55d 100644
--- a/apps/www/src/components/example/TextareaExample.tsx
+++ b/apps/www/src/components/example/TextareaExample.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Textarea from "@/components/neobruu/Textarea";
 import { ChangeEvent, useState } from "react";
 
diff --git a/apps/www/src/components/example/ToastExample.tsx b/apps/www/src/components/example/ToastExample.tsx
index c8e3dc7..c0a5248 100644
--- a/apps/www/src/components/example/ToastExample.tsx
+++ b/apps/www/src/components/example/ToastExample.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { useState } from "react";
 import { HiExclamation } from "react-icons/hi";
 
diff --git a/apps/www/src/components/neobruu/Accordion.tsx b/apps/www/src/components/neobruu/Accordion.tsx
index 26dc92a..888e60d 100644
--- a/apps/www/src/components/neobruu/Accordion.tsx
+++ b/apps/www/src/components/neobruu/Accordion.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useEffect, useMemo, useState } from "react";
 import { cva } from "class-variance-authority";
 import { FiChevronDown } from "react-icons/fi";
diff --git a/apps/www/src/components/neobruu/Alert.tsx b/apps/www/src/components/neobruu/Alert.tsx
index c0da2f4..191b130 100644
--- a/apps/www/src/components/neobruu/Alert.tsx
+++ b/apps/www/src/components/neobruu/Alert.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useState } from "react";
 import { IoClose } from "react-icons/io5";
 import { VariantProps, cva } from "class-variance-authority";
diff --git a/apps/www/src/components/neobruu/Button.tsx b/apps/www/src/components/neobruu/Button.tsx
index c2e09a0..6280750 100644
--- a/apps/www/src/components/neobruu/Button.tsx
+++ b/apps/www/src/components/neobruu/Button.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import Link from "next/link";
 import { VariantProps, cva } from "class-variance-authority";
diff --git a/apps/www/src/components/neobruu/Checkbox.tsx b/apps/www/src/components/neobruu/Checkbox.tsx
index bab1707..024b9f7 100644
--- a/apps/www/src/components/neobruu/Checkbox.tsx
+++ b/apps/www/src/components/neobruu/Checkbox.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { InputHTMLAttributes, useState } from "react";
 import { BsCheck } from "react-icons/bs";
 import { VariantProps, cva } from "class-variance-authority";
@@ -23,7 +23,6 @@ const checkboxVariants = cva(
         md: "rounded-md",
         lg: "rounded-lg",
         xl: "rounded-xl",
-        full: "rounded-full",
       },
     },
     defaultVariants: {
diff --git a/apps/www/src/components/neobruu/Dialog.tsx b/apps/www/src/components/neobruu/Dialog.tsx
index 0f1f4aa..e41cf47 100644
--- a/apps/www/src/components/neobruu/Dialog.tsx
+++ b/apps/www/src/components/neobruu/Dialog.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useEffect, useState } from "react";
 import { IoClose } from "react-icons/io5";
 import { VariantProps, cva } from "class-variance-authority";
diff --git a/apps/www/src/components/neobruu/Drawer.tsx b/apps/www/src/components/neobruu/Drawer.tsx
index 2f86cd2..1bbbe39 100644
--- a/apps/www/src/components/neobruu/Drawer.tsx
+++ b/apps/www/src/components/neobruu/Drawer.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useEffect, useState } from "react";
 import { VariantProps, cva } from "class-variance-authority";
 
diff --git a/apps/www/src/components/neobruu/Dropdown.tsx b/apps/www/src/components/neobruu/Dropdown.tsx
index 724625f..5467a8b 100644
--- a/apps/www/src/components/neobruu/Dropdown.tsx
+++ b/apps/www/src/components/neobruu/Dropdown.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useState } from "react";
 import { FaChevronDown } from "react-icons/fa";
 import { VariantProps, cva } from "class-variance-authority";
diff --git a/apps/www/src/components/neobruu/Radio.tsx b/apps/www/src/components/neobruu/Radio.tsx
new file mode 100644
index 0000000..fd6d045
--- /dev/null
+++ b/apps/www/src/components/neobruu/Radio.tsx
@@ -0,0 +1,47 @@
+'use client';
+import React, { InputHTMLAttributes, useState } from "react";
+import { BsCheck } from "react-icons/bs";
+import { VariantProps, cva } from "class-variance-authority";
+
+const radioVariants = cva(
+  "peer relative appearance-none shrink-0 w-5 h-5 mt-1 rounded-full border-2 hover:shadow-[2px_2px_0px_0px] focus:outline-none focus:ring-offset-0 focus:ring-1 checked:border-black checked:shadow-[2px_2px_0px_0px] disabled:border-steel-400 disabled:bg-steel-400",
+  {
+    variants: {
+      variant: {
+        primary: "border-black bg-orange-400/50 checked:bg-orange-500",
+        secondary: "border-black bg-pink-500/50 checked:bg-pink-500",
+        light: "border-black bg-slate-50/50 checked:bg-slate-50",
+        dark: "border-black bg-zinc-900/50 text-white checked:bg-zinc-900",
+        blue: "border-black bg-blue-500/50 checked:bg-blue-500",
+        yellow: "border-black bg-[#f7cb46]/50 checked:bg-[#f7cb46]",
+        green: "border-black bg-green-500/50 checked:bg-green-500",
+        red: "border-black bg-red-500/50 checked:bg-red-500",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+    },
+  },
+);
+
+const Radio: React.FC<
+  InputHTMLAttributes<HTMLInputElement> & VariantProps<typeof radioVariants>
+> = ({ variant = "primary" }) => {
+  const [checked, setChecked] = useState<boolean>(false);
+
+  return (
+    <label className="relative">
+      <input
+        type="radio"
+        className={`${radioVariants({ variant })}`}
+        checked={checked}
+        onClick={() => setChecked(!checked)}
+      />
+      <BsCheck className="absolute top-0 left-0 w-5 h-5 mt-1 pointer-events-none hidden peer-checked:block stroke-white outline-none" />
+    </label>
+  );
+};
+
+Radio.displayName = "Radio";
+
+export default Radio;
diff --git a/apps/www/src/components/neobruu/Tabs.tsx b/apps/www/src/components/neobruu/Tabs.tsx
index 882b884..00f73fc 100644
--- a/apps/www/src/components/neobruu/Tabs.tsx
+++ b/apps/www/src/components/neobruu/Tabs.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useState, ReactNode } from "react";
 import { VariantProps, cva } from "class-variance-authority";
 import { cn } from "@/lib/utils";
diff --git a/apps/www/src/components/neobruu/Toast.tsx b/apps/www/src/components/neobruu/Toast.tsx
index db7d9cf..2ad2b19 100644
--- a/apps/www/src/components/neobruu/Toast.tsx
+++ b/apps/www/src/components/neobruu/Toast.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useEffect, useState } from "react";
 import { VariantProps, cva } from "class-variance-authority";
 
diff --git a/apps/www/src/data/components.ts b/apps/www/src/data/components.ts
index d722577..8670677 100644
--- a/apps/www/src/data/components.ts
+++ b/apps/www/src/data/components.ts
@@ -9,6 +9,7 @@ import Dropdown from "@/components/neobruu/Dropdown";
 import Drawer from "@/components/neobruu/Drawer";
 import Dialog from "@/components/neobruu/Dialog";
 import Input from "@/components/neobruu/Input";
+import Radio from "@/components/neobruu/Radio";
 import Toast from "@/components/neobruu/Toast";
 import Tooltip from "@/components/neobruu/Tooltip";
 import Tabs from "@/components/neobruu/Tabs";
@@ -29,6 +30,7 @@ import CardExample from "@/components/example/CardExample";
 import AccordionExample from "@/components/example/AccordionExample";
 import DrawerExample from "@/components/example/DrawerExample";
 import DialogExample from "@/components/example/DialogExample";
+import RadioExample from "@/components/example/RadioExample";
 
 type ComponentObj = {
   name: string;
@@ -109,6 +111,12 @@ const components: ComponentObj[] = [
     component: Input,
     exampleComponent: InputExample,
   },
+  {
+    name: "Radio",
+    sub: "Interactive element allowing users to select or deselect options within forms or lists.",
+    component: Radio,
+    exampleComponent: RadioExample,
+  },
   {
     name: "Tabs",
     sub: "Navigation element used to organize content into separate sections or categories, allowing users to switch between them to access different sets of information or functionality.",