diff --git a/src/lib/components/ui/tabs/Tabs.svelte b/src/lib/components/ui/tabs/Tabs.svelte
new file mode 100644
index 0000000..db0bf9e
--- /dev/null
+++ b/src/lib/components/ui/tabs/Tabs.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Tabs as BitsTabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  // import type { SvelteComponent } from 'svelte';
+
+  interface Props {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    children?: Snippet;
+  }
+
+  let {
+    value = $bindable(),
+    onValueChange,
+    className,
+    children,
+  }: Props = $props();
+</script>
+
+<BitsTabs.Root bind:value {onValueChange} class={`w-full ${className}`}>
+  {@render children?.()}
+</BitsTabs.Root>
diff --git a/src/lib/components/ui/tabs/TabsContent.svelte b/src/lib/components/ui/tabs/TabsContent.svelte
new file mode 100644
index 0000000..f1f554a
--- /dev/null
+++ b/src/lib/components/ui/tabs/TabsContent.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Tabs as BitsTabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value: string;
+    className?: string;
+    children?: Snippet;
+  }
+
+  let { value, className, children }: Props = $props();
+</script>
+
+<BitsTabs.Content {value} class={`flex-1 outline-none ${className}`}>
+  {@render children?.()}
+</BitsTabs.Content>
diff --git a/src/lib/components/ui/tabs/TabsList.svelte b/src/lib/components/ui/tabs/TabsList.svelte
new file mode 100644
index 0000000..2841932
--- /dev/null
+++ b/src/lib/components/ui/tabs/TabsList.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Tabs as BitsTabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    className?: string;
+    children?: Snippet;
+  }
+
+  let { className, children }: Props = $props();
+</script>
+
+<BitsTabs.List
+  class={`tabs-box tabs flex gap-2 border-b border-gray-200  dark:border-gray-700 ${className}`}
+>
+  {@render children?.()}
+</BitsTabs.List>
diff --git a/src/lib/components/ui/tabs/TabsTrigger.svelte b/src/lib/components/ui/tabs/TabsTrigger.svelte
new file mode 100644
index 0000000..bb45ad5
--- /dev/null
+++ b/src/lib/components/ui/tabs/TabsTrigger.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Tabs as BitsTabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value: string;
+    className?: string;
+    children?: Snippet;
+  }
+
+  let { value, className, children }: Props = $props();
+</script>
+
+<BitsTabs.Trigger
+  {value}
+  class={`tab transition-colors data-[state='active']:bg-white data-[state='active']:shadow data-[state='inactive']:hover:bg-gray-200
+    ${className}`}
+>
+  {@render children?.()}
+</BitsTabs.Trigger>
diff --git a/src/lib/components/ui/tabs/index.ts b/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 0000000..69fe143
--- /dev/null
+++ b/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabsList } from './TabsList.svelte';
+export { default as TabsTrigger } from './TabsTrigger.svelte';
+export { default as TabsContent } from './TabsContent.svelte';