diff --git a/app/(docs)/docs/layout.tsx b/app/(docs)/docs/layout.tsx
index 6a4b4bd..b66eae2 100644
--- a/app/(docs)/docs/layout.tsx
+++ b/app/(docs)/docs/layout.tsx
@@ -15,7 +15,7 @@ export default function ComponentLayout({
       <div className="hidden lg:block">
         <SideNav />
       </div>
-      <div className="lg:ml-72 mt-16 px-4 lg:px-0">{children}</div>
+      <div className="lg:ml-72 px-4 lg:px-0">{children}</div>
     </div>
   );
 }
diff --git a/app/(marketing)/blogs/layout.tsx b/app/(marketing)/blogs/layout.tsx
index 9eab00f..91b5a34 100644
--- a/app/(marketing)/blogs/layout.tsx
+++ b/app/(marketing)/blogs/layout.tsx
@@ -9,5 +9,5 @@ export default function BlogsLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return <div className="max-w-6xl mx-auto pt-12">{children}</div>;
+  return <div className="max-w-6xl mx-auto pt-12 px-4 lg:px-0">{children}</div>;
 }
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index 162ffc2..3116461 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -222,7 +222,7 @@ export default async function Home() {
               Github Stars
             </Text>
             <Text as="h1" className="text-outlined text-7xl lg:text-8xl">
-              230+
+              300+
             </Text>
             <Image
               src="/images/shooting_star.svg"
diff --git a/app/(sink)/demo/components/page.tsx b/app/(sink)/demo/components/page.tsx
index 3b60d42..d551b44 100644
--- a/app/(sink)/demo/components/page.tsx
+++ b/app/(sink)/demo/components/page.tsx
@@ -6,6 +6,7 @@ import {
   Avatar,
   Badge,
   Button,
+  Checkbox,
   Menu,
   Tabs,
   TabsContent,
@@ -31,6 +32,15 @@ export default function page() {
         <BadgeStyleVariants />
       </div>
 
+      <div className="space-x-4">
+        <Checkbox />
+        <Checkbox variant="outline" />
+        <Checkbox variant="solid" />
+        <Checkbox size="sm" />
+        <Checkbox size="md" />
+        <Checkbox size="lg" />
+      </div>
+
       <div className="flex items-center space-x-4">
         <Avatar>
           <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
diff --git a/app/layout.tsx b/app/layout.tsx
index f78e64b..c60e33c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -29,7 +29,7 @@ export const metadata: Metadata = {
   description:
     "RetroUI - Retro styled component library built with React and TailwindCSS for modern web apps.",
   openGraph: {
-    images: "/banner.png",
+    images: "https://retroui.dev/banner.png",
     title: "Retro Styled React UI Library | Retro UI",
   },
 };
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 911e30d..d691b91 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -1,5 +1,5 @@
 import { navConfig } from "@/config/navigation";
-import { Text } from "@/packages/ui";
+import { Badge, Text } from "@/packages/ui";
 import Link from "next/link";
 
 export default function SideNav() {
@@ -15,6 +15,11 @@ export default function SideNav() {
               {item.children.map((child) => (
                 <Link key={child.title} href={child.href}>
                   {child.title}
+                  {child.tag && (
+                    <Badge size="sm" className="ml-2">
+                      {child.tag}
+                    </Badge>
+                  )}
                 </Link>
               ))}
             </div>
diff --git a/config/components.ts b/config/components.ts
index 230f1a3..2070210 100644
--- a/config/components.ts
+++ b/config/components.ts
@@ -26,7 +26,10 @@ export const componentConfig = {
       name: "card",
       filePath: "packages/ui/Cards/Card.tsx",
     },
-
+    checkbox: {
+      name: "checkbox",
+      filePath: "packages/ui/Form/Checkbox.tsx",
+    },
     dialog: {
       name: "dialog",
       filePath: "packages/ui/Dialog/Dialog.tsx",
@@ -141,6 +144,28 @@ export const componentConfig = {
         () => import("@/preview/components/card-style-testimonial")
       ),
     },
+    "checkbox-style-default": {
+      name: "checkbox-style-default",
+      filePath: "preview/components/checkbox-style-default.tsx",
+      preview: lazy(
+        () => import("@/preview/components/checkbox-style-default")
+      ),
+    },
+    "checkbox-style-variants": {
+      name: "checkbox-style-toggle",
+      filePath: "preview/components/checkbox-style-variants.tsx",
+      preview: lazy(
+        () => import("@/preview/components/checkbox-style-variants")
+      ),
+    },
+    "checkbox-style-sizes": {
+      name: "checkbox-style-default",
+      filePath: "preview/components/checkbox-style-sizes.tsx",
+      preview: lazy(() => import("@/preview/components/checkbox-style-sizes")),
+    },
+    "dropdown-style-default": {
+      name: "dropdown-style-default",
+    },
     "input-style-default": {
       name: "input-style-default",
       filePath: "preview/components/input-style-default.tsx",
diff --git a/config/navigation.ts b/config/navigation.ts
index 452599b..f67cb04 100644
--- a/config/navigation.ts
+++ b/config/navigation.ts
@@ -23,6 +23,7 @@ export const navConfig: INavigationConfig = {
         { title: "Badge", href: `${componentsRoute}/badge` },
         { title: "Button", href: `${componentsRoute}/button` },
         { title: "Card", href: `${componentsRoute}/card` },
+        { title: "Checkbox", href: `${componentsRoute}/checkbox`, tag: "New" },
         { title: "Dialog", href: `${componentsRoute}/dialog` },
         { title: "Input", href: `${componentsRoute}/input` },
         { title: "Menu", href: `${componentsRoute}/menu` },
diff --git a/content/docs/components/checkbox.mdx b/content/docs/components/checkbox.mdx
new file mode 100644
index 0000000..d2bc9a7
--- /dev/null
+++ b/content/docs/components/checkbox.mdx
@@ -0,0 +1,40 @@
+---
+title: Checkbox
+description: Let users confirm or reject an option.
+lastUpdated: 13 Feb, 2024
+links:
+  api_reference: https://www.radix-ui.com/primitives/docs/components/checkbox#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Form/Checkbox.tsx
+---
+
+<ComponentShowcase name="checkbox-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-checkbox class-variance-authority lucide-react
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="checkbox" />
+<br />
+<br />
+
+## Examples
+
+### Variants
+
+<ComponentShowcase name="checkbox-style-variants" />
+<br />
+<br />
+
+### Sizes
+
+<ComponentShowcase name="checkbox-style-sizes" />
diff --git a/package.json b/package.json
index a64cc8c..c9c8b3d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@headlessui/react": "^2.1.9",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
diff --git a/packages/ui/Form/Checkbox.tsx b/packages/ui/Form/Checkbox.tsx
new file mode 100644
index 0000000..960e490
--- /dev/null
+++ b/packages/ui/Form/Checkbox.tsx
@@ -0,0 +1,49 @@
+import { cn } from "@/lib/utils";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva, VariantProps } from "class-variance-authority";
+import { Check } from "lucide-react";
+
+const checkboxVariants = cva("border-black border-2", {
+  variants: {
+    variant: {
+      default: " data-[state=checked]:bg-primary-400",
+      outline: "",
+      solid: "data-[state=checked]:bg-black *:text-white",
+    },
+    size: {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+interface CheckboxProps
+  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,
+    VariantProps<typeof checkboxVariants> {}
+
+export const Checkbox = ({
+  className,
+  size,
+  variant,
+  ...props
+}: CheckboxProps) => (
+  <CheckboxPrimitive.Root
+    className={cn(
+      checkboxVariants({
+        size,
+        variant,
+      }),
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="h-full w-full">
+      <Check className="h-full w-full" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+);
diff --git a/packages/ui/Form/index.tsx b/packages/ui/Form/index.tsx
index c297335..980578a 100644
--- a/packages/ui/Form/index.tsx
+++ b/packages/ui/Form/index.tsx
@@ -1,2 +1,3 @@
-export * from "./Input"
-export * from "./Textarea"
\ No newline at end of file
+export * from "./Input";
+export * from "./Textarea";
+export * from "./Checkbox";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec056b5..af34681 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.1.4
+        version: 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@radix-ui/react-dialog':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -641,6 +644,9 @@ packages:
   '@radix-ui/primitive@1.1.0':
     resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
 
+  '@radix-ui/primitive@1.1.1':
+    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
+
   '@radix-ui/react-accordion@1.2.1':
     resolution: {integrity: sha512-bg/l7l5QzUjgsh8kjwDFommzAshnUsuVMV5NM56QVCm+7ZckYdd9P/ExR8xG/Oup0OajVxNLaHJ1tb8mXk+nzQ==}
     peerDependencies:
@@ -680,6 +686,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-checkbox@1.1.4':
+    resolution: {integrity: sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collapsible@1.1.1':
     resolution: {integrity: sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==}
     peerDependencies:
@@ -715,6 +734,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-compose-refs@1.1.1':
+    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-context@1.1.0':
     resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
     peerDependencies:
@@ -864,6 +892,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-presence@1.1.2':
+    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.0.0':
     resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
     peerDependencies:
@@ -877,6 +918,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.0.2':
+    resolution: {integrity: sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-roving-focus@1.1.0':
     resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
     peerDependencies:
@@ -899,6 +953,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.1.2':
+    resolution: {integrity: sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.0':
     resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
@@ -935,6 +998,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.0':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.1.0':
     resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
     peerDependencies:
@@ -3739,6 +3811,8 @@ snapshots:
 
   '@radix-ui/primitive@1.1.0': {}
 
+  '@radix-ui/primitive@1.1.1': {}
+
   '@radix-ui/react-accordion@1.2.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -3777,6 +3851,22 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-checkbox@1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-collapsible@1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -3811,6 +3901,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-compose-refs@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
   '@radix-ui/react-context@1.1.0(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       react: 18.0.0
@@ -3967,6 +4063,16 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-presence@1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-slot': 1.1.0(@types/react@18.0.0)(react@18.0.0)
@@ -3976,6 +4082,15 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-primitive@2.0.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -4000,6 +4115,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-slot@1.1.2(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
   '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       react: 18.0.0
@@ -4026,6 +4148,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-use-previous@1.1.0(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
   '@radix-ui/react-use-rect@1.1.0(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       '@radix-ui/rect': 1.1.0
diff --git a/preview/components/checkbox-style-default.tsx b/preview/components/checkbox-style-default.tsx
new file mode 100644
index 0000000..f5ad8ed
--- /dev/null
+++ b/preview/components/checkbox-style-default.tsx
@@ -0,0 +1,10 @@
+import { Checkbox, Text } from "@/packages/ui";
+
+export default function CheckboxStyleDefault() {
+  return (
+    <div className="flex gap-2 items-center">
+      <Checkbox />
+      <Text>Accept terms and conditions</Text>
+    </div>
+  );
+}
diff --git a/preview/components/checkbox-style-sizes.tsx b/preview/components/checkbox-style-sizes.tsx
new file mode 100644
index 0000000..afc0e84
--- /dev/null
+++ b/preview/components/checkbox-style-sizes.tsx
@@ -0,0 +1,11 @@
+import { Checkbox } from "@/packages/ui";
+
+export default function CheckboxStyleSizes() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox size="sm" />
+      <Checkbox />
+      <Checkbox size="lg" />
+    </div>
+  );
+}
diff --git a/preview/components/checkbox-style-variants.tsx b/preview/components/checkbox-style-variants.tsx
new file mode 100644
index 0000000..90577ae
--- /dev/null
+++ b/preview/components/checkbox-style-variants.tsx
@@ -0,0 +1,11 @@
+import { Checkbox, Text } from "@/packages/ui";
+
+export default function CheckboxStyleVariants() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox />
+      <Checkbox variant="outline" />
+      <Checkbox variant="solid" />
+    </div>
+  );
+}
diff --git a/types/index.d.ts b/types/index.d.ts
index 162dd81..164f5e6 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,6 +1,7 @@
 export interface INavItem {
   title: string;
   href: string;
+  tag?: string;
 }
 
 export interface INavItemWithChildren {