diff --git a/app/(site)/docs/components/tabs/page.tsx b/app/(site)/docs/components/tabs/page.tsx
new file mode 100644
index 0000000..47674bb
--- /dev/null
+++ b/app/(site)/docs/components/tabs/page.tsx
@@ -0,0 +1,169 @@
+import { ComponentPreview } from "@/components/docs/component-preview";
+
+export default function TabsPage() {
+  return (
+    <ComponentPreview
+      name="Tabs"
+      description="A tabs component for React Native applications."
+      examples={[
+  {
+    "title": "Default",
+    "value": "default",
+    "content": "import { Tabs } from \"@nativeui/ui\";\n\nexport default function TabsDemo() {\n  return (\n    <Tabs>\n      Click me\n    </Tabs>\n  );\n}",
+    "language": "tsx"
+  }
+]}
+      componentCode={`import * as React from "react";
+import { View, Text, Pressable, Platform } from "react-native";
+import { cn } from "@/lib/utils";
+
+interface TabsProps {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TabsListProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TabsTriggerProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TabsContentProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const TabsContext = React.createContext<{
+  value: string;
+  onValueChange: (value: string) => void;
+}>({
+  value: "",
+  onValueChange: () => {},
+});
+
+const Tabs = React.forwardRef<View, TabsProps>(
+  ({ defaultValue, value, onValueChange, children, className }, ref) => {
+    const [selectedValue, setSelectedValue] = React.useState(
+      value || defaultValue || ""
+    );
+
+    const handleValueChange = React.useCallback(
+      (newValue: string) => {
+        setSelectedValue(newValue);
+        onValueChange?.(newValue);
+      },
+      [onValueChange]
+    );
+
+    return (
+      <TabsContext.Provider
+        value={{
+          value: selectedValue,
+          onValueChange: handleValueChange,
+        }}
+      >
+        <View ref={ref} className={cn("w-full", className)}>
+          {children}
+        </View>
+      </TabsContext.Provider>
+    );
+  }
+);
+
+const TabsList = React.forwardRef<View, TabsListProps>(
+  ({ children, className }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          "flex-row items-center justify-center rounded-xl bg-muted p-1",
+          Platform.OS === "ios" ? "h-12" : "h-14",
+          className
+        )}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+const TabsTrigger = React.forwardRef<View, TabsTriggerProps>(
+  ({ value, children, className }, ref) => {
+    const { value: selectedValue, onValueChange } =
+      React.useContext(TabsContext);
+    const isSelected = selectedValue === value;
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={() => onValueChange(value)}
+        className={cn(
+          "flex-1 items-center justify-center rounded-lg px-4 py-2",
+          Platform.OS === "ios" ? "h-10" : "h-12",
+          isSelected ? "bg-background" : "bg-transparent",
+          className
+        )}
+      >
+        <Text
+          className={cn(
+            "text-base font-medium",
+            isSelected ? "text-foreground" : "text-muted-foreground"
+          )}
+        >
+          {children}
+        </Text>
+      </Pressable>
+    );
+  }
+);
+
+const TabsContent = React.forwardRef<View, TabsContentProps>(
+  ({ value, children, className }, ref) => {
+    const { value: selectedValue } = React.useContext(TabsContext);
+    const isSelected = selectedValue === value;
+
+    if (!isSelected) return null;
+
+    return (
+      <View ref={ref} className={cn("mt-4", className)}>
+        {children}
+      </View>
+    );
+  }
+);
+
+Tabs.displayName = "Tabs";
+TabsList.displayName = "TabsList";
+TabsTrigger.displayName = "TabsTrigger";
+TabsContent.displayName = "TabsContent";
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+`}
+      previewCode={`import { Tabs } from "@nativeui/ui";
+
+export default function TabsDemo() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Tabs>Default Tabs</Tabs>
+      <Tabs variant="destructive">Delete</Tabs>
+      <Tabs variant="outline">Outline</Tabs>
+      <Tabs variant="secondary">Secondary</Tabs>
+      <Tabs variant="ghost">Ghost</Tabs>
+      <Tabs variant="link">Link</Tabs>
+    </div>
+  );
+}`}
+      registryName="tabs"
+      packageName="@nativeui/ui"
+    />
+  );
+}
diff --git a/public/r/tabs.json b/public/r/tabs.json
new file mode 100644
index 0000000..be940df
--- /dev/null
+++ b/public/r/tabs.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:component",
+  "title": "Tabs",
+  "description": "A tabs component for React Native applications.",
+  "dependencies": [
+    "react-native"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "registry/tabs/tabs.tsx",
+      "content": "import * as React from \"react\";\nimport { View, Text, Pressable, Platform } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TabsProps {\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface TabsListProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface TabsTriggerProps {\n  value: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface TabsContentProps {\n  value: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst TabsContext = React.createContext<{\n  value: string;\n  onValueChange: (value: string) => void;\n}>({\n  value: \"\",\n  onValueChange: () => {},\n});\n\nconst Tabs = React.forwardRef<View, TabsProps>(\n  ({ defaultValue, value, onValueChange, children, className }, ref) => {\n    const [selectedValue, setSelectedValue] = React.useState(\n      value || defaultValue || \"\"\n    );\n\n    const handleValueChange = React.useCallback(\n      (newValue: string) => {\n        setSelectedValue(newValue);\n        onValueChange?.(newValue);\n      },\n      [onValueChange]\n    );\n\n    return (\n      <TabsContext.Provider\n        value={{\n          value: selectedValue,\n          onValueChange: handleValueChange,\n        }}\n      >\n        <View ref={ref} className={cn(\"w-full\", className)}>\n          {children}\n        </View>\n      </TabsContext.Provider>\n    );\n  }\n);\n\nconst TabsList = React.forwardRef<View, TabsListProps>(\n  ({ children, className }, ref) => {\n    return (\n      <View\n        ref={ref}\n        className={cn(\n          \"flex-row items-center justify-center rounded-xl bg-muted p-1\",\n          Platform.OS === \"ios\" ? \"h-12\" : \"h-14\",\n          className\n        )}\n      >\n        {children}\n      </View>\n    );\n  }\n);\n\nconst TabsTrigger = React.forwardRef<View, TabsTriggerProps>(\n  ({ value, children, className }, ref) => {\n    const { value: selectedValue, onValueChange } =\n      React.useContext(TabsContext);\n    const isSelected = selectedValue === value;\n\n    return (\n      <Pressable\n        ref={ref}\n        onPress={() => onValueChange(value)}\n        className={cn(\n          \"flex-1 items-center justify-center rounded-lg px-4 py-2\",\n          Platform.OS === \"ios\" ? \"h-10\" : \"h-12\",\n          isSelected ? \"bg-background\" : \"bg-transparent\",\n          className\n        )}\n      >\n        <Text\n          className={cn(\n            \"text-base font-medium\",\n            isSelected ? \"text-foreground\" : \"text-muted-foreground\"\n          )}\n        >\n          {children}\n        </Text>\n      </Pressable>\n    );\n  }\n);\n\nconst TabsContent = React.forwardRef<View, TabsContentProps>(\n  ({ value, children, className }, ref) => {\n    const { value: selectedValue } = React.useContext(TabsContext);\n    const isSelected = selectedValue === value;\n\n    if (!isSelected) return null;\n\n    return (\n      <View ref={ref} className={cn(\"mt-4\", className)}>\n        {children}\n      </View>\n    );\n  }\n);\n\nTabs.displayName = \"Tabs\";\nTabsList.displayName = \"TabsList\";\nTabsTrigger.displayName = \"TabsTrigger\";\nTabsContent.displayName = \"TabsContent\";\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index f97cfb7..f4b42b0 100644
--- a/registry.json
+++ b/registry.json
@@ -253,7 +253,25 @@
           "type": "registry:component"
         }
       ],
-      "dependencies": ["react-native", "react-native-safe-area-context", "@expo/vector-icons"],
+      "dependencies": [
+        "react-native",
+        "react-native-safe-area-context",
+        "@expo/vector-icons"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "tabs",
+      "type": "registry:component",
+      "title": "Tabs",
+      "description": "A tabs component for React Native applications.",
+      "files": [
+        {
+          "path": "registry/tabs/tabs.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "dependencies": ["react-native"],
       "registryDependencies": []
     }
   ]
diff --git a/registry/tabs/tabs.tsx b/registry/tabs/tabs.tsx
new file mode 100644
index 0000000..9760456
--- /dev/null
+++ b/registry/tabs/tabs.tsx
@@ -0,0 +1,134 @@
+import * as React from "react";
+import { View, Text, Pressable, Platform } from "react-native";
+import { cn } from "@/lib/utils";
+
+interface TabsProps {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TabsListProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TabsTriggerProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TabsContentProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const TabsContext = React.createContext<{
+  value: string;
+  onValueChange: (value: string) => void;
+}>({
+  value: "",
+  onValueChange: () => {},
+});
+
+const Tabs = React.forwardRef<View, TabsProps>(
+  ({ defaultValue, value, onValueChange, children, className }, ref) => {
+    const [selectedValue, setSelectedValue] = React.useState(
+      value || defaultValue || ""
+    );
+
+    const handleValueChange = React.useCallback(
+      (newValue: string) => {
+        setSelectedValue(newValue);
+        onValueChange?.(newValue);
+      },
+      [onValueChange]
+    );
+
+    return (
+      <TabsContext.Provider
+        value={{
+          value: selectedValue,
+          onValueChange: handleValueChange,
+        }}
+      >
+        <View ref={ref} className={cn("w-full", className)}>
+          {children}
+        </View>
+      </TabsContext.Provider>
+    );
+  }
+);
+
+const TabsList = React.forwardRef<View, TabsListProps>(
+  ({ children, className }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          "flex-row items-center justify-center rounded-xl bg-muted p-1",
+          Platform.OS === "ios" ? "h-12" : "h-14",
+          className
+        )}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+const TabsTrigger = React.forwardRef<View, TabsTriggerProps>(
+  ({ value, children, className }, ref) => {
+    const { value: selectedValue, onValueChange } =
+      React.useContext(TabsContext);
+    const isSelected = selectedValue === value;
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={() => onValueChange(value)}
+        className={cn(
+          "flex-1 items-center justify-center rounded-lg px-4 py-2",
+          Platform.OS === "ios" ? "h-10" : "h-12",
+          isSelected ? "bg-background" : "bg-transparent",
+          className
+        )}
+      >
+        <Text
+          className={cn(
+            "text-base font-medium",
+            isSelected ? "text-foreground" : "text-muted-foreground"
+          )}
+        >
+          {children}
+        </Text>
+      </Pressable>
+    );
+  }
+);
+
+const TabsContent = React.forwardRef<View, TabsContentProps>(
+  ({ value, children, className }, ref) => {
+    const { value: selectedValue } = React.useContext(TabsContext);
+    const isSelected = selectedValue === value;
+
+    if (!isSelected) return null;
+
+    return (
+      <View ref={ref} className={cn("mt-4", className)}>
+        {children}
+      </View>
+    );
+  }
+);
+
+Tabs.displayName = "Tabs";
+TabsList.displayName = "TabsList";
+TabsTrigger.displayName = "TabsTrigger";
+TabsContent.displayName = "TabsContent";
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };