From 53b7f24b620f30ed5d373f4407a3d12252bc2361 Mon Sep 17 00:00:00 2001
From: ruru <142723369+ruru-m07@users.noreply.github.com>
Date: Sat, 17 Aug 2024 13:54:28 +0530
Subject: [PATCH] refactor(components): refactor context and update CLIs

---
 apps/www/app/global.css                       |  26 +-
 apps/www/app/layout.tsx                       |   5 +-
 apps/www/app/playground/page.tsx              | 565 ++++++++++++++++++
 apps/www/app/source.ts                        |   1 -
 apps/www/components/SwitchEvent.tsx           |  19 +
 apps/www/components/animationToggle.tsx       |   6 +-
 apps/www/components/ui/ModeToggle.tsx         |  18 +
 apps/www/components/ui/card.tsx               |  21 +
 apps/www/content/docs/animation.mdx           |   5 +
 apps/www/content/docs/cli.mdx                 |   2 +-
 apps/www/content/docs/components/avatar.mdx   | 186 +++---
 apps/www/content/docs/components/badge.mdx    | 156 ++---
 apps/www/content/docs/components/button.mdx   | 225 +++----
 apps/www/content/docs/components/checkbox.mdx | 124 ++--
 apps/www/content/docs/components/input.mdx    | 236 ++------
 apps/www/content/docs/components/spinner.mdx  |  49 +-
 apps/www/content/docs/components/switch.mdx   | 134 +++--
 apps/www/content/docs/components/tabs.mdx     |  67 +--
 apps/www/content/docs/components/textarea.mdx | 156 ++---
 apps/www/content/docs/installation.mdx        |   4 +-
 apps/www/content/docs/provider.mdx            |   4 +
 apps/www/content/docs/ruru-json.mdx           |   5 +
 apps/www/mdx-components.tsx                   |   4 +
 apps/www/package.json                         |   2 +
 .../public/registry/components/avatar.json    |   2 +-
 .../public/registry/components/button.json    |   2 +-
 .../public/registry/components/select.json    |   2 +-
 .../public/registry/components/switch.json    |   2 +-
 apps/www/public/registry/components/tabs.json |   2 +-
 .../public/registry/components/tooltip.json   |   2 +-
 .../registry/interface/RuruContextType.json   |   4 +
 .../registry/interface/RuruProviderProps.json |   4 +
 .../interface/RuruThemeProviderProps.json     |   4 +
 apps/www/public/registry/interface/index.json |  11 +
 .../registry/providers/components/index.json  |  10 +
 .../registry/providers/components/theme.json  |  10 +
 apps/www/public/registry/providers/index.json |  12 +
 apps/www/public/schema.json                   |  55 ++
 apps/www/registry/components.ts               |  14 +
 apps/www/registry/registry.ts                 |   3 +-
 apps/www/scripts/build-registry.mts           | 145 +++--
 apps/www/tailwind.config.js                   |  26 +-
 apps/www/tsconfig.json                        |  23 +-
 packages/cli/src/commands/add.ts              |   8 +-
 packages/cli/src/commands/init.ts             | 140 ++++-
 packages/cli/src/utils/get-config.ts          |  16 +-
 packages/cli/src/utils/registry/index.ts      |  60 +-
 packages/cli/src/utils/registry/schema.ts     |  17 +
 .../utils/transformers/transform-import.ts    |  23 +
 packages/ui/package.json                      |   4 +
 packages/ui/src/components/avatar.tsx         |  50 +-
 packages/ui/src/components/checkbox.tsx       |  14 +-
 packages/ui/src/components/select.tsx         |   4 +-
 packages/ui/src/components/switch.tsx         |  15 +-
 packages/ui/src/components/tabs.tsx           |  41 +-
 packages/ui/src/components/tooltip.tsx        |  56 +-
 .../RuruContextType.ts                        |   0
 .../RuruProviderProps.ts                      |   2 +-
 .../RuruThemeProviderProps.ts                 |   1 -
 packages/ui/src/provider/index.tsx            |  13 +-
 packages/ui/src/provider/theme.tsx            |   8 +-
 pnpm-lock.yaml                                |  26 +
 62 files changed, 1969 insertions(+), 882 deletions(-)
 create mode 100644 apps/www/app/playground/page.tsx
 create mode 100644 apps/www/components/SwitchEvent.tsx
 create mode 100644 apps/www/components/ui/ModeToggle.tsx
 create mode 100644 apps/www/components/ui/card.tsx
 create mode 100644 apps/www/content/docs/animation.mdx
 create mode 100644 apps/www/content/docs/provider.mdx
 create mode 100644 apps/www/content/docs/ruru-json.mdx
 create mode 100644 apps/www/public/registry/interface/RuruContextType.json
 create mode 100644 apps/www/public/registry/interface/RuruProviderProps.json
 create mode 100644 apps/www/public/registry/interface/RuruThemeProviderProps.json
 create mode 100644 apps/www/public/registry/interface/index.json
 create mode 100644 apps/www/public/registry/providers/components/index.json
 create mode 100644 apps/www/public/registry/providers/components/theme.json
 create mode 100644 apps/www/public/registry/providers/index.json
 create mode 100644 apps/www/public/schema.json
 create mode 100644 apps/www/registry/components.ts
 rename packages/ui/src/{interface => interfaces}/RuruContextType.ts (100%)
 rename packages/ui/src/{interface => interfaces}/RuruProviderProps.ts (95%)
 rename packages/ui/src/{interface => interfaces}/RuruThemeProviderProps.ts (99%)

diff --git a/apps/www/app/global.css b/apps/www/app/global.css
index 7e4c53f..c493916 100644
--- a/apps/www/app/global.css
+++ b/apps/www/app/global.css
@@ -18,6 +18,10 @@
   --headless-color: 250 80% 54%;
   --mdx-color: 0 0% 9%;
   --ui-color: 220deg 91% 54%;
+  --shiki-light: #4c4f69;
+  --shiki-dark: #cdd6f4;
+  --shiki-light-bg: #eff1f5;
+  --shiki-dark-bg: #0f0f0f !important;
 }
 
 .dark {
@@ -49,8 +53,12 @@
   --card: 230 40% 26.3% !important;
 }
 
+/* #nd-docs-layout {
+  background: var(--popover);
+} */
+
 .words_width_animat {
-  animation: words_width_animation 4s normal;
+  animation: words_width_animation 2.5s normal;
 }
 
 .words_width_lens_body {
@@ -66,11 +74,11 @@
 }
 
 .words_interfaces::after {
-  animation: words_interfaces_after_animation 3.5s normal;
+  animation: words_interfaces_after_animation 1.5s normal;
 }
 
 .words_interfaces::before {
-  animation: words_interfaces_before_animation 3.5s normal;
+  animation: words_interfaces_before_animation 1.5s normal;
 }
 
 @keyframes words_width_animation {
@@ -82,6 +90,10 @@
     top: -28px;
     opacity: 0.5;
   }
+  75% {
+    top: -28px;
+    opacity: 1;
+  }
   100% {
     top: -28px;
     opacity: 1;
@@ -126,10 +138,10 @@
     width: 0;
     opacity: 0;
   }
-  65% {
+  /* 65% {
     width: 205px;
     opacity: 0.5;
-  }
+  } */
   100% {
     width: 205px;
     opacity: 1;
@@ -141,10 +153,10 @@
     height: 0;
     opacity: 0;
   }
-  65% {
+  /* 65% {
     height: 60px;
     opacity: 0.5;
-  }
+  } */
   100% {
     height: 60px;
     opacity: 1;
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index e3b27f6..5656366 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -6,7 +6,9 @@ import { GeistSans } from "geist/font/sans";
 import type { ReactNode } from "react";
 import { RuruProvider } from "ruru-ui/provider";
 import "fumadocs-ui/style.css";
+import "fumadocs-ui/twoslash.css";
 import { ScrollArea } from "@/components/scroll-area";
+import { Analytics } from "@vercel/analytics/react";
 
 export const metadata = createMetadata({
   title: {
@@ -29,8 +31,9 @@ export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={GeistSans.className} suppressHydrationWarning>
       <body>
+        <Analytics />
         <RootProvider>
-          <RuruProvider>
+          <RuruProvider disableBaseColor>
             <ScrollArea className="h-screen">{children}</ScrollArea>
           </RuruProvider>
         </RootProvider>
diff --git a/apps/www/app/playground/page.tsx b/apps/www/app/playground/page.tsx
new file mode 100644
index 0000000..0aed718
--- /dev/null
+++ b/apps/www/app/playground/page.tsx
@@ -0,0 +1,565 @@
+"use client";
+
+import React from "react";
+import Card from "@/components/ui/card";
+import { ModeToggle } from "@/components/ui/ModeToggle";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CubeIcon,
+  PersonIcon,
+} from "@radix-ui/react-icons";
+import { Button } from "ruru-ui/components/button";
+import { Spinner } from "ruru-ui/components/spinner";
+import {
+  Avatar,
+  AvatarGroup,
+  AvatarWithBadge,
+} from "ruru-ui/components/avatar";
+import { Badge } from "ruru-ui/components/badge";
+import { Checkbox } from "ruru-ui/components/checkbox";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "ruru-ui/components/tooltip";
+import { Input, SearchInput } from "ruru-ui/components/input";
+import { Textarea } from "ruru-ui/components/textarea";
+import { Tabs, Tab } from "ruru-ui/components/tabs";
+import { Switch } from "ruru-ui/components/switch";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+  SelectSeparator,
+} from "ruru-ui/components/select";
+import AnimationToggle from "@/components/animationToggle";
+
+const Playground = () => {
+  return (
+    <div className="flex flex-col items-center justify-center bg-card">
+      <ModeToggle />
+      <AnimationToggle />
+
+      <Card>
+        <Button size={"small"}>default</Button>
+        <Button>default</Button>
+        <Button size={"large"}>default</Button>
+      </Card>
+
+      {/* 
+      <H1>
+        Types
+      </H1> */}
+      <Card>
+        <Button variant={"secondary"}>Upload</Button>
+
+        <Button variant={"tertiary"}>Upload</Button>
+
+        <Button variant={"error"}>Upload</Button>
+
+        <Button variant={"warning"}>Upload</Button>
+      </Card>
+
+      <Card>
+        <Button prefix={<ArrowLeftIcon />}>Upload</Button>
+        <Button prefix={<ArrowLeftIcon />} suffix={<ArrowRightIcon />}>
+          Upload
+        </Button>
+        <Button suffix={<ArrowRightIcon />}>Upload</Button>
+      </Card>
+
+      <Card>
+        <Button variant={"secondary"} disabled size={"small"}>
+          default
+        </Button>
+        <Button variant={"secondary"} disabled>
+          default
+        </Button>
+        <Button variant={"secondary"} disabled size={"large"}>
+          default
+        </Button>
+      </Card>
+
+      <Card>
+        <Button loading disabled size={"small"}>
+          default
+        </Button>
+        <Button loading disabled>
+          default
+        </Button>
+        <Button loading disabled size={"large"}>
+          default
+        </Button>
+      </Card>
+
+      {/* <Card>
+        <Link href={"/"} className={buttonVariants({ variant: "secondary" })}>
+          Click here
+        </Link>
+      </Card> */}
+
+      {/* <Card>
+        <button
+          style={{ backgroundColor: color }}
+          onClick={() => setColor(color === "blue" ? "green" : "blue")}
+        >
+          Click me to change color
+        </button>
+      </Card> */}
+
+      <Card>
+        <Spinner size={10} />
+        <Spinner />
+        <Spinner size={50} />
+      </Card>
+
+      <Card>
+        <Avatar placeholder="RU" src={"https://github.com/ruru-m07.png"} />
+        <Avatar
+          size={50}
+          placeholder="RU"
+          src={"https://github.com/ruru-m07.png"}
+        />
+        <Avatar
+          size={70}
+          placeholder="RU"
+          src={"https://github.com/ruru-m07.png"}
+        />
+      </Card>
+
+      <Card>
+        <AvatarGroup
+          members={[
+            { src: "https://github.com/ruru-m07.png", alt: "ruru-m07" },
+            { src: "https://github.com/leerob.png", alt: "leerob" },
+            { src: "https://github.com/evilrabbit.png", alt: "evilrabbit" },
+            { src: "https://github.com/rauchg.png", alt: "rauchg" },
+            { src: "https://github.com/shadcn.png", alt: "shadcn" },
+          ]}
+          size={40}
+        />
+
+        <AvatarGroup
+          limit={4}
+          members={[
+            { src: "https://github.com/ruru-m07.png", alt: "ruru-m07" },
+            { src: "https://github.com/leerob.png", alt: "leerob" },
+            { src: "https://github.com/evilrabbit.png", alt: "evilrabbit" },
+            { src: "https://github.com/rauchg.png", alt: "rauchg" },
+            { src: "https://github.com/shadcn.png", alt: "shadcn" },
+          ]}
+        />
+
+        <AvatarGroup
+          limit={4}
+          members={[
+            { src: "https://github.com/ruru-m07.png", alt: "ruru-m07" },
+            { src: "https://github.com/leerob.png", alt: "leerob" },
+            { src: "https://github.com/evilrabbit.png", alt: "evilrabbit" },
+            { src: "https://github.com/rauchg.png", alt: "rauchg" },
+            { src: "https://github.com/shadcn.png", alt: "shadcn" },
+          ]}
+          size={40}
+        />
+      </Card>
+
+      <Card>
+        <AvatarWithBadge
+          src="https://github.com/ruru-m07.png"
+          badgeSrc="https://github.com/github.png"
+          size={50}
+        />
+        <AvatarWithBadge
+          src="https://github.com/ruru-m07.png"
+          badgeSrc="https://github.com/github.png"
+        />
+        <AvatarWithBadge
+          src="https://github.com/ruru-m07.png"
+          badgeSrc="https://github.com/github.png"
+          size={70}
+        />
+      </Card>
+
+      <Card>
+        <div className="space-y-2">
+          <div className="space-x-2">
+            <Badge variant="gray" size="lg" icon={<CubeIcon />}>
+              gray
+            </Badge>
+            <Badge variant="gray" size="md" icon={<CubeIcon />}>
+              gray
+            </Badge>
+            <Badge variant="gray" size="sm" icon={<CubeIcon />}>
+              gray
+            </Badge>
+
+            <Badge variant="gray-subtle" size="sm" icon={<CubeIcon />}>
+              gray-subtle
+            </Badge>
+            <Badge variant="gray-subtle" size="md" icon={<CubeIcon />}>
+              gray-subtle
+            </Badge>
+            <Badge variant="gray-subtle" size="lg" icon={<CubeIcon />}>
+              gray-subtle
+            </Badge>
+          </div>
+
+          <div className="space-x-2">
+            <Badge variant="blue" size="lg" icon={<CubeIcon />}>
+              blue
+            </Badge>
+            <Badge variant="blue" size="md" icon={<CubeIcon />}>
+              blue
+            </Badge>
+            <Badge variant="blue" size="sm" icon={<CubeIcon />}>
+              blue
+            </Badge>
+
+            <Badge variant="blue-subtle" size="sm" icon={<CubeIcon />}>
+              blue-subtle
+            </Badge>
+            <Badge variant="blue-subtle" size="md" icon={<CubeIcon />}>
+              blue-subtle
+            </Badge>
+            <Badge variant="blue-subtle" size="lg" icon={<CubeIcon />}>
+              blue-subtle
+            </Badge>
+          </div>
+
+          <div className="space-x-2">
+            <Badge variant="purple" size="lg" icon={<CubeIcon />}>
+              purple
+            </Badge>
+            <Badge variant="purple" size="md" icon={<CubeIcon />}>
+              purple
+            </Badge>
+            <Badge variant="purple" size="sm" icon={<CubeIcon />}>
+              purple
+            </Badge>
+
+            <Badge variant="purple-subtle" size="sm" icon={<CubeIcon />}>
+              purple-subtle
+            </Badge>
+            <Badge variant="purple-subtle" size="md" icon={<CubeIcon />}>
+              purple-subtle
+            </Badge>
+            <Badge variant="purple-subtle" size="lg" icon={<CubeIcon />}>
+              purple-subtle
+            </Badge>
+          </div>
+
+          <div className="space-x-2">
+            <Badge variant="amber" size="lg" icon={<CubeIcon />}>
+              amber
+            </Badge>
+            <Badge variant="amber" size="md" icon={<CubeIcon />}>
+              amber
+            </Badge>
+            <Badge variant="amber" size="sm" icon={<CubeIcon />}>
+              amber
+            </Badge>
+
+            <Badge variant="amber-subtle" size="sm" icon={<CubeIcon />}>
+              amber-subtle
+            </Badge>
+            <Badge variant="amber-subtle" size="md" icon={<CubeIcon />}>
+              amber-subtle
+            </Badge>
+            <Badge variant="amber-subtle" size="lg" icon={<CubeIcon />}>
+              amber-subtle
+            </Badge>
+          </div>
+
+          <div className="space-x-2">
+            <Badge variant="red" size="lg" icon={<CubeIcon />}>
+              red
+            </Badge>
+            <Badge variant="red" size="md" icon={<CubeIcon />}>
+              red
+            </Badge>
+            <Badge variant="red" size="sm" icon={<CubeIcon />}>
+              red
+            </Badge>
+
+            <Badge variant="red-subtle" size="sm" icon={<CubeIcon />}>
+              red-subtle
+            </Badge>
+            <Badge variant="red-subtle" size="md" icon={<CubeIcon />}>
+              red-subtle
+            </Badge>
+            <Badge variant="red-subtle" size="lg" icon={<CubeIcon />}>
+              red-subtle
+            </Badge>
+          </div>
+
+          <div className="space-x-2">
+            <Badge variant="pink" size="lg" icon={<CubeIcon />}>
+              pink
+            </Badge>
+            <Badge variant="pink" size="md" icon={<CubeIcon />}>
+              pink
+            </Badge>
+            <Badge variant="pink" size="sm" icon={<CubeIcon />}>
+              pink
+            </Badge>
+
+            <Badge variant="pink-subtle" size="sm" icon={<CubeIcon />}>
+              pink-subtle
+            </Badge>
+            <Badge variant="pink-subtle" size="md" icon={<CubeIcon />}>
+              pink-subtle
+            </Badge>
+            <Badge variant="pink-subtle" size="lg" icon={<CubeIcon />}>
+              pink-subtle
+            </Badge>
+          </div>
+
+          <div className="space-x-2">
+            <Badge variant="green" size="lg" icon={<CubeIcon />}>
+              green
+            </Badge>
+            <Badge variant="green" size="md" icon={<CubeIcon />}>
+              green
+            </Badge>
+            <Badge variant="green" size="sm" icon={<CubeIcon />}>
+              green
+            </Badge>
+
+            <Badge variant="green-subtle" size="sm" icon={<CubeIcon />}>
+              green-subtle
+            </Badge>
+            <Badge variant="green-subtle" size="md" icon={<CubeIcon />}>
+              green-subtle
+            </Badge>
+            <Badge variant="green-subtle" size="lg" icon={<CubeIcon />}>
+              green-subtle
+            </Badge>
+          </div>
+
+          <div className="space-x-2">
+            <Badge variant="teal" size="lg" icon={<CubeIcon />}>
+              teal
+            </Badge>
+            <Badge variant="teal" size="md" icon={<CubeIcon />}>
+              teal
+            </Badge>
+            <Badge variant="teal" size="sm" icon={<CubeIcon />}>
+              teal
+            </Badge>
+
+            <Badge variant="teal-subtle" size="sm" icon={<CubeIcon />}>
+              teal-subtle
+            </Badge>
+            <Badge variant="teal-subtle" size="md" icon={<CubeIcon />}>
+              teal-subtle
+            </Badge>
+            <Badge variant="teal-subtle" size="lg" icon={<CubeIcon />}>
+              teal-subtle
+            </Badge>
+          </div>
+
+          <div className="space-x-2">
+            <Badge variant="inverted" size="lg" icon={<CubeIcon />}>
+              inverted
+            </Badge>
+            <Badge variant="inverted" size="md" icon={<CubeIcon />}>
+              inverted
+            </Badge>
+            <Badge variant="inverted" size="sm" icon={<CubeIcon />}>
+              inverted
+            </Badge>
+          </div>
+        </div>
+      </Card>
+
+      <Card>
+        <Badge variant="green-subtle" size="sm">
+          sm
+        </Badge>
+        <Badge variant="green-subtle" size="md">
+          md
+        </Badge>
+        <Badge variant="green-subtle" size="lg">
+          lg
+        </Badge>
+      </Card>
+
+      <Card>
+        <Checkbox />
+        <Checkbox indeterminate />
+      </Card>
+
+      <div className="my-24">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger className="underline">
+              {/* <Button variant="secondary"> @ruru </Button> */}
+              @ruru
+            </TooltipTrigger>
+            <TooltipContent>
+              <p> author of ruru UI </p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      <Card className="grid grid-cols-3 gap-3 pr-3">
+        <div />
+        <div />
+        <div />
+        <Input placeholder="Enter your name" />
+        <Input prefix={<PersonIcon />} placeholder="Enter your name" />
+        <Input suffix={<PersonIcon />} placeholder="Enter your name" />
+        <Input
+          prefix={<CubeIcon />}
+          suffix={<CubeIcon />}
+          placeholder="Enter your name"
+        />
+        <Input
+          prefix={"https://"}
+          suffix={".com"}
+          placeholder="Enter your domain name"
+        />
+        <Input
+          prefix={"https://"}
+          prefixStyling={false}
+          suffix={".com"}
+          suffixStyling={false}
+          placeholder="Enter your domain name"
+        />
+        <Input type="file" placeholder="select your file" />
+        <Input disabled placeholder="disabled" />
+        <Input
+          disabled
+          placeholder="disabled"
+          value={"disabled with values. "}
+        />
+        <SearchInput placeholder="Enter some text..." />
+        <SearchInput enablePrefixStyling placeholder="Enter some text..." />
+
+        <div />
+
+        <Input label={"name"} placeholder="Enter your name" />
+        <Input
+          label={"name"}
+          error={"enter name "}
+          placeholder="Enter your name"
+        />
+      </Card>
+
+      <Card className="grid space-y-3">
+        <div />
+        <Textarea placeholder="Enter your message" style={{ minHeight: 100 }} />
+        <Textarea
+          className="w-96"
+          label="message"
+          placeholder="Enter your message"
+          style={{ minHeight: 100 }}
+        />
+        <Textarea
+          className="w-96"
+          label="message"
+          error="There has been an error."
+          placeholder="Enter your message"
+          style={{ minHeight: 100 }}
+        />
+      </Card>
+
+      <div className="w-[80%]">
+        <Tabs items={["Apple", "Orange", "Mango"]}>
+          <Tab value={"Apple"}>Apple</Tab>
+          <Tab value={"Orange"}>Orange</Tab>
+          <Tab value={"Mango"}>Mango</Tab>
+        </Tabs>
+      </div>
+
+      <div className="w-[80%]">
+        <Tabs disabled items={["Apple", "Orange", "Mango"]}>
+          <Tab value={"Apple"}>Apple</Tab>
+          <Tab value={"Orange"}>Orange</Tab>
+          <Tab value={"Mango"}>Mango</Tab>
+        </Tabs>
+      </div>
+
+      <div className="w-[80%]">
+        <Tabs defaultIndex={2} items={["Apple", "Orange", "Mango"]}>
+          <Tab value={"Apple"}>Apple</Tab>
+          <Tab value={"Orange"}>Orange</Tab>
+          <Tab value={"Mango"}>Mango</Tab>
+        </Tabs>
+      </div>
+
+      <Card>
+        <Switch />
+        <Switch disabled />
+        <div className="flex items-center space-x-2">
+          <Switch id="airplane-mode" />
+          <label htmlFor="airplane-mode">toggle Mode</label>
+        </div>
+      </Card>
+
+      <Card>
+        <Select>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select a fruit" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Fruits</SelectLabel>
+              <SelectSeparator />
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+              <SelectItem value="blueberry">Blueberry</SelectItem>
+              <SelectItem value="grapes">Grapes</SelectItem>
+              <SelectItem value="pineapple">Pineapple</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+
+        <Select>
+          <SelectTrigger disabled className="w-[180px]">
+            <SelectValue placeholder="Select a fruit" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Fruits</SelectLabel>
+              <SelectSeparator />
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+              <SelectItem value="blueberry">Blueberry</SelectItem>
+              <SelectItem value="grapes">Grapes</SelectItem>
+              <SelectItem value="pineapple">Pineapple</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+
+        <Select defaultValue="banana">
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select a fruit" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Fruits</SelectLabel>
+              <SelectSeparator />
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+              <SelectItem value="blueberry">Blueberry</SelectItem>
+              <SelectItem value="grapes">Grapes</SelectItem>
+              <SelectItem value="pineapple">Pineapple</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </Card>
+
+      <div className="my-52" />
+    </div>
+  );
+};
+
+export default Playground;
diff --git a/apps/www/app/source.ts b/apps/www/app/source.ts
index 76a8855..ef7cbd1 100644
--- a/apps/www/app/source.ts
+++ b/apps/www/app/source.ts
@@ -1,7 +1,6 @@
 import { map } from "@/.map";
 import { createMDXSource, defaultSchemas } from "fumadocs-mdx";
 import { BuildPageTreeOptions, loader } from "fumadocs-core/source";
-import { PageTree } from "fumadocs-core/server";
 import { z } from "zod";
 
 // @ts-ignore
diff --git a/apps/www/components/SwitchEvent.tsx b/apps/www/components/SwitchEvent.tsx
new file mode 100644
index 0000000..4b38674
--- /dev/null
+++ b/apps/www/components/SwitchEvent.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import React, { useState } from "react";
+import { Switch } from "ruru-ui/components/switch";
+
+const SwiychEvent = (): React.ReactNode => {
+  const [value, setValue] = useState<boolean>(false);
+  return (
+    <div className="flex flex-col justify-center items-center">
+      <div className="flex items-center space-x-2">
+        <Switch onCheckedChange={(e) => setValue(e)} id="toggle-animation" />
+        <label htmlFor="toggle value"> toggle value </label>
+      </div>
+      <p>{String(value)}</p>
+    </div>
+  );
+};
+
+export default SwiychEvent;
diff --git a/apps/www/components/animationToggle.tsx b/apps/www/components/animationToggle.tsx
index ef251f3..6aa62bd 100644
--- a/apps/www/components/animationToggle.tsx
+++ b/apps/www/components/animationToggle.tsx
@@ -8,7 +8,11 @@ const AnimationToggle = () => {
   const { setAnimation } = useRuru();
   return (
     <div className="flex items-center space-x-2">
-      <Switch onCheckedChange={(e) => setAnimation(e)} id="toggle-animation" />
+      <Switch
+        defaultChecked
+        onCheckedChange={(e) => setAnimation(e)}
+        id="toggle-animation"
+      />
       <label htmlFor="toggle-animation"> toggle animation </label>
     </div>
   );
diff --git a/apps/www/components/ui/ModeToggle.tsx b/apps/www/components/ui/ModeToggle.tsx
new file mode 100644
index 0000000..87525c2
--- /dev/null
+++ b/apps/www/components/ui/ModeToggle.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "ruru-ui/theme";
+
+import { Button } from "ruru-ui/components/button";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <div className="flex my-10 space-x-5">
+      <Button onClick={() => setTheme("light")}>Light</Button>
+      <Button onClick={() => setTheme("dark")}>Dark</Button>
+      <Button onClick={() => setTheme("system")}>system</Button>
+    </div>
+  );
+}
diff --git a/apps/www/components/ui/card.tsx b/apps/www/components/ui/card.tsx
new file mode 100644
index 0000000..29fda6e
--- /dev/null
+++ b/apps/www/components/ui/card.tsx
@@ -0,0 +1,21 @@
+import { cn } from "ruru-ui/utils";
+import React from "react";
+
+export default function Card({
+  children,
+  className,
+}: Readonly<{
+  children: React.ReactNode;
+  className?: string;
+}>) {
+  return (
+    <div
+      className={cn(
+        "rounded-md space-x-3 w-[80%] py-4 flex items-center justify-around my-2 border-[1.5px] border-input ",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/www/content/docs/animation.mdx b/apps/www/content/docs/animation.mdx
new file mode 100644
index 0000000..2755207
--- /dev/null
+++ b/apps/www/content/docs/animation.mdx
@@ -0,0 +1,5 @@
+---
+title: Animation
+description: The Animation component is used to animate elements.
+---
+
diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx
index db4caca..7d0b979 100644
--- a/apps/www/content/docs/cli.mdx
+++ b/apps/www/content/docs/cli.mdx
@@ -46,7 +46,7 @@ bunx --bun ruru-ui@latest init
 ◇ Configure the import alias for components: @/components/ui
 ◇ Configure the import alias for utils: @/lib/utils
 ◇ Would you like to use RSC ? Yes
-◇ Write configuration to components.json. Proceed? Yes
+◇ Write configuration to ruru.json. Proceed? Yes
 
     ```
 
diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
index 7a0e593..903a52f 100644
--- a/apps/www/content/docs/components/avatar.mdx
+++ b/apps/www/content/docs/components/avatar.mdx
@@ -71,30 +71,31 @@ The `Avatar` component is used to represent a user or entity.
     </div>
   </Tab>
   <Tab value="Code">
-   ```tsx
-    import { Avatar } from "ruru-ui/components/avatar";
+```tsx
+// [!code word:Avatar]
+import { Avatar } from "ruru-ui/components/avatar";
 
-    export function AvatarDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <Avatar
-                size={50}
-                placeholder="RU"
-                src={"https://github.com/ruru-m07.png"}
-            />
-            <Avatar
-                placeholder="RU"
-                src={"https://github.com/ruru-m07.png"}
-            />
-            <Avatar
-                size={70}
-                placeholder="RU"
-                src={"https://github.com/ruru-m07.png"}
-            />
-        </div>
-      )
-    }
-    ```
+export function Demo() {
+  return (
+    <div className={"flex justify-between gap-5"}>
+        <Avatar
+            size={50}
+            placeholder="RU"
+            src={"https://github.com/ruru-m07.png"}
+        />
+        <Avatar
+            placeholder="RU"
+            src={"https://github.com/ruru-m07.png"}
+        />
+        <Avatar
+            size={70}
+            placeholder="RU"
+            src={"https://github.com/ruru-m07.png"}
+        />
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -103,17 +104,18 @@ The `Avatar` component is used to represent a user or entity.
 
 | Prop            | Description                                                           | Type   | Default |
 | --------------- | --------------------------------------------------------------------- | ------ | ------- |
-| **src**         | The URL of the image to be displayed.                                 | string | -       |
-| **placeholder** | The placeholder text to be displayed when the image is not available. | string | -       |
+| **src**         | The URL of the image to be displayed.                                 | `string` | -       |
+| **placeholder** | The placeholder text to be displayed when the image is not available. | `string` | -       |
 | **size**        | The size of the avatar.                                               | number | 30      |
-| **className**   | The class name to be applied to the avatar.                           | string | -       |
+| **className**   | The class name to be applied to the avatar.                           | `string` | -       |
 
 ## AvatarGroup
 
 The `AvatarGroup` component is used to display multiple avatars in a group.
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex flex-col items-center justify-center"} value="Preview">
+  <Tab value="Preview">
+    <div className={"flex flex-col items-center justify-center"} >
         <AvatarGroup
           members={[
             { src: "https://github.com/ruru-m07.png", alt: "ruru-m07" },
@@ -174,26 +176,54 @@ The `AvatarGroup` component is used to display multiple avatars in a group.
           aClassName="-ml-[26px] "
           lnClassName="-ml-[26px] "
         />
+      </div>
     </Tab>
-    <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { AvatarGroup } from "ruru-ui/components/avatar";
+    <Tab className={"-mt-4"} value="Code">
+```tsx
+// [!code word:AvatarGroup]
+// [!code word:limit]
+import { AvatarGroup } from "ruru-ui/components/avatar";
 
-    export function AvatarGroupDemo() {
-      return (
-        <AvatarGroup
-          members={[
-            { src: "https://github.com/ruru-m07.png", alt: "ruru-m07" },
-            { src: "https://github.com/leerob.png", alt: "leerob" },
-            { src: "https://github.com/evilrabbit.png", alt: "evilrabbit" },
-            { src: "https://github.com/rauchg.png", alt: "rauchg" },
-            { src: "https://github.com/shadcn.png", alt: "shadcn" },
-          ]}
-          size={40}
-        />
-      )
-    }
-    ```
+export function Demo() {
+  return (
+    <div className={"flex flex-col items-center justify-center"} >
+      <AvatarGroup
+        members={[
+          { src: "https://github.com/ruru-m07.png", alt: "ruru-m07" },
+          { src: "https://github.com/leerob.png", alt: "leerob" },
+          { src: "https://github.com/evilrabbit.png", alt: "evilrabbit" },
+          { src: "https://github.com/rauchg.png", alt: "rauchg" },
+          { src: "https://github.com/shadcn.png", alt: "shadcn" },
+        ]}
+        className={"mb-5"}
+        size={40}
+      />
+      <AvatarGroup
+        limit={4} // [!code highlight] 
+        members={[
+          { src: "https://github.com/ruru-m07.png", alt: "ruru-m07" },
+          { src: "https://github.com/leerob.png", alt: "leerob" },
+          { src: "https://github.com/evilrabbit.png", alt: "evilrabbit" },
+          { src: "https://github.com/rauchg.png", alt: "rauchg" },
+          { src: "https://github.com/shadcn.png", alt: "shadcn" },
+        ]}
+      />
+
+      <AvatarGroup
+        limit={4} // [!code highlight]
+        members={[
+          { src: "https://github.com/ruru-m07.png", alt: "ruru-m07" },
+          { src: "https://github.com/leerob.png", alt: "leerob" },
+          { src: "https://github.com/evilrabbit.png", alt: "evilrabbit" },
+          { src: "https://github.com/rauchg.png", alt: "rauchg" },
+          { src: "https://github.com/shadcn.png", alt: "shadcn" },
+        ]}
+        size={40}
+      />
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -202,10 +232,10 @@ The `AvatarGroup` component is used to display multiple avatars in a group.
 
 | Prop          | Description                                                                  | Type                                    | Default |
 | ------------- | ---------------------------------------------------------------------------- | --------------------------------------- | ------- |
-| **members**   | An array of objects containing the `src` and `alt` properties of the avatar. | Array\<\{ src: string; alt: string \}\> | -       |
-| **limit**     | The maximum number of avatars to be displayed.                               | number                                  | -       |
-| **size**      | The size of the avatars.                                                     | number                                  | 30      |
-| **className** | The class name to be applied to the avatar group.                            | string                                  | -       |
+| **members**   | An array of objects containing the `src` and `alt` properties of the avatar. | `Array<{ src: string; alt: string }>` | -       |
+| **limit**     | The maximum number of avatars to be displayed.                               | `number`                                  | -       |
+| **size**      | The size of the avatars.                                                     | `number`                                  | 30      |
+| **className** | The class name to be applied to the avatar group.                            | `string`                                  | -       |
 
 ## AvatarWithBadge
 
@@ -253,30 +283,32 @@ The `AvatarWithBadge` component is used to display an avatar with a badge.
     />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-   import { AvatarWithBadge } from "ruru-ui/components/avatar";
+```tsx
+// [!code word:AvatarWithBadge]
+// [!code word:badgeSrc]
+import { AvatarWithBadge } from "ruru-ui/components/avatar";
 
-    export function AvatarWithBadgeDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <AvatarWithBadge
-                src="https://github.com/ruru-m07.png"
-                badgeSrc="https://github.com/github.png"
-                size={50}
-            />
-            <AvatarWithBadge
-                src="https://github.com/ruru-m07.png"
-                badgeSrc="https://github.com/github.png"
-            />
-            <AvatarWithBadge
-                src="https://github.com/ruru-m07.png"
-                badgeSrc="https://github.com/github.png"
-                size={70}
-            />
-        </div>
-      )
-    }
-    ```
+export function Demo() {
+  return (
+    <div className={"flex justify-between gap-5"}>
+        <AvatarWithBadge
+            src="https://github.com/ruru-m07.png"
+            badgeSrc="https://github.com/github.png" // [!code highlight]
+            size={50}
+        />
+        <AvatarWithBadge
+            src="https://github.com/ruru-m07.png"
+            badgeSrc="https://github.com/github.png" // [!code highlight]
+        />
+        <AvatarWithBadge
+            src="https://github.com/ruru-m07.png"
+            badgeSrc="https://github.com/github.png" // [!code highlight]
+            size={70}
+        />
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -285,8 +317,8 @@ The `AvatarWithBadge` component is used to display an avatar with a badge.
 
 | Prop            | Description                                                           | Type   | Default |
 | --------------- | --------------------------------------------------------------------- | ------ | ------- |
-| **src**         | The URL of the image to be displayed.                                 | string | -       |
-| **badgeSrc**    | The URL of the badge image to be displayed.                           | string | -       |
-| **size**        | The size of the avatar.                                               | number | 30      |
-| **className**   | The class name to be applied to the avatar.                           | string | -       |
-| **placeholder** | The placeholder text to be displayed when the image is not available. | string | -       |
+| **src**         | The URL of the image to be displayed.                                 | `string` | -       |
+| **badgeSrc**    | The URL of the badge image to be displayed.                           | `string` | -       |
+| **size**        | The size of the avatar.                                               | `number` | 30      |
+| **className**   | The class name to be applied to the avatar.                           | `string` | -       |
+| **placeholder** | The placeholder text to be displayed when the image is not available. | `string` | -       |
diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx
index b45f31b..cc4bb34 100644
--- a/apps/www/content/docs/components/badge.mdx
+++ b/apps/www/content/docs/components/badge.mdx
@@ -53,15 +53,16 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
     <Badge variant="green-subtle" size="md" >green-subtle</Badge>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Badge } from "ruru-ui/components/badge";
-
-    export function BadgeDemo() {
-      return (
-        <Badge variant="green-subtle" size="md" >green-subtle</Badge>
-      )
-    }
-    ```
+```tsx
+// [!code word:Badge]
+import { Badge } from "ruru-ui/components/badge";
+
+export function Demo() {
+  return (
+    <Badge variant="green-subtle" size="md" >green-subtle</Badge>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -94,33 +95,34 @@ The variant of the badge (e.g., "gray", "red", etc...).
     <Badge variant="inverted" size="md" >inverted</Badge>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Badge } from "ruru-ui/components/badge";
-
-    export function BadgeDemo() {
-      return (
-        <div>
-            <Badge variant="gray" size="md" >gray</Badge>
-            <Badge variant="gray-subtle" size="md" >gray-subtle</Badge>
-            <Badge variant="blue" size="md" >blue</Badge>
-            <Badge variant="blue-subtle" size="md" >blue-subtle</Badge>
-            <Badge variant="purple" size="md" >purple</Badge>
-            <Badge variant="purple-subtle" size="md" >purple-subtle</Badge>
-            <Badge variant="amber" size="md" >amber</Badge>
-            <Badge variant="amber-subtle" size="md" >amber-subtle</Badge>
-            <Badge variant="red" size="md" >red</Badge>
-            <Badge variant="red-subtle" size="md" >red-subtle</Badge>
-            <Badge variant="pink" size="md" >pink</Badge>
-            <Badge variant="pink-subtle" size="md" >pink-subtle</Badge>
-            <Badge variant="green" size="md" >green</Badge>
-            <Badge variant="green-subtle" size="md" >Green-Subtle</Badge>
-            <Badge variant="teal" size="md" >teal</Badge>
-            <Badge variant="teal-subtle" size="md" >teal-subtle</Badge>
-            <Badge variant="inverted" size="md" >inverted</Badge>
-        </div>
-      )
-    }
-    ```
+```tsx
+//  [!code word:variant]
+import { Badge } from "ruru-ui/components/badge";
+
+export function BadgeDemo() {
+  return (
+    <div>
+        <Badge variant="gray" size="md" >gray</Badge>
+        <Badge variant="gray-subtle" size="md" >gray-subtle</Badge>
+        <Badge variant="blue" size="md" >blue</Badge>
+        <Badge variant="blue-subtle" size="md" >blue-subtle</Badge>
+        <Badge variant="purple" size="md" >purple</Badge>
+        <Badge variant="purple-subtle" size="md" >purple-subtle</Badge>
+        <Badge variant="amber" size="md" >amber</Badge>
+        <Badge variant="amber-subtle" size="md" >amber-subtle</Badge>
+        <Badge variant="red" size="md" >red</Badge>
+        <Badge variant="red-subtle" size="md" >red-subtle</Badge>
+        <Badge variant="pink" size="md" >pink</Badge>
+        <Badge variant="pink-subtle" size="md" >pink-subtle</Badge>
+        <Badge variant="green" size="md" >green</Badge>
+        <Badge variant="green-subtle" size="md" >Green-Subtle</Badge>
+        <Badge variant="teal" size="md" >teal</Badge>
+        <Badge variant="teal-subtle" size="md" >teal-subtle</Badge>
+        <Badge variant="inverted" size="md" >inverted</Badge>
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -130,31 +132,32 @@ The variant of the badge (e.g., "gray", "red", etc...).
 The size of the badge (e.g., "sm", "md", "lg").
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between"} value="Preview" >
+  <Tab className={"flex justify-between items-center"} value="Preview" >
     <Badge variant="gray-subtle" size="sm" >gray</Badge>
     <Badge variant="gray-subtle" size="md" >gray</Badge>
     <Badge variant="gray-subtle" size="lg" >gray</Badge>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Badge } from "ruru-ui/components/badge";
-
-    export function BadgeDemo() {
-      return (
-        <div className={"flex justify-between"}>
-            <Badge variant="green-subtle" size="sm">
-                sm
-            </Badge>
-            <Badge variant="green-subtle" size="md">
-                md
-            </Badge>
-            <Badge variant="green-subtle" size="lg">
-                lg
-            </Badge>
-        </div>
-      )
-    }
-    ```
+```tsx
+//  [!code word:size]
+import { Badge } from "ruru-ui/components/badge";
+
+export function BadgeDemo() {
+  return (
+    <div className={"flex justify-between items-center"}>
+        <Badge variant="green-subtle" size="sm">
+            sm
+        </Badge>
+        <Badge variant="green-subtle" size="md">
+            md
+        </Badge>
+        <Badge variant="green-subtle" size="lg">
+            lg
+        </Badge>
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -164,31 +167,32 @@ The size of the badge (e.g., "sm", "md", "lg").
 An optional icon to display before the badge content.
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between"} value="Preview" >
+  <Tab className={"flex justify-between items-center"} value="Preview" >
     <Badge variant="gray-subtle" size="sm" icon={<CubeIcon />} >gray</Badge>
     <Badge variant="gray-subtle" size="md" icon={<CubeIcon />} >gray</Badge>
     <Badge variant="gray-subtle" size="lg" icon={<CubeIcon />} >gray</Badge>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Badge } from "ruru-ui/components/badge";
-
-    export function BadgeDemo() {
-      return (
-        <div className={"flex justify-between"}>
-            <Badge variant="gray-subtle" size="sm">
-                sm
-            </Badge>
-            <Badge variant="gray-subtle" size="md">
-                md
-            </Badge>
-            <Badge variant="gray-subtle" size="lg">
-                lg
-            </Badge>
-        </div>
-      )
-    }
-    ```
+```tsx
+//  [!code word:icon]
+import { Badge } from "ruru-ui/components/badge";
+
+export function BadgeDemo() {
+  return (
+    <div className={"flex justify-between items-center"}>
+      <Badge variant="gray-subtle" size="sm" icon={<CubeIcon />} >
+        gray
+      </Badge>
+      <Badge variant="gray-subtle" size="md" icon={<CubeIcon />} >
+        gray
+      </Badge>
+      <Badge variant="gray-subtle" size="lg" icon={<CubeIcon />} >
+        gray
+      </Badge>
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx
index 6546211..c56d79b 100644
--- a/apps/www/content/docs/components/button.mdx
+++ b/apps/www/content/docs/components/button.mdx
@@ -57,18 +57,21 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
 
 <Tabs items={["Preview", "Code"]}>
   <Tab className={"flex justify-center"} value="Preview" >
-    <Button>Click me</Button>
+    <Button> Click me! </Button>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Button } from "ruru-ui/components/button";
-
-    export function ButtonDemo() {
-      return (
-          <Button>Button</Button>
-      )
-    }
-    ```
+```tsx
+//  [!code word:Button]
+import { Button } from "ruru-ui/components/button";
+
+export function Demo() {
+  return (
+    <div className={"flex justify-between items-center"}>
+      <Button> Click me! </Button>
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -109,7 +112,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 The `Button` component is like a chameleon, it can change its appearance to match different moods and situations. It's like having a button for every occasion!
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between gap-5"} value="Preview" >
+  <Tab className={"flex flex-wrap justify-around"} value="Preview" >
     <Button> Default </Button>
     <Button variant="secondary"> Secondary </Button>
     <Button variant="tertiary"> Tertiary </Button>
@@ -117,21 +120,22 @@ The `Button` component is like a chameleon, it can change its appearance to matc
     <Button variant="warning"> Warning </Button>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Button } from "ruru-ui/components/button";
-
-    export function ButtonDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <Button> Default </Button>
-            <Button variant="secondary"> Secondary </Button>
-            <Button variant="tertiary"> Tertiary </Button>
-            <Button variant="error"> Error </Button>
-            <Button variant="warning"> Warning </Button>
-        </div>
-      )
-    }
-    ```
+```tsx
+// [!code word:variant]
+import { Button } from "ruru-ui/components/button";
+
+export function ButtonDemo() {
+  return (
+    <div className={"flex justify-between gap-5"}>
+        <Button> Default </Button>
+        <Button variant="secondary"> Secondary </Button>
+        <Button variant="tertiary"> Tertiary </Button>
+        <Button variant="error"> Error </Button>
+        <Button variant="warning"> Warning </Button>
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -153,25 +157,26 @@ So go ahead, unleash your creativity and choose the perfect variant for your but
 The `Button` component comes in a variety of sizes to suit your needs. Whether you want a small button for a subtle touch or a large button that commands attention, we've got you covered!
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between gap-5"} value="Preview" >
+  <Tab className={"flex justify-between items-center"} value="Preview" >
     <Button size="small"> Small </Button>
     <Button> Default </Button>
     <Button size="large"> Large </Button>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Button } from "ruru-ui/components/button";
-
-    export function ButtonDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <Button size="small"> Small </Button>
-            <Button> Default </Button>
-            <Button size="large"> Large </Button>
-        </div>
-      )
-    }
-    ```
+```tsx
+// [!code word:size]
+import { Button } from "ruru-ui/components/button";
+
+export function ButtonDemo() {
+  return (
+    <div className={"flex justify-between items-center"}>
+        <Button size="small"> Small </Button>
+        <Button> Default </Button>
+        <Button size="large"> Large </Button>
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -192,7 +197,7 @@ So go ahead, choose the perfect size for your button and make a statement that c
 The `Button` component allows you to add a prefix and suffix to your button. This is perfect for when you need to add a little extra flair or information to your button.
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between gap-5"} value="Preview" >
+  <Tab className={"flex justify-between items-center"} value="Preview" >
     <Button prefix={<ArrowLeftIcon />}>Upload</Button>
     <Button prefix={<ArrowLeftIcon />} suffix={<ArrowRightIcon />}>
         Upload
@@ -200,22 +205,24 @@ The `Button` component allows you to add a prefix and suffix to your button. Thi
     <Button suffix={<ArrowRightIcon />}>Upload</Button>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Button } from "ruru-ui/components/button";
-    import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
-    
-    export function ButtonDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <Button prefix={<ArrowLeftIcon />}>Upload</Button>
-            <Button prefix={<ArrowLeftIcon />} suffix={<ArrowRightIcon />}>
-                Upload
-            </Button>
-            <Button suffix={<ArrowRightIcon />}>Upload</Button>
-        </div>
-      )
-    }
-    ```
+```tsx
+// [!code word:prefix]
+// [!code word:suffix]
+import { Button } from "ruru-ui/components/button";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+
+export function ButtonDemo() {
+  return (
+    <div className={"flex justify-between items-center"}>
+        <Button prefix={<ArrowLeftIcon />}>Upload</Button>
+        <Button prefix={<ArrowLeftIcon />} suffix={<ArrowRightIcon />}>
+            Upload
+        </Button>
+        <Button suffix={<ArrowRightIcon />}>Upload</Button>
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -234,7 +241,7 @@ So go ahead, add a prefix and suffix to your button and make it stand out from t
 The `Button` component allows you to show a loading spinner when the button is in a loading state. This is perfect for when you need to indicate to the user that something is happening in the background.
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between gap-5"} value="Preview" >
+  <Tab className={"flex justify-between items-center"} value="Preview" >
     <Button loading variant={"secondary"} disabled size={"small"}>
         default
     </Button>
@@ -246,25 +253,26 @@ The `Button` component allows you to show a loading spinner when the button is i
     </Button>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Button } from "ruru-ui/components/button";
-
-    export function ButtonDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-          <Button loading variant={"secondary"} disabled size={"small"}>
-              default
-          </Button>
-          <Button loading variant={"secondary"} disabled>
-              default
-          </Button>
-          <Button loading variant={"secondary"} disabled size={"large"}>
-              default
-          </Button>
-        </div>
-      )
-    }
-    ```
+```tsx
+// [!code word:loading]
+import { Button } from "ruru-ui/components/button";
+
+export function ButtonDemo() {
+  return (
+    <div className={"flex justify-between items-center"}>
+      <Button loading variant={"secondary"} disabled size={"small"}>
+          default
+      </Button>
+      <Button loading variant={"secondary"} disabled>
+          default
+      </Button>
+      <Button loading variant={"secondary"} disabled size={"large"}>
+          default
+      </Button>
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -282,7 +290,7 @@ So go ahead, show a loading spinner on your button and let your users know that
 The `Button` component allows you to disable the button by passing the `disabled` prop. This is perfect for when you need to prevent the user from interacting with the button.
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between gap-5"} value="Preview" >
+  <Tab className={"flex justify-between items-center"} value="Preview" >
     <Button disabled> Default </Button>
     <Button disabled variant="secondary"> Secondary </Button>
     <Button disabled variant="tertiary"> Tertiary </Button>
@@ -290,21 +298,22 @@ The `Button` component allows you to disable the button by passing the `disabled
     <Button disabled variant="warning"> Warning </Button>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Button } from "ruru-ui/components/button";
-
-    export function ButtonDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <Button disabled> Default </Button>
-            <Button disabled variant="secondary"> Secondary </Button>
-            <Button disabled variant="tertiary"> Tertiary </Button>
-            <Button disabled variant="error"> Error </Button>
-            <Button disabled variant="warning"> Warning </Button>
-        </div>
-      )
-    }
-    ```
+```tsx
+// [!code word:disabled]
+import { Button } from "ruru-ui/components/button";
+
+export function ButtonDemo() {
+  return (
+    <div className={"flex justify-between items-center"}>
+        <Button disabled> Default </Button>
+        <Button disabled variant="secondary"> Secondary </Button>
+        <Button disabled variant="tertiary"> Tertiary </Button>
+        <Button disabled variant="error"> Error </Button>
+        <Button disabled variant="warning"> Warning </Button>
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
@@ -314,25 +323,27 @@ The `Button` component allows you to disable the button by passing the `disabled
 #### Icon
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-center gap-5"} value="Preview" >
+  <Tab className={"flex justify-center items-center"} value="Preview" >
     <Button variant="secondary" size="icon"> 
         <ChevronRightIcon />
     </Button>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Button } from "ruru-ui/components/button";
-
-    export function ButtonDemo() {
-      return (
-        <div className={"flex justify-center gap-5"}>
-            <Button variant="secondary" size="icon">
-                <ChevronRightIcon />
-            </Button>
-        </div>
-      )
-    }
-    ```
+```tsx
+// [!code word:size]
+// [!code word:"icon"]
+import { Button } from "ruru-ui/components/button";
+
+export function ButtonDemo() {
+  return (
+    <div className={"flex justify-center items-center"}>
+        <Button variant="secondary" size="icon">
+            <ChevronRightIcon />
+        </Button>
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx
index c9b333e..fbec83f 100644
--- a/apps/www/content/docs/components/checkbox.mdx
+++ b/apps/www/content/docs/components/checkbox.mdx
@@ -54,23 +54,19 @@ To use the Checkbox component, import it from `ruru-ui` and include it in your c
 This example shows a basic checkbox.
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between gap-5"} value="Preview" >
+  <Tab className={"flex items-center"} value="Preview" >
     <Checkbox />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Checkbox } from "ruru-ui/components/checkbox";
-
-    export function CheckboxDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <Checkbox />
-        </div>
-      )
-    }
-    ```
-    </Tab>
+```tsx
+// [!code word:Checkbox]
+import { Checkbox } from "ruru-ui/components/checkbox";
 
+export function Demo() {
+  return <Checkbox />
+}
+```
+ </Tab>
 </Tabs>
 
 ## Examples
@@ -82,21 +78,18 @@ This example shows a basic checkbox.
 This example demonstrates a checkbox in an indeterminate state.
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between gap-5"} value="Preview" >
+  <Tab className={"flex items-center"} value="Preview" >
     <Checkbox indeterminate />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Checkbox } from "ruru-ui/components/checkbox";
-
-    export function CheckboxDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <Checkbox indeterminate />
-        </div>
-      )
-    }
-    ```
+```tsx
+// [!code word:indeterminate]
+import { Checkbox } from "ruru-ui/components/checkbox";
+
+export function CheckboxDemo() {
+  return <Checkbox indeterminate />
+}
+```
     </Tab>
 
 </Tabs>
@@ -106,21 +99,18 @@ This example demonstrates a checkbox in an indeterminate state.
 This example shows a checkbox in a disabled state, making it unclickable.
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between gap-5"} value="Preview" >
+  <Tab className={"flex items-center"} value="Preview" >
     <Checkbox disabled />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Checkbox } from "ruru-ui/components/checkbox";
-
-    export function CheckboxDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <Checkbox disabled />
-        </div>
-      )
-    }
-    ```
+```tsx
+// [!code word:disabled]
+import { Checkbox } from "ruru-ui/components/checkbox";
+
+export function CheckboxDemo() {
+  return <Checkbox disabled />
+}
+```
     </Tab>
 
 </Tabs>
@@ -130,21 +120,18 @@ This example shows a checkbox in a disabled state, making it unclickable.
 This example shows a checkbox that is checked by default.
 
 <Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-between gap-5"} value="Preview" >
+  <Tab className={"flex items-center"} value="Preview" >
     <Checkbox checked />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Checkbox } from "ruru-ui/components/checkbox";
-
-    export function CheckboxDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <Checkbox checked />
-        </div>
-      )
-    }
-    ```
+```tsx
+// [!code word:checked]
+import { Checkbox } from "ruru-ui/components/checkbox";
+
+export function CheckboxDemo() {
+  return <Checkbox checked />
+}
+```
     </Tab>
 
 </Tabs>
@@ -166,25 +153,26 @@ This example shows a checkbox with an associated label.
     </div>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Checkbox } from "ruru-ui/components/checkbox";
-
-    export function CheckboxDemo() {
-      return (
-        <div className={"flex justify-between gap-5"}>
-            <div className="flex items-center space-x-2">
-                <Checkbox id="terms" />
-                <label
-                    htmlFor="terms"
-                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                >
-                    Accept terms and conditions
-                </label>
-            </div>
-        </div>
-      )
-    }
-    ```
+```tsx
+// [!code word:policy]
+import { Checkbox } from "ruru-ui/components/checkbox"; // [!code highlight]
+
+export function CheckboxDemo() {
+  return (
+    <div className={"flex justify-between gap-5"}>
+        <div className="flex items-center space-x-2"> // [!code highlight]
+            <Checkbox id="policy" /> // [!code highlight]
+            <label // [!code highlight]
+                htmlFor="policy" // [!code highlight]
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" // [!code highlight]
+            > // [!code highlight]
+                Accept terms and conditions // [!code highlight]
+            </label> // [!code highlight]
+        </div> // [!code highlight]
+    </div>
+  )
+}
+```
     </Tab>
 
 </Tabs>
diff --git a/apps/www/content/docs/components/input.mdx b/apps/www/content/docs/components/input.mdx
index 582d4e1..1d073c2 100644
--- a/apps/www/content/docs/components/input.mdx
+++ b/apps/www/content/docs/components/input.mdx
@@ -53,36 +53,19 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
     <Input placeholder="Enter text" />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { Input } from "ruru-ui/components/input";
-
-    export function InputDemo() {
-      return <Input placeholder="Enter text" />;
-    }
-    ```
-
-  </Tab>
-</Tabs>
-
-## Variants
-
-### Default Input
-
-<Tabs items={["Preview", "Code"]}>
-<Tab className={"flex justify-center"} value="Preview" >
-<Input placeholder="Enter text" />
-</Tab>
-<Tab className={"-mt-8"} value="Code">
 ```tsx
+// [!code word:Input]
 import { Input } from "ruru-ui/components/input";
 
-export function DefaultInputDemo() {
+export function Demo() {
   return <Input placeholder="Enter text" />;
 }
 ```
- </Tab>
+  </Tab>
 </Tabs>
 
+## Variants
+
 ### Input with Label
 
 <Tabs items={["Preview", "Code"]}>
@@ -90,15 +73,15 @@ export function DefaultInputDemo() {
     <Input label="Email" placeholder="Enter your email" />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { Input } from "ruru-ui/components/input";
-
-    export function LabelInputDemo() {
-      return <Input label="Email" placeholder="Enter your email" />;
-    }
+```tsx
+// [!code word:label]
+import { Input } from "ruru-ui/components/input";
 
-    ```
+export function InputDemo() {
+  return <Input label="Email" placeholder="Enter your email" />;
+}
 
+```
   </Tab>
 </Tabs>
 
@@ -110,19 +93,20 @@ export function DefaultInputDemo() {
   <Input suffix=".com" placeholder="Website" />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { Input } from "ruru-ui/components/input";
-
-    export function PrefixSuffixInputDemo() {
-      return (
-        <div className={"flex justify-center gap-5"}>
-          <Input prefix="@" placeholder="Username" />
-          <Input suffix=".com" placeholder="Website" />
-        </div>
-      );
-    }
-    ```
+```tsx
+// [!code word:prefix]
+// [!code word:suffix]
+import { Input } from "ruru-ui/components/input";
 
+export function InputDemo() {
+  return (
+    <div className={"flex justify-center gap-5"}>
+      <Input prefix="@" placeholder="Username" />
+      <Input suffix=".com" placeholder="Website" />
+    </div>
+  );
+}
+```
   </Tab>
 </Tabs>
 
@@ -133,15 +117,15 @@ export function DefaultInputDemo() {
     <Input error="Invalid input" placeholder="Enter text" />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { Input } from "ruru-ui/components/input";
-
-    export function ErrorInputDemo() {
-      return <Input error="Invalid input" placeholder="Enter text" />;
-    }
+```tsx
+// [!code word:error]
+import { Input } from "ruru-ui/components/input";
 
-    ```
+export function InputDemo() {
+  return <Input error="Invalid input" placeholder="Enter text" />;
+}
 
+```
   </Tab>
 </Tabs>
 
@@ -152,17 +136,36 @@ export function DefaultInputDemo() {
     <SearchInput placeholder="Search..." />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { SearchInput } from "ruru-ui/components/input";
+```tsx
+// [!code word:SearchInput]
+import { SearchInput } from "ruru-ui/components/input";
 
-    export function SearchInputDemo() {
-      return <SearchInput placeholder="Search..." />;
-    }
-    ```
+export function Demo() {
+  return <SearchInput placeholder="Search..." />;
+}
+```
+  </Tab>
+</Tabs>
+
+### Disabled Input
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center"} value="Preview" >
+    <Input disabled placeholder="Enter text" />
+  </Tab>
+  <Tab className={"-mt-8"} value="Code">
+```tsx
+// [!code word:disabled]
+import { Input } from "ruru-ui/components/input";
 
+export function InputExample() {
+  return <Input disabled placeholder="Enter text" />;
+}
+```
   </Tab>
 </Tabs>
 
+
 ## Props
 
 ### Input
@@ -181,125 +184,6 @@ export function DefaultInputDemo() {
 
 ### SearchInput
 
-| Name                  | Type      | Default | Description                          |
-| --------------------- | --------- | ------- | ------------------------------------ |
-| `enablePrefixStyling` | `boolean` | `false` | Flag to apply styling to the prefix. |
-
-## Examples
-
-### Default Input Example
-
-<Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-center"} value="Preview" >
-    <Input placeholder="Enter text" />
-  </Tab>
-    <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { Input } from "ruru-ui/components/input";
-
-    export function DefaultInputExample() {
-      return <Input placeholder="Enter text" />;
-    }
-
-    ```
-
-  </Tab>
-</Tabs>
-
-### Input with Label Example
-
-<Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-center"} value="Preview" >
-    <Input label="Email" placeholder="Enter your email" />
-  </Tab>
-  <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { Input } from "ruru-ui/components/input";
-
-    export function LabelInputExample() {
-      return <Input label="Email" placeholder="Enter your email" />;
-    }
-    ```
-
-  </Tab>
-</Tabs>
-
-### Input with Prefix and Suffix Example
-
-<Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-center gap-5"} value="Preview" >
-    <Input prefix="@" placeholder="Username" />
-  <Input suffix=".com" placeholder="Website" />
-  </Tab>
-  <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { Input } from "ruru-ui/components/input";
-
-    export function PrefixSuffixInputExample() {
-      return (
-        <div className={"flex justify-center gap-5"}>
-          <Input prefix="@" placeholder="Username" />
-          <Input suffix=".com" placeholder="Website" />
-        </div>
-      );
-    }
-
-    ```
-
-  </Tab>
-</Tabs>
-
-### Input with Error Message Example
-
-<Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-center"} value="Preview" >
-    <Input error="Invalid input" placeholder="Enter text" />
-  </Tab>
-  <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { Input } from "ruru-ui/components/input";
-
-    export function ErrorInputExample() {
-      return <Input error="Invalid input" placeholder="Enter text" />;
-    }
-    ```
-
-  </Tab>
-</Tabs>
-
-### Disabled Input Example
-
-<Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-center"} value="Preview" >
-    <Input disabled placeholder="Enter text" />
-  </Tab>
-  <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { Input } from "ruru-ui/components/input";
-
-    export function DisabledInputExample() {
-      return <Input disabled placeholder="Enter text" />;
-    }
-    ```
-
-  </Tab>
-</Tabs>
-
-### Search Input Example
-
-<Tabs items={["Preview", "Code"]}>
-  <Tab className={"flex justify-center"} value="Preview" >
-    <SearchInput placeholder="Search..." />
-  </Tab>
-  <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { SearchInput } from "ruru-ui/components/input";
-
-    export function SearchInputExample() {
-      return <SearchInput placeholder="Search..." />;
-    }
-
-    ```
-
-  </Tab>
-</Tabs>
+| Name                    | Type        | Default | Description                          |
+| ----------------------- | ----------- | ------- | ------------------------------------ |
+| **enablePrefixStyling** | **boolean** | `false` | Flag to apply styling to the prefix. |
diff --git a/apps/www/content/docs/components/spinner.mdx b/apps/www/content/docs/components/spinner.mdx
index 723d7bf..6bf469c 100644
--- a/apps/www/content/docs/components/spinner.mdx
+++ b/apps/www/content/docs/components/spinner.mdx
@@ -58,17 +58,17 @@ The Spinner component is used to indicate that a page is loading or that an acti
     <Spinner />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Spinner } from "ruru-ui/components/spinner";
-
-    export function SpinnerDemo() {
-      return (
-          <Spinner />
-      )
-    }
-    ```
-    </Tab>
+```tsx
+// [!code word:Spinner]
+import { Spinner } from "ruru-ui/components/spinner";
 
+export function Demo() {
+  return (
+      <Spinner />
+  )
+}
+```
+  </Tab>
 </Tabs>
 
 ### Custom size
@@ -80,22 +80,23 @@ You can customize the size of the spinner by passing the `size` prop.
     <Spinner size={30} />
   </Tab>
   <Tab className={"-mt-8"} value="Code">
-   ```tsx
-    import { Spinner } from "ruru-ui/components/spinner";
-
-    export function SpinnerDemo() {
-      return (
-        <Spinner size={30} />
-      )
-    }
-    ```
-    </Tab>
+```tsx
+// [!code word:size]
+// [!code word:30]
+import { Spinner } from "ruru-ui/components/spinner";
 
+export function SpinnerDemo() {
+  return (
+    <Spinner size={30} />
+  )
+}
+```
+  </Tab>
 </Tabs>
 
 ## Props
 
-| Name      | Type   | Default | Description                    |
-| --------- | ------ | ------- | ------------------------------ |
-| size      | number | 20      | The size of the spinner.       |
-| className | string | -       | The class name of the spinner. |
+| Name          | Type       | Default | Description                    |
+| ------------- | ---------- | ------- | ------------------------------ |
+| **size**      | **number** | `20`    | The size of the spinner.       |
+| **className** | **string** | `-`     | The class name of the spinner. |
diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx
index fb25d76..5b96e73 100644
--- a/apps/www/content/docs/components/switch.mdx
+++ b/apps/www/content/docs/components/switch.mdx
@@ -7,6 +7,7 @@ preview: switch
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
 import { Switch } from "ruru-ui/components/switch";
 import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
+import SwiychEvent from "../../../components/SwitchEvent.tsx";
 
 ## Installation
 
@@ -53,37 +54,19 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
         <Switch />
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Switch } from "your-ui-library/components/switch";
-
-        export function SwitchDemo() {
-            return <Switch />;
-        }
-        ```
-
+```tsx
+// [!code word:Switch]
+import { Switch } from "your-ui-library/components/switch";
+
+export function Demo() {
+    return <Switch />;
+}
+```
   </Tab>
 </Tabs>
 
 ## Variants
 
-### Default Switch
-
-<Tabs items={["Preview", "Code"]}>
-    <Tab className={"flex justify-center"} value="Preview">
-        <Switch />
-    </Tab>
-    <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Switch } from "your-ui-library/components/switch";
-
-        export function DefaultSwitchDemo() {
-            return <Switch />;
-        }
-        ```
-    </Tab>
-
-</Tabs>
-
 ### Disabled Switch
 
 <Tabs items={["Preview", "Code"]}>
@@ -91,13 +74,14 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
         <Switch disabled />
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Switch } from "your-ui-library/components/switch";
-
-        export function DisabledSwitchDemo() {
-            return <Switch disabled />;
-        }
-        ```
+```tsx
+// [!code word:disabled]
+import { Switch } from "your-ui-library/components/switch";
+
+export function SwitchDemo() {
+    return <Switch disabled />;
+}
+```
     </Tab>
 
 </Tabs>
@@ -106,8 +90,8 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
 
 | Name          | Type    | Default | Description                            |
 | ------------- | ------- | ------- | -------------------------------------- |
-| **className** | string  | `"" `   | Additional class names for the switch. |
-| **disabled**  | boolean | `false` | Flag to disable the switch.            |
+| **className** | **string**  | `"" `   | Additional class names for the switch. |
+| **disabled**  | **boolean** | `false` | Flag to disable the switch.            |
 
 ## Examples
 
@@ -121,19 +105,22 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
         </div>
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Switch } from "your-ui-library/components/switch";
-
-        export function DefaultSwitchExample() {
-            return (
-                <div className="flex items-center space-x-2">
-                    <Switch id="airplane-mode" />
-                    <label htmlFor="airplane-mode">toggle Mode</label>
-                </div>
-            );
-        }
-
-        ```
+```tsx
+// [!code word:airplane-mode]
+// [!code word:id]
+// [!code word:htmlFor]
+import { Switch } from "your-ui-library/components/switch";
+
+export function Demo() {
+    return (
+        <div className="flex items-center space-x-2">
+            <Switch id="airplane-mode" />
+            <label htmlFor="airplane-mode">toggle Mode</label>
+        </div>
+    );
+}
+
+```
     </Tab>
 
 </Tabs>
@@ -145,17 +132,50 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
         <Switch defaultChecked />
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Switch } from "your-ui-library/components/switch";
-
-        export function DefaultCheckedSwitchDemo() {
-            return <Switch defaultChecked />;
-        }
-        ```
+```tsx
+// [!code word:defaultChecked]
+import { Switch } from "your-ui-library/components/switch";
+
+export function SwitchDemo() {
+    return <Switch defaultChecked />;
+}
+```
     </Tab>
 
 </Tabs>
 
----
+### onCheckedChange function
+
+<Tabs items={["Preview", "Code"]}>
+    <Tab className={"flex justify-center"} value="Preview">
+        <SwiychEvent />
+    </Tab>
+    <Tab className={"-mt-8"} value="Code">
+```tsx
+// [!code word:onCheckedChange]
+"use client";
+
+import React, { useState } from "react";
+import { Switch } from "ruru-ui/components/switch";
+
+const SwiychDemo = (): React.ReactNode => {
+  const [value, setValue] = useState<boolean>(false); // [!code highlight]
+  return (
+    <div className="flex flex-col justify-center items-center">
+      <div className="flex items-center space-x-2">
+        <Switch
+          onCheckedChange={(e) => setValue(e)} // [!code highlight]
+          id="toggle-animation"
+        />
+        <label htmlFor="toggle value"> toggle value </label>
+      </div>
+      <p>{String(value)}</p>
+    </div>
+  );
+};
+
+export default SwiychDemo;
+```
+    </Tab>
+</Tabs>
 
-This document provides an overview of the Switch component, including usage examples, variants, props, and example implementations.
diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx
index 0289bff..7749d6e 100644
--- a/apps/www/content/docs/components/tabs.mdx
+++ b/apps/www/content/docs/components/tabs.mdx
@@ -58,10 +58,11 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs";
     </Tab>
     <Tab className={"-mt-8"} value="Code">
 ```tsx
+// [!code word:Tabs]
 import { Tabs, Tab } from "ruru-ui/components/tabs";
 
-export function TabsDemo() {
-    return (
+export function Demo() {
+    return ( 
         <div className="w-[80%]">
             <Tabs items={["Apple", "Orange", "Mango"]}>
                 <Tab value={"Apple"}>Apple</Tab>
@@ -79,39 +80,6 @@ export function TabsDemo() {
 
 ## Variants
 
-### Default Tabs
-
-<Tabs items={["Preview", "Code"]}>
-    <Tab className={"flex justify-center"} value="Preview" >
-        <div className="w-[80%]">
-            <Rutabs items={["Apple", "Orange", "Mango"]}>
-                <Rutab value={"Apple"}>Apple</Rutab>
-                <Rutab value={"Orange"}>Orange</Rutab>
-                <Rutab value={"Mango"}>Mango</Rutab>
-            </Rutabs>
-        </div>
-    </Tab>
-    <Tab className={"-mt-8"} value="Code">
-```tsx
-import { Tabs, Tab } from "ruru-ui/components/tabs";
-
-export function DefaultTabsDemo() {
-    return (
-        <div className="w-[80%]">
-            <Tabs items={["Apple", "Orange", "Mango"]}>
-                <Tab value={"Apple"}>Apple</Tab>
-                <Tab value={"Orange"}>Orange</Tab>
-                <Tab value={"Mango"}>Mango</Tab>
-            </Tabs>
-        </div>
-    );
-}
-
-```
-    </Tab>
-
-</Tabs>
-
 ### Disabled Tabs
 
 <Tabs items={["Preview", "Code"]}>
@@ -126,9 +94,10 @@ export function DefaultTabsDemo() {
     </Tab>
     <Tab className={"-mt-8"} value="Code">
 ```tsx
+// [!code word:disabled]
 import { Tabs, Tab } from "ruru-ui/components/tabs";
 
-export function DisabledTabsDemo() {
+export function TabsDemo() {
     return (
         <div className="w-[80%]">
             <Tabs disabled items={["Apple", "Orange", "Mango"]}>
@@ -158,9 +127,11 @@ export function DisabledTabsDemo() {
     </Tab>
     <Tab className={"-mt-8"} value="Code">
 ```tsx
+// [!code word:defaultIndex]
+// [!code word:2]
 import { Tabs, Tab } from "ruru-ui/components/tabs";
 
-export function DefaultIndexTabsDemo() {
+export function TabsDemo() {
     return (
         <div className="w-[80%]">
             <Tabs defaultIndex={2} items={["Apple", "Orange", "Mango"]}>
@@ -180,17 +151,17 @@ export function DefaultIndexTabsDemo() {
 
 ### Tabs
 
-| Name             | Type     | Default     | Description                             |
-| ---------------- | -------- | ----------- | --------------------------------------- |
-| **groupId**      | string   | `undefined` | Identifier for sharing value of tabs    |
-| **persist**      | boolean  | `false`     | Enable persistent state                 |
-| **defaultIndex** | number   | `0`         | Default index of the selected tab       |
-| **disabled**     | boolean  | `false`     | Disable all tabs                        |
-| **items**        | string[] | `[]`        | Array of items to be used as tab labels |
+| Name             | Type         | Default     | Description                             |
+| ---------------- | ------------ | ----------- | --------------------------------------- |
+| **groupId**      | **string**   | `undefined` | Identifier for sharing value of tabs    |
+| **persist**      | **boolean**  | `false`     | Enable persistent state                 |
+| **defaultIndex** | **number**   | `0`         | Default index of the selected tab       |
+| **disabled**     | **boolean**  | `false`     | Disable all tabs                        |
+| **items**        | **string[]** | `[]`        | Array of items to be used as tab labels |
 
 ### Tab
 
-| Name          | Type   | Default | Description                                             |
-| ------------- | ------ | ------- | ------------------------------------------------------- |
-| **value**     | string |         | Value of the tab, used for identifying the selected tab |
-| **className** | string | `""`    | Additional class names for the container                |
+| Name          | Type       | Default | Description                                             |
+| ------------- | ---------- | ------- | ------------------------------------------------------- |
+| **value**     | **string** |         | Value of the tab, used for identifying the selected tab |
+| **className** | **string** | `""`    | Additional class names for the container                |
diff --git a/apps/www/content/docs/components/textarea.mdx b/apps/www/content/docs/components/textarea.mdx
index 81daa43..44cf482 100644
--- a/apps/www/content/docs/components/textarea.mdx
+++ b/apps/www/content/docs/components/textarea.mdx
@@ -55,38 +55,26 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
         />
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Textarea } from "ruru-ui/components/textarea";
+```tsx
+// [!code word:Textarea]
+import { Textarea } from "ruru-ui/components/textarea";
 
-        export function TextareaDemo() {
-            return <Textarea style={{ minHeight: 100, width: 500 }} placeholder="Enter text" />;
-        }
+export function Demo() {
+    return (
+        <Textarea 
+            placeholder="Enter text"
+            style={{ minHeight: 100, width: 500 }}
+        />
+    );
+}
 
-        ```
+```
     </Tab>
 
 </Tabs>
 
 ## Variants
 
-### Default Textarea
-
-<Tabs items={["Preview", "Code"]}>
-    <Tab className={"flex justify-center"} value="Preview">
-        <Textarea style={{ minHeight: 100, width: 500 }} placeholder="Enter text" />
-    </Tab>
-    <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Textarea } from "ruru-ui/components/textarea";
-
-        export function DefaultTextareaDemo() {
-            return <Textarea style={{ minHeight: 100, width: 500 }} placeholder="Enter text" />;
-        }
-        ```
-
-  </Tab>
-</Tabs>
-
 ### Textarea with Label
 
 <Tabs items={["Preview", "Code"]}>
@@ -94,15 +82,21 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
         <Textarea style={{ minHeight: 100, width: 500 }} label="Comments" placeholder="Enter your comments" />
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Textarea } from "ruru-ui/components/textarea";
-
-        export function LabelTextareaDemo() {
-            return <Textarea style={{ minHeight: 100, width: 500 }} label="Comments" placeholder="Enter your comments" />;
-        }
+```tsx
+// [!code word:label]
+import { Textarea } from "ruru-ui/components/textarea";
 
-        ```
+export function LabelTextareaDemo() {
+    return (
+        <Textarea 
+            label="Comments"
+            placeholder="Enter your comments" 
+            style={{ minHeight: 100, width: 500 }} 
+        />
+    );
+}
 
+```
   </Tab>
 </Tabs>
 
@@ -113,85 +107,51 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
         <Textarea style={{ minHeight: 100, width: 500 }} error="Invalid input" placeholder="Enter text" />
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-    ```tsx
-    import { Textarea } from "ruru-ui/components/textarea";
-
-    export function ErrorTextareaDemo() {
-        return <Textarea style={{ minHeight: 100, width: 500 }} error="Invalid input" placeholder="Enter text" />;
-    }
-    ```
-
-  </Tab>
-</Tabs>
-
-## Props
-
-### Textarea
-
-| Name          | Type                                                                                     | Default     | Description                                   |
-| ------------- | ---------------------------------------------------------------------------------------- | ----------- | --------------------------------------------- |
-| **className** | string                                                                                   | `""`        | Additional class names for the container.     |
-| **label**     | string                                                                                   | `undefined` | Label for the textarea element.               |
-| **error**     | string                                                                                   | `""`        | Error message to display below the textarea.  |
-| **...props**  | **Omit\<React.InputHTMLAttributes\<HTMLTextAreaElement>, "children" "prefix" "suffix">** | `-`         | Any other props to be passed to the textarea. |
-
-## Examples
-
-### Default Textarea Example
+```tsx
+// [!code word:error]
+import { Textarea } from "ruru-ui/components/textarea";
 
-<Tabs items={["Preview", "Code"]}>
-    <Tab className={"flex justify-center"} value="Preview">
+export function TextareaDemo() {
+    return (
         <Textarea 
-            style={{ minHeight: 100, width: 500 }}
-            placeholder="Enter text"
-         />
-    </Tab>
-    <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Textarea } from "ruru-ui/components/textarea";
-
-        export function DefaultTextareaExample() {
-             return <Textarea style={{ minHeight: 100, width: 500 }} placeholder="Enter text" />;
-        }
-        ```
-
+            error="Invalid input" 
+            placeholder="Enter text" 
+            style={{ minHeight: 100, width: 500 }}  
+        />
+    );
+}
+```
   </Tab>
 </Tabs>
 
-### Textarea with Label Example
+### Disabled Input
 
 <Tabs items={["Preview", "Code"]}>
     <Tab className={"flex justify-center"} value="Preview">
-        <Textarea style={{ minHeight: 100, width: 500 }} label="Comments" placeholder="Enter your comments" />
+        <Textarea style={{ minHeight: 100, width: 500 }} disabled placeholder="Enter text" />
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Textarea } from "ruru-ui/components/textarea";
-
-        export function LabelTextareaExample() {
-            return <Textarea style={{ minHeight: 100, width: 500 }} label="Comments" placeholder="Enter your comments" />;
-        }
-
-        ```
+```tsx
+// [!code word:disabled]
+import { Textarea } from "ruru-ui/components/textarea";
 
+export function TextareaExample() {
+    return (
+        <Textarea 
+            disabled 
+            placeholder="Enter text" 
+            style={{ minHeight: 100, width: 500 }} 
+        />
+    );
+}
+```
   </Tab>
 </Tabs>
 
-### Textarea with Error Message Example
-
-<Tabs items={["Preview", "Code"]}>
-    <Tab className={"flex justify-center"} value="Preview">
-        <Textarea style={{ minHeight: 100, width: 500 }} error="Invalid input" placeholder="Enter text" />
-    </Tab>
-    <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Textarea } from "ruru-ui/components/textarea";
-
-        export function ErrorTextareaExample() {
-             return <Textarea style={{ minHeight: 100, width: 500 }} error="Invalid input" placeholder="Enter text" />;
-        }
-
-        ```
+## Props
 
-  </Tab>
-</Tabs>
+| Name          | Type                                                                                     | Default     | Description                                   |
+| ------------- | ---------------------------------------------------------------------------------------- | ----------- | --------------------------------------------- |
+| **className** | **string**                                                                                   | `""`        | Additional class names for the container.     |
+| **label**     | **string**                                                                                   | `undefined` | Label for the textarea element.               |
+| **error**     | **string**                                                                                   | `""`        | Error message to display below the textarea.  |
diff --git a/apps/www/content/docs/installation.mdx b/apps/www/content/docs/installation.mdx
index 000a2cb..26d3f68 100644
--- a/apps/www/content/docs/installation.mdx
+++ b/apps/www/content/docs/installation.mdx
@@ -45,7 +45,7 @@ import { Step, Steps } from "fumadocs-ui/components/steps";
     
     ### Configure components
 
-    You will need to answer a few questions to configure the `components.json` file:
+    You will need to answer a few questions to configure the `ruru.json` file:
 
     ```txt
 // [!code word:Yes]
@@ -64,7 +64,7 @@ import { Step, Steps } from "fumadocs-ui/components/steps";
 ◇ Configure the import alias for components: @/components/ui
 ◇ Configure the import alias for utils: @/lib/utils
 ◇ Would you like to use RSC ? Yes
-◇ Write configuration to components.json. Proceed? Yes
+◇ Write configuration to ruru.json. Proceed? Yes
 
     ```
 
diff --git a/apps/www/content/docs/provider.mdx b/apps/www/content/docs/provider.mdx
new file mode 100644
index 0000000..bd7f29a
--- /dev/null
+++ b/apps/www/content/docs/provider.mdx
@@ -0,0 +1,4 @@
+---
+title: Provider
+description: The Provider component is used to provide a context to all components in the tree.
+---
diff --git a/apps/www/content/docs/ruru-json.mdx b/apps/www/content/docs/ruru-json.mdx
new file mode 100644
index 0000000..fe685c9
--- /dev/null
+++ b/apps/www/content/docs/ruru-json.mdx
@@ -0,0 +1,5 @@
+---
+title: ruru.json
+description: The `ruru.json` file is used to configure the project.
+---
+
diff --git a/apps/www/mdx-components.tsx b/apps/www/mdx-components.tsx
index 31deb5d..feac75d 100644
--- a/apps/www/mdx-components.tsx
+++ b/apps/www/mdx-components.tsx
@@ -1,11 +1,15 @@
 import type { MDXComponents } from "mdx/types";
 import defaultComponents from "fumadocs-ui/mdx";
 import { Wrapper } from "@/components/preview/wrapper";
+import { Popup, PopupContent, PopupTrigger } from "fumadocs-ui/twoslash/popup";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...defaultComponents,
     ...components,
+    Popup,
+    PopupContent,
+    PopupTrigger,
     Wrapper,
   };
 }
diff --git a/apps/www/package.json b/apps/www/package.json
index 221bd57..83f94c1 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -12,6 +12,8 @@
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@vercel/analytics": "^1.3.1",
     "fs": "0.0.1-security",
     "fumadocs-core": "12.4.2",
     "fumadocs-docgen": "^1.1.0",
diff --git a/apps/www/public/registry/components/avatar.json b/apps/www/public/registry/components/avatar.json
index 0964f07..2db9c52 100644
--- a/apps/www/public/registry/components/avatar.json
+++ b/apps/www/public/registry/components/avatar.json
@@ -3,7 +3,7 @@
   "files": [
     {
       "name": "avatar.tsx",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n\ntype AvatarProps = Omit<\n  React.ComponentPropsWithoutRef<\"img\">,\n  \"src\" | \"alt\"\n> & {\n  \n  className?: string;\n  \n  size?: number;\n  \n  placeholder?: string;\n  \n  src: string;\n};\n\n\nconst Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(\n  ({ className, size = 30, src, placeholder, ...props }, ref) => {\n    return (\n      <img\n        className={cn(`rounded-full border`, className)}\n        aria-label=\"avatar\"\n        ref={ref}\n        style={{\n          width: `${size}px`,\n          height: `${size}px`,\n        }}\n        src={src}\n        alt={placeholder}\n        {...props}\n      />\n    );\n  },\n);\nAvatar.displayName = \"Avatar\";\n\ntype AvatarGroupProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> & {\n  \n  className?: string;\n  \n  members: { src: string; alt: string }[];\n  \n  size?: number;\n  \n  limit?: number;\n  aClassName?: string;\n  lnClassName?: string;\n};\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    { className, aClassName, lnClassName, size = 30, members, limit, ...props },\n    ref,\n  ) => {\n    const displayedMembers =\n      limit && members.length > limit ? members.slice(0, limit - 1) : members;\n    const extraMembersCount =\n      limit && members.length > limit ? members.length - limit + 1 : 0;\n\n    return (\n      <div className={cn(`flex`, className)} ref={ref} {...props}>\n        {displayedMembers.map((member, index) => (\n          <Avatar\n            key={index}\n            className={cn(`-ml-2 border`, aClassName)}\n            size={size}\n            src={member.src}\n            placeholder={member.alt}\n          />\n        ))}\n        {extraMembersCount > 0 && (\n          <div\n            className={cn(\n              `lastcount -ml-2 flex items-center justify-center rounded-full border bg-primary-foreground`,\n              lnClassName,\n            )}\n            style={{\n              width: `${size}px`,\n              height: `${size}px`,\n            }}\n          >\n            +{extraMembersCount}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nAvatarGroup.displayName = \"AvatarGroup\";\n\ntype AvatarWithBadgeProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> & {\n  \n  className?: string;\n  \n  size?: number;\n  \n  src: string;\n  \n  placeholder?: string;\n  \n  badgeSrc: string;\n  iClassName?: string;\n  sClassName?: string;\n};\n\n\nconst AvatarWithBadge = React.forwardRef<HTMLDivElement, AvatarWithBadgeProps>(\n  (\n    {\n      className,\n      sClassName,\n      iClassName,\n      size = 30,\n      src,\n      placeholder,\n      badgeSrc,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        className={cn(\"relative inline-block\", className)}\n        style={{\n          width: `${size}px`,\n          height: `${size}px`,\n        }}\n        ref={ref}\n        {...props}\n      >\n        <img\n          className={cn(\"rounded-full border\", iClassName)}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n          }}\n          src={src}\n          alt={placeholder}\n        />\n        <img\n          className={cn(\n            \"absolute bottom-0 left-0 rounded-full border\",\n            sClassName,\n          )}\n          style={{\n            width: `${size / 3}px`,\n            height: `${size / 3}px`,\n          }}\n          src={badgeSrc}\n          alt=\"badge\"\n        />\n      </div>\n    );\n  },\n);\nAvatarWithBadge.displayName = \"AvatarWithBadge\";\n\nexport { Avatar, AvatarGroup, AvatarWithBadge };\n"
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\ntype AvatarProps = Omit<\n  React.ComponentPropsWithoutRef<\"img\">,\n  \"src\" | \"alt\"\n> & {\n  \n  className?: string;\n  \n  size?: number;\n  \n  placeholder?: string;\n  \n  src: string;\n};\n\nconst Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(\n  ({ className, size = 30, src, placeholder, ...props }, ref) => {\n    return (\n      <img\n        className={cn(`rounded-full border`, className)}\n        aria-label=\"avatar\"\n        ref={ref}\n        style={{\n          width: `${size}px`,\n          height: `${size}px`,\n        }}\n        src={src}\n        alt={placeholder}\n        {...props}\n      />\n    );\n  },\n);\nAvatar.displayName = \"Avatar\";\n\ntype AvatarGroupProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> & {\n  \n  className?: string;\n  \n  members: { src: string; alt: string }[];\n  \n  size?: number;\n  \n  limit?: number;\n  \n  aClassName?: string;\n  \n  lnClassName?: string;\n};\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    { className, aClassName, lnClassName, size = 30, members, limit, ...props },\n    ref,\n  ) => {\n    const displayedMembers =\n      limit && members.length > limit ? members.slice(0, limit - 1) : members;\n    const extraMembersCount =\n      limit && members.length > limit ? members.length - limit + 1 : 0;\n\n    return (\n      <div className={cn(`flex`, className)} ref={ref} {...props}>\n        {displayedMembers.map((member, index) => (\n          <Avatar\n            key={index}\n            className={cn(`-ml-2 border`, aClassName)}\n            size={size}\n            src={member.src}\n            placeholder={member.alt}\n          />\n        ))}\n        {extraMembersCount > 0 && (\n          <div\n            className={cn(\n              `lastcount -ml-2 flex items-center justify-center rounded-full border bg-primary-foreground`,\n              lnClassName,\n            )}\n            style={{\n              width: `${size}px`,\n              height: `${size}px`,\n            }}\n          >\n            +{extraMembersCount}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nAvatarGroup.displayName = \"AvatarGroup\";\n\ntype AvatarWithBadgeProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> & {\n  \n  className?: string;\n  \n  size?: number;\n  \n  src: string;\n  \n  placeholder?: string;\n  \n  badgeSrc: string;\n  \n  iClassName?: string;\n  \n  sClassName?: string;\n};\n\nconst AvatarWithBadge = React.forwardRef<HTMLDivElement, AvatarWithBadgeProps>(\n  (\n    {\n      className,\n      sClassName,\n      iClassName,\n      size = 30,\n      src,\n      placeholder,\n      badgeSrc,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        className={cn(\"relative inline-block\", className)}\n        style={{\n          width: `${size}px`,\n          height: `${size}px`,\n        }}\n        ref={ref}\n        {...props}\n      >\n        <img\n          className={cn(\"rounded-full border\", iClassName)}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n          }}\n          src={src}\n          alt={placeholder}\n        />\n        <img\n          className={cn(\n            \"absolute bottom-0 left-0 rounded-full border\",\n            sClassName,\n          )}\n          style={{\n            width: `${size / 3}px`,\n            height: `${size / 3}px`,\n          }}\n          src={badgeSrc}\n          alt=\"badge\"\n        />\n      </div>\n    );\n  },\n);\nAvatarWithBadge.displayName = \"AvatarWithBadge\";\n\nexport { Avatar, AvatarGroup, AvatarWithBadge };\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/components/button.json b/apps/www/public/registry/components/button.json
index a57a6a5..6dba07e 100644
--- a/apps/www/public/registry/components/button.json
+++ b/apps/www/public/registry/components/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "name": "button.tsx",
-      "content": "\"use client\";\r\n\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport React from \"react\";\r\nimport { cn } from \"@/utils/cn\";\r\nimport { Spinner } from \"./spinner\";\r\nimport { motion } from \"framer-motion\";\r\nimport { useRuru } from \"@/provider\";\r\n\r\nexport const buttonVariants = cva(\r\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default:\r\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/85 hover:shadow-md\",\r\n        secondary:\r\n          \"border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\r\n        tertiary: \"text-primary hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\r\n        error: \"bg-[#d93036] hover:bg-[#ff6166]\",\r\n        warning: \"bg-[#ff990a] text-primary-foreground hover:bg-[#d27504]\",\r\n      },\r\n      size: {\r\n        default: \"h-9 px-4 py-2\",\r\n        small: \"h-8 rounded-md px-3 text-xs\",\r\n        large: \"h-10 rounded-md px-8\",\r\n        icon: \"size-9\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  },\r\n);\r\n\r\nexport interface ButtonProps\r\n  extends Omit<\r\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n      \"prefix\" | \"suffix\"\r\n    >,\r\n    VariantProps<typeof buttonVariants> {\r\n  \r\n  asChild?: boolean;\r\n  \r\n  prefix?: React.ReactNode;\r\n  \r\n  suffix?: React.ReactNode;\r\n  \r\n  disabled?: boolean;\r\n  \r\n  loading?: boolean;\r\n}\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  (\r\n    {\r\n      className,\r\n      variant = \"default\",\r\n      size = \"default\",\r\n      asChild = false,\r\n      prefix,\r\n      suffix,\r\n      disabled = false,\r\n      loading = false,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const { animation } = useRuru();\r\n\r\n    const Comp = asChild ? Slot : \"button\";\r\n\r\n    const buttonContent = (\r\n      <Comp\r\n        className={cn(\r\n          buttonVariants({\r\n            variant: loading ? \"secondary\" : variant,\r\n            size,\r\n          }),\r\n          className,\r\n        )}\r\n        ref={ref}\r\n        disabled={disabled}\r\n        {...props}\r\n      >\r\n        {loading ? <Spinner className=\"mr-2\" /> : null}\r\n        {prefix ? (\r\n          <span className=\"mr-2 flex items-center justify-center\">\r\n            {prefix}\r\n          </span>\r\n        ) : null}\r\n        {props.children}\r\n        {suffix ? (\r\n          <span className=\"ml-2 flex items-center justify-center\">\r\n            {suffix}\r\n          </span>\r\n        ) : null}\r\n      </Comp>\r\n    );\r\n\r\n    return (\r\n      <div className={disabled ? \" cursor-not-allowed \" : undefined}>\r\n        {animation ? (\r\n          <motion.div whileTap={{ scale: 0.93 }}>{buttonContent}</motion.div>\r\n        ) : (\r\n          buttonContent\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n"
+      "content": "\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Spinner } from \"./spinner\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"@/provider\";\n\nexport const buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/85 hover:shadow-md\",\n        secondary:\n          \"border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n        tertiary: \"text-primary hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n        error: \"bg-[#d93036] hover:bg-[#ff6166]\",\n        warning: \"bg-[#ff990a] text-primary-foreground hover:bg-[#d27504]\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        small: \"h-8 rounded-md px-3 text-xs\",\n        large: \"h-10 rounded-md px-8\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      \"prefix\" | \"suffix\"\n    >,\n    VariantProps<typeof buttonVariants> {\n  \n  asChild?: boolean;\n  \n  prefix?: React.ReactNode;\n  \n  suffix?: React.ReactNode;\n  \n  disabled?: boolean;\n  \n  loading?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      size = \"default\",\n      asChild = false,\n      prefix,\n      suffix,\n      disabled = false,\n      loading = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const { animation } = useRuru();\n\n    const Comp = asChild ? Slot : \"button\";\n\n    const buttonContent = (\n      <Comp\n        className={cn(\n          buttonVariants({\n            variant: loading ? \"secondary\" : variant,\n            size,\n          }),\n          className,\n        )}\n        ref={ref}\n        disabled={disabled}\n        {...props}\n      >\n        {loading ? <Spinner className=\"mr-2\" /> : null}\n        {prefix ? (\n          <span className=\"mr-2 flex items-center justify-center\">\n            {prefix}\n          </span>\n        ) : null}\n        {props.children}\n        {suffix ? (\n          <span className=\"ml-2 flex items-center justify-center\">\n            {suffix}\n          </span>\n        ) : null}\n      </Comp>\n    );\n\n    return (\n      <div className={disabled ? \" cursor-not-allowed \" : undefined}>\n        {animation ? (\n          <motion.div whileTap={{ scale: 0.93 }}>{buttonContent}</motion.div>\n        ) : (\n          buttonContent\n        )}\n      </div>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"
     }
   ],
   "type": "components:ui",
diff --git a/apps/www/public/registry/components/select.json b/apps/www/public/registry/components/select.json
index fd02b82..8daab8e 100644
--- a/apps/www/public/registry/components/select.json
+++ b/apps/www/public/registry/components/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "name": "select.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CaretSortIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cn } from \"@/utils/cn\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"@/provider\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => {\n  const { animation } = useRuru();\n  return animation ? (\n    <motion.div whileTap={{ scale: 0.93 }}>\n      <SelectPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-ring focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <SelectPrimitive.Icon asChild>\n          <CaretSortIcon className=\"h-4 w-4 opacity-50\" />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    </motion.div>\n  ) : (\n    <SelectPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-ring focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <CaretSortIcon className=\"h-4 w-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n});\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className,\n    )}\n    {...props}\n  >\n    <ChevronUpIcon />\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className,\n    )}\n    {...props}\n  >\n    <ChevronDownIcon />\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName;\n\n\nconst AnimatedSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      className={cn(\n        \"relative z-50 max-h-96 my-2 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className,\n      )}\n      ref={ref}\n      asChild\n      position={position}\n      {...props}\n    >\n      <motion.div\n        className={cn(\n          \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md\",\n          className,\n        )}\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        exit={{ opacity: 0, scale: 0.95 }}\n        transition={{ type: \"spring\", stiffness: 700, damping: 15 }}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </motion.div>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nAnimatedSelectContent.displayName = SelectPrimitive.Content.displayName;\n\n\nconst StaticSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nStaticSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>((props, ref) => {\n  const { animation } = useRuru();\n  return animation ? (\n    <AnimatedSelectContent ref={ref} {...props} />\n  ) : (\n    <StaticSelectContent ref={ref} {...props} />\n  );\n});\n\nSelectContent.displayName = \"SelectContent\";\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)}\n    {...props}\n  />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n};\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CaretSortIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cn } from \"@/utils/cn\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"@/provider\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => {\n  const { animation } = useRuru();\n  return animation ? (\n    <motion.div whileTap={{ scale: 0.93 }}>\n      <SelectPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <SelectPrimitive.Icon asChild>\n          <CaretSortIcon className=\"h-4 w-4 opacity-50\" />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    </motion.div>\n  ) : (\n    <SelectPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <CaretSortIcon className=\"h-4 w-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n});\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className,\n    )}\n    {...props}\n  >\n    <ChevronUpIcon />\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className,\n    )}\n    {...props}\n  >\n    <ChevronDownIcon />\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName;\n\n\nconst AnimatedSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      className={cn(\n        \"relative z-50 max-h-96 my-2 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className,\n      )}\n      ref={ref}\n      asChild\n      position={position}\n      {...props}\n    >\n      <motion.div\n        className={cn(\n          \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md\",\n          className,\n        )}\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        exit={{ opacity: 0, scale: 0.95 }}\n        transition={{ type: \"spring\", stiffness: 700, damping: 15 }}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </motion.div>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nAnimatedSelectContent.displayName = SelectPrimitive.Content.displayName;\n\n\nconst StaticSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nStaticSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>((props, ref) => {\n  const { animation } = useRuru();\n  return animation ? (\n    <AnimatedSelectContent ref={ref} {...props} />\n  ) : (\n    <StaticSelectContent ref={ref} {...props} />\n  );\n});\n\nSelectContent.displayName = \"SelectContent\";\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)}\n    {...props}\n  />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n};\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/components/switch.json b/apps/www/public/registry/components/switch.json
index 24c2838..27dc904 100644
--- a/apps/www/public/registry/components/switch.json
+++ b/apps/www/public/registry/components/switch.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "name": "switch.tsx",
-      "content": "\n\nimport * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/utils/cn\";\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary bg-accent data-[state=unchecked]:bg-input\",\n      className,\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\",\n      )}\n    />\n  </SwitchPrimitives.Root>\n));\nSwitch.displayName = SwitchPrimitives.Root.displayName;\n\nexport { Switch };\n"
+      "content": "import * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/utils/cn\";\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary bg-accent data-[state=unchecked]:bg-input\",\n      className,\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\",\n      )}\n    />\n  </SwitchPrimitives.Root>\n));\nSwitch.displayName = SwitchPrimitives.Root.displayName;\n\nexport { Switch };\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/components/tabs.json b/apps/www/public/registry/components/tabs.json
index c6c8c8b..795fe9f 100644
--- a/apps/www/public/registry/components/tabs.json
+++ b/apps/www/public/registry/components/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "name": "tabs.tsx",
-      "content": "\"use client\";\n\nimport type {\n  TabsContentProps,\n  TabsProps as BaseProps,\n} from \"@radix-ui/react-tabs\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport React, {\n  useMemo,\n  useState,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"@/provider\";\n\nconst TabsPrimitiveRoot = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>((props, ref) => {\n  return (\n    <TabsPrimitive.Root\n      ref={ref}\n      {...props}\n      className={cn(\"flex flex-col overflow-hidden\", props.className)}\n    />\n  );\n});\n\nTabsPrimitiveRoot.displayName = \"TabsPrimitiveRoot\";\n\nconst AnimatedTabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ children, ...props }, ref) => {\n  \n  const [activeIndex, setActiveIndex] = useState(0);\n  const [indicatorProps, setIndicatorProps] = useState({\n    width: 0,\n    left: 0,\n  });\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (!listRef.current) return;\n\n    const activeTab = listRef.current.querySelector(\n      '[data-state=\"active\"]',\n    ) as HTMLButtonElement | null;\n\n    if (activeTab) {\n      setIndicatorProps({\n        width: activeTab.offsetWidth,\n        left: activeTab.offsetLeft,\n      });\n    }\n  }, [activeIndex, children]);\n\n  return (\n    <TabsPrimitive.List\n      ref={(node) => {\n        listRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      {...props}\n      className={cn(\n        \"relative flex flex-row items-end gap-4 overflow-x-auto px-4 border-b\",\n        props.className,\n      )}\n    >\n      {children}\n      <motion.div\n        className=\"absolute bottom-0 h-[2px] bg-primary\"\n        animate={{ width: indicatorProps.width, left: indicatorProps.left }}\n        transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n      />\n    </TabsPrimitive.List>\n  );\n});\nAnimatedTabsList.displayName = \"AnimatedTabsList\";\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>((props, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    {...props}\n    className={cn(\n      \"flex flex-row items-end gap-4 overflow-x-auto px-4 border-b\",\n      props.className,\n    )}\n  />\n));\nTabsList.displayName = \"TabsList\";\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>((props, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    {...props}\n    className={cn(\n      \"whitespace-nowrap border-b border-transparent py-2 text-sm font-medium transition-colors hover:text-primary disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary text-muted-foreground mx-1 data-[state=active]:border-primary\",\n      props.className,\n    )}\n  />\n));\nTabsTrigger.displayName = \"TabsTrigger\";\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>((props, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    {...props}\n    className={cn(\"p-4\", props.className)}\n  />\n));\nTabsContent.displayName = \"TabsContent\";\n\ntype ChangeListener = (v: string) => void;\nconst listeners = new Map<string, ChangeListener[]>();\n\nfunction addChangeListener(id: string, listener: ChangeListener): void {\n  const list = listeners.get(id) ?? [];\n  list.push(listener);\n  listeners.set(id, list);\n}\n\nfunction removeChangeListener(id: string, listener: ChangeListener): void {\n  const list = listeners.get(id) ?? [];\n  listeners.set(\n    id,\n    list.filter((item) => item !== listener),\n  );\n}\n\nfunction update(id: string, v: string, persist: boolean): void {\n  listeners.get(id)?.forEach((item) => {\n    item(v);\n  });\n\n  if (persist) localStorage.setItem(id, v);\n  else sessionStorage.setItem(id, v);\n}\n\nexport interface TabsProps extends BaseProps {\n  \n  groupId?: string;\n  \n  persist?: boolean;\n  \n  defaultIndex?: number;\n  \n  disabled?: boolean;\n  \n  items?: string[];\n}\n\nexport function Tabs({\n  groupId,\n  items = [],\n  persist = false,\n  defaultIndex = 0,\n  disabled = false,\n  ...props\n}: TabsProps): React.ReactElement {\n  const { animation } = useRuru();\n  const values = useMemo(() => items.map((item) => toValue(item)), [items]);\n  const [value, setValue] = useState(values[defaultIndex]);\n\n  useLayoutEffect(() => {\n    if (!groupId) return;\n\n    const onUpdate: ChangeListener = (v) => {\n      if (values.includes(v)) setValue(v);\n    };\n\n    const previous = persist\n      ? localStorage.getItem(groupId)\n      : sessionStorage.getItem(groupId);\n\n    if (previous) onUpdate(previous);\n    addChangeListener(groupId, onUpdate);\n    return () => {\n      removeChangeListener(groupId, onUpdate);\n    };\n  }, [groupId, persist, values]);\n\n  const onValueChange = useCallback(\n    (v: string) => {\n      if (groupId) {\n        update(groupId, v, persist);\n      } else {\n        setValue(v);\n      }\n    },\n    [groupId, persist],\n  );\n\n  return (\n    <TabsPrimitiveRoot\n      value={value}\n      onValueChange={onValueChange}\n      {...props}\n      className={cn(\"my-4\", props.className)}\n    >\n      {animation ? (\n        <AnimatedTabsList>\n          {values.map((v, i) => (\n            <TabsTrigger\n              className=\"relative \"\n              disabled={disabled}\n              key={v}\n              value={v}\n            >\n              {items[i]}\n            </TabsTrigger>\n          ))}\n        </AnimatedTabsList>\n      ) : (\n        <TabsList>\n          {values.map((v, i) => (\n            <TabsTrigger disabled={disabled} key={v} value={v}>\n              {items[i]}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      )}\n      {props.children}\n    </TabsPrimitiveRoot>\n  );\n}\n\nfunction toValue(v: string): string {\n  return v.toLowerCase().replace(/\\s/, \"-\");\n}\n\nexport function Tab({\n  value,\n  className,\n  ...props\n}: TabsContentProps): React.ReactElement {\n  return (\n    <TabsContent\n      value={toValue(value)}\n      className={cn(\n        \"prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:rounded-none [&>figure:only-child]:border-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { TabsList, TabsTrigger, TabsContent };\n"
+      "content": "\"use client\";\n\nimport type {\n  TabsContentProps,\n  TabsProps as BaseProps,\n} from \"@radix-ui/react-tabs\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport React, {\n  useMemo,\n  useState,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"@/provider\";\n\nconst TabsPrimitiveRoot = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>((props, ref) => {\n  return (\n    <TabsPrimitive.Root\n      ref={ref}\n      {...props}\n      className={cn(\"flex flex-col overflow-hidden\", props.className)}\n    />\n  );\n});\n\nTabsPrimitiveRoot.displayName = \"TabsPrimitiveRoot\";\n\nconst AnimatedTabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ children, ...props }, ref) => {\n  const [activeIndex] = useState(0);\n  const [indicatorProps, setIndicatorProps] = useState({\n    width: 0,\n    left: 0,\n  });\n  const [hasMounted, setHasMounted] = useState(false);\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (!listRef.current) return;\n\n    const activeTab = listRef.current.querySelector(\n      '[data-state=\"active\"]',\n    ) as HTMLButtonElement | null;\n\n    if (activeTab) {\n      setIndicatorProps({\n        width: activeTab.offsetWidth,\n        left: activeTab.offsetLeft,\n      });\n    }\n\n    if (!hasMounted) {\n      setHasMounted(true);\n    }\n  }, [activeIndex, children, hasMounted]);\n\n  return (\n    <TabsPrimitive.List\n      ref={(node) => {\n        listRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      {...props}\n      className={cn(\n        \"relative flex flex-row items-end gap-4 overflow-x-auto px-4 border-b\",\n        props.className,\n      )}\n    >\n      {children}\n      <motion.div\n        className=\"absolute bottom-0 h-[2px] bg-primary\"\n        animate={\n          hasMounted\n            ? { width: indicatorProps.width, left: indicatorProps.left }\n            : false\n        }\n        transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n      />\n    </TabsPrimitive.List>\n  );\n});\nAnimatedTabsList.displayName = \"AnimatedTabsList\";\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>((props, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    {...props}\n    className={cn(\n      \"flex flex-row items-end gap-4 overflow-x-auto px-4 border-b\",\n      props.className,\n    )}\n  />\n));\nTabsList.displayName = \"TabsList\";\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>((props, ref) => {\n  const { animation } = useRuru();\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      {...props}\n      className={cn(\n        \"whitespace-nowrap py-2 text-sm font-medium transition-colors hover:text-primary disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary text-muted-foreground mx-1 \",\n        props.className,\n        !animation &&\n          \"border-b border-transparent data-[state=active]:border-primary\",\n      )}\n    />\n  );\n});\nTabsTrigger.displayName = \"TabsTrigger\";\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>((props, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    {...props}\n    className={cn(\"p-4\", props.className)}\n  />\n));\nTabsContent.displayName = \"TabsContent\";\n\ntype ChangeListener = (v: string) => void;\nconst listeners = new Map<string, ChangeListener[]>();\n\nfunction addChangeListener(id: string, listener: ChangeListener): void {\n  const list = listeners.get(id) ?? [];\n  list.push(listener);\n  listeners.set(id, list);\n}\n\nfunction removeChangeListener(id: string, listener: ChangeListener): void {\n  const list = listeners.get(id) ?? [];\n  listeners.set(\n    id,\n    list.filter((item) => item !== listener),\n  );\n}\n\nfunction update(id: string, v: string, persist: boolean): void {\n  listeners.get(id)?.forEach((item) => {\n    item(v);\n  });\n\n  if (persist) localStorage.setItem(id, v);\n  else sessionStorage.setItem(id, v);\n}\n\nexport interface TabsProps extends BaseProps {\n  \n  groupId?: string;\n  \n  persist?: boolean;\n  \n  defaultIndex?: number;\n  \n  disabled?: boolean;\n  \n  items?: string[];\n}\n\nexport function Tabs({\n  groupId,\n  items = [],\n  persist = false,\n  defaultIndex = 0,\n  disabled = false,\n  ...props\n}: TabsProps): React.ReactElement {\n  const { animation } = useRuru();\n  const values = useMemo(() => items.map((item) => toValue(item)), [items]);\n  const [value, setValue] = useState(values[defaultIndex]);\n\n  useLayoutEffect(() => {\n    if (!groupId) return;\n\n    const onUpdate: ChangeListener = (v) => {\n      if (values.includes(v)) setValue(v);\n    };\n\n    const previous = persist\n      ? localStorage.getItem(groupId)\n      : sessionStorage.getItem(groupId);\n\n    if (previous) onUpdate(previous);\n    addChangeListener(groupId, onUpdate);\n    return () => {\n      removeChangeListener(groupId, onUpdate);\n    };\n  }, [groupId, persist, values]);\n\n  const onValueChange = useCallback(\n    (v: string) => {\n      if (groupId) {\n        update(groupId, v, persist);\n      } else {\n        setValue(v);\n      }\n    },\n    [groupId, persist],\n  );\n\n  return (\n    <TabsPrimitiveRoot\n      value={value}\n      onValueChange={onValueChange}\n      {...props}\n      className={cn(\"my-4\", props.className)}\n    >\n      {animation ? (\n        <AnimatedTabsList>\n          {values.map((v, i) => (\n            <TabsTrigger\n              className=\"relative \"\n              disabled={disabled}\n              key={v}\n              value={v}\n            >\n              {items[i]}\n            </TabsTrigger>\n          ))}\n        </AnimatedTabsList>\n      ) : (\n        <TabsList>\n          {values.map((v, i) => (\n            <TabsTrigger disabled={disabled} key={v} value={v}>\n              {items[i]}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      )}\n      {props.children}\n    </TabsPrimitiveRoot>\n  );\n}\n\nfunction toValue(v: string): string {\n  return v.toLowerCase().replace(/\\s/, \"-\");\n}\n\nexport function Tab({\n  value,\n  className,\n  ...props\n}: TabsContentProps): React.ReactElement {\n  return (\n    <TabsContent\n      value={toValue(value)}\n      className={cn(\n        \"prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:rounded-none [&>figure:only-child]:border-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { TabsList, TabsTrigger, TabsContent };\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/components/tooltip.json b/apps/www/public/registry/components/tooltip.json
index c6a4de1..bbb4d0f 100644
--- a/apps/www/public/registry/components/tooltip.json
+++ b/apps/www/public/registry/components/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "name": "tooltip.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/utils/cn\";\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 5, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"h-fit data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-primary-foreground select-none rounded-[4px] bg-primary px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]\",\n      className,\n    )}\n    sideOffset={sideOffset}\n    {...props}\n  >\n    {props.children}\n    <TooltipPrimitive.Arrow className=\"fill-primary\" />\n  </TooltipPrimitive.Content>\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"@/utils/cn\";\nimport { useRuru } from \"@/provider\";\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 5, ...props }, ref) => {\n  const { animation } = useRuru();\n\n  return animation ? (\n    <AnimatedTooltipContent ref={ref} {...props} />\n  ) : (\n    <TooltipPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"h-fit data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-primary-foreground select-none rounded-[4px] bg-primary px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]\",\n        className,\n      )}\n      sideOffset={sideOffset}\n      {...props}\n    >\n      {props.children}\n      <TooltipPrimitive.Arrow className=\"fill-primary\" />\n    </TooltipPrimitive.Content>\n  );\n});\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst AnimatedTooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 5, ...props }, ref) => (\n  <TooltipPrimitive.Content asChild sideOffset={sideOffset} {...props}>\n    <motion.div\n      ref={ref}\n      initial={{ opacity: 0, scale: 0.95 }}\n      animate={{ opacity: 1, scale: 1 }}\n      exit={{ opacity: 0, scale: 0.95 }}\n      transition={{ duration: 0.2, ease: \"easeOut\" }}\n      className={cn(\n        \"h-fit text-primary-foreground select-none rounded-[4px] bg-primary px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]\",\n        className,\n      )}\n    >\n      <div>\n        {props.children}\n        <TooltipPrimitive.Arrow className=\"fill-primary\" />\n      </div>\n    </motion.div>\n  </TooltipPrimitive.Content>\n));\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/interface/RuruContextType.json b/apps/www/public/registry/interface/RuruContextType.json
new file mode 100644
index 0000000..3a54542
--- /dev/null
+++ b/apps/www/public/registry/interface/RuruContextType.json
@@ -0,0 +1,4 @@
+{
+  "name": "RuruContextType",
+  "content": "\nexport interface RuruContextType {\n  disableAnimation: boolean;\n  animation: boolean;\n  setAnimation: (Animation: boolean) => void;\n}\n"
+}
diff --git a/apps/www/public/registry/interface/RuruProviderProps.json b/apps/www/public/registry/interface/RuruProviderProps.json
new file mode 100644
index 0000000..9bf80e6
--- /dev/null
+++ b/apps/www/public/registry/interface/RuruProviderProps.json
@@ -0,0 +1,4 @@
+{
+  "name": "RuruProviderProps",
+  "content": "import { type ReactNode } from \"react\";\n\nexport interface RuruProviderProps {\n  children: ReactNode;\n  togleThemeAnimation?: boolean;\n  disableAnimation?: boolean;\n  disableBaseColor?: boolean;\n}\n"
+}
diff --git a/apps/www/public/registry/interface/RuruThemeProviderProps.json b/apps/www/public/registry/interface/RuruThemeProviderProps.json
new file mode 100644
index 0000000..fb7e294
--- /dev/null
+++ b/apps/www/public/registry/interface/RuruThemeProviderProps.json
@@ -0,0 +1,4 @@
+{
+  "name": "RuruThemeProviderProps",
+  "content": "import { type ReactNode } from \"react\";\n\nexport interface RuruThemeProviderProps {\n  children: ReactNode;\n  attribute?: string;\n  defaultTheme?: string;\n  enableSystem?: boolean;\n  disableTransitionOnChange?: boolean;\n}\n"
+}
diff --git a/apps/www/public/registry/interface/index.json b/apps/www/public/registry/interface/index.json
new file mode 100644
index 0000000..a43cb43
--- /dev/null
+++ b/apps/www/public/registry/interface/index.json
@@ -0,0 +1,11 @@
+[
+  {
+    "name": "RuruContextType"
+  },
+  {
+    "name": "RuruProviderProps"
+  },
+  {
+    "name": "RuruThemeProviderProps"
+  }
+]
diff --git a/apps/www/public/registry/providers/components/index.json b/apps/www/public/registry/providers/components/index.json
new file mode 100644
index 0000000..56663a0
--- /dev/null
+++ b/apps/www/public/registry/providers/components/index.json
@@ -0,0 +1,10 @@
+{
+  "name": "index",
+  "files": [
+    {
+      "name": "index.tsx",
+      "content": "\"use client\";\n\nimport React, { createContext, useContext, useState } from \"react\";\nimport { type RuruContextType } from \"@/interfaces/RuruContextType\";\nimport { type RuruProviderProps } from \"@/interfaces/RuruProviderProps\";\nimport { RuruThemeProvider } from \"./theme\";\n\nconst RuruContext = createContext<RuruContextType | undefined>(undefined);\n\nexport const RuruProvider: React.FC<RuruProviderProps> = ({\n  children,\n  togleThemeAnimation = false,\n  disableAnimation = false,\n  disableBaseColor = false,\n}) => {\n  const [animation, setAnimation] = useState(!disableAnimation);\n\n  return (\n    <RuruContext.Provider value={{ disableAnimation, animation, setAnimation }}>\n      <RuruThemeProvider disableTransitionOnChange={!togleThemeAnimation}>\n        {disableBaseColor ? (\n          children\n        ) : (\n          <div className=\"bg-card\">{children}</div>\n        )}\n      </RuruThemeProvider>\n    </RuruContext.Provider>\n  );\n};\n\nexport const useRuru = (): RuruContextType => {\n  const context = useContext(RuruContext);\n  if (!context) {\n    throw new Error(\"useRuru must be used within a RuruProvider\");\n  }\n  return context;\n};\n"
+    }
+  ],
+  "type": "components:component"
+}
diff --git a/apps/www/public/registry/providers/components/theme.json b/apps/www/public/registry/providers/components/theme.json
new file mode 100644
index 0000000..8a86e45
--- /dev/null
+++ b/apps/www/public/registry/providers/components/theme.json
@@ -0,0 +1,10 @@
+{
+  "name": "theme",
+  "files": [
+    {
+      "name": "theme.tsx",
+      "content": "\"use client\";\n\nimport { ThemeProvider } from \"next-themes\";\nimport React from \"react\";\nimport { type RuruThemeProviderProps } from \"@/interfaces/RuruThemeProviderProps\";\n\nexport const RuruThemeProvider: React.FC<RuruThemeProviderProps> = ({\n  children,\n  attribute = \"class\",\n  defaultTheme = \"system\",\n  enableSystem = true,\n  disableTransitionOnChange = true,\n}) => {\n  return (\n    <ThemeProvider\n      attribute={attribute}\n      defaultTheme={defaultTheme}\n      enableSystem={enableSystem}\n      disableTransitionOnChange={disableTransitionOnChange}\n    >\n      <div>{children}</div>\n    </ThemeProvider>\n  );\n};\n\nimport { useTheme } from \"next-themes\";\nexport { useTheme };\n"
+    }
+  ],
+  "type": "components:component"
+}
diff --git a/apps/www/public/registry/providers/index.json b/apps/www/public/registry/providers/index.json
new file mode 100644
index 0000000..dbb0306
--- /dev/null
+++ b/apps/www/public/registry/providers/index.json
@@ -0,0 +1,12 @@
+[
+  {
+    "name": "index",
+    "files": ["index.tsx"],
+    "type": "components:component"
+  },
+  {
+    "name": "theme",
+    "files": ["theme.tsx"],
+    "type": "components:component"
+  }
+]
diff --git a/apps/www/public/schema.json b/apps/www/public/schema.json
new file mode 100644
index 0000000..aa8f0de
--- /dev/null
+++ b/apps/www/public/schema.json
@@ -0,0 +1,55 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "tailwind": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "string"
+        },
+        "css": {
+          "type": "string"
+        },
+        "baseColor": {
+          "type": "string"
+        },
+        "cssVariables": {
+          "type": "boolean"
+        },
+        "prefix": {
+          "type": "string"
+        }
+      },
+      "required": ["config", "css", "baseColor", "cssVariables"]
+    },
+    "rsc": {
+      "type": "boolean"
+    },
+    "tsx": {
+      "type": "boolean"
+    },
+    "aliases": {
+      "type": "object",
+      "properties": {
+        "utils": {
+          "type": "string"
+        },
+        "components": {
+          "type": "string"
+        },
+        "ui": {
+          "type": "string"
+        },
+        "provider": {
+          "type": "string"
+        },
+        "interfaces": {
+          "type": "string"
+        }
+      },
+      "required": ["utils", "components", "provider"]
+    }
+  },
+  "required": ["tailwind", "rsc", "aliases"]
+}
diff --git a/apps/www/registry/components.ts b/apps/www/registry/components.ts
new file mode 100644
index 0000000..a36542e
--- /dev/null
+++ b/apps/www/registry/components.ts
@@ -0,0 +1,14 @@
+import { Registry } from "@/registry/schema";
+
+export const components: Registry = [
+  {
+    name: "index",
+    type: "components:component",
+    files: ["index.tsx"],
+  },
+  {
+    name: "theme",
+    type: "components:component",
+    files: ["theme.tsx"],
+  },
+];
diff --git a/apps/www/registry/registry.ts b/apps/www/registry/registry.ts
index 95bf1e4..effdb08 100644
--- a/apps/www/registry/registry.ts
+++ b/apps/www/registry/registry.ts
@@ -1,4 +1,5 @@
 import { Registry } from "@/registry/schema";
 import { ui } from "@/registry/ui";
+import { components } from "@/registry/components";
 
-export const registry: Registry = [...ui];
+export const registry: Registry = [...ui, ...components];
diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts
index 7b2c78f..eda5e54 100644
--- a/apps/www/scripts/build-registry.mts
+++ b/apps/www/scripts/build-registry.mts
@@ -8,50 +8,9 @@ import { Registry, registrySchema } from "../registry/schema";
 
 const REGISTRY_PATH = path.join(process.cwd(), "public/registry");
 
-// ----------------------------------------------------------------------------
-// Build __registry__/index.tsx.
-// ----------------------------------------------------------------------------
 async function buildRegistry(registry: Registry) {
   console.log(" ⚒️ Building registry...");
 
-  let index = `// @ts-nocheck
-// This file is autogenerated by scripts/build-registry.ts
-// Do not edit this file directly.
-import * as React from "react"
-
-export const Index: Record<string, any> = {
-`;
-
-  index += `  "components": {`;
-
-  // Build style index.
-  for (const item of registry) {
-    const resolveFiles = item.files.map(
-      (file) => `@/../../packages/ui/src/components/${file}`,
-    );
-
-    let sourceFilename = "";
-
-    index += `
-    "${item.name}": {
-      name: "${item.name}",
-      type: "${item.type}",
-      registryDependencies: ${JSON.stringify(item.registryDependencies)},
-      component: React.lazy(() => import("@/../../packages/ui/src/components/${item.name}")),
-      source: "${sourceFilename}",
-      files: [${resolveFiles.map((file) => `"${file}"`)}],
-      category: "${item.category}",
-      subcategory: ${JSON.stringify(item.subcategory)}
-    },`;
-  }
-
-  index += `
-  },`;
-
-  index += `
-}
-`;
-
   // ----------------------------------------------------------------------------
   // Build registry/index.json.
   // ----------------------------------------------------------------------------
@@ -64,6 +23,17 @@ export const Index: Record<string, any> = {
     "utf8",
   );
 
+  const providersNames = registry.filter(
+    (item) => item.type === "components:component",
+  );
+  const providersRregistryJson = JSON.stringify(providersNames, null, 2);
+  rimraf.sync(path.join(REGISTRY_PATH, "providers", "index.json"));
+  await fs.writeFile(
+    path.join(REGISTRY_PATH, "providers", "index.json"),
+    providersRregistryJson,
+    "utf8",
+  );
+
   console.log("✅ Registry built!");
 }
 
@@ -84,7 +54,39 @@ async function buildStyles(registry: Registry) {
   for (const item of registry) {
     console.log(` |- ${item.name} `);
 
-    if (item.type !== "components:ui") {
+    if (item.type === "components:component") {
+      const files = item.files?.map((file) => {
+        let content = readFileSync(
+          path.join("../../packages/ui/src/provider", file),
+          "utf8",
+        );
+
+        // Remove single-line comments, excluding URLs
+        content = content.replace(/(^|[^:])\/\/.*$/gm, "$1");
+
+        // Remove multi-line comments
+        content = content.replace(/\/\*[\s\S]*?\*\//gm, "");
+
+        // Remove lines that are completely empty (after removing comments)
+        // content = content.replace(/^\s*\n/gm, "");
+
+        return {
+          name: basename(file),
+          content,
+        };
+      });
+
+      const payload = {
+        ...item,
+        files,
+      };
+
+      await fs.writeFile(
+        path.join(targetPath, "providers", "components", `${item.name}.json`),
+        JSON.stringify(payload, null, 2),
+        "utf8",
+      );
+
       continue;
     }
 
@@ -124,6 +126,64 @@ async function buildStyles(registry: Registry) {
   console.log("✅ Styles built!");
 }
 
+// ----------------------------------------------------------------------------
+// Build registry/interface/[name].json.
+// ----------------------------------------------------------------------------
+async function buildinterfaceRegistry() {
+  console.log(" ⚒️ Building interface registry...");
+
+  const targetPath = path.join(REGISTRY_PATH, "interface");
+
+  // Create directory if it doesn't exist.
+  if (!existsSync(targetPath)) {
+    await fs.mkdir(targetPath, { recursive: true });
+  }
+
+  const files = await fs.readdir("../../packages/ui/src/interfaces");
+
+  // ---------------------------------------------------------------------
+  // Build registry/interface/index.json.
+  // ---------------------------------------------------------------------
+
+  // storeing data like [ { name: interfacefilename } ]
+
+  const names = files.map((file) => ({ name: file.replace(".ts", "") }));
+
+  await fs.writeFile(
+    path.join(REGISTRY_PATH, "interface", "index.json"),
+    JSON.stringify(names, null, 2),
+    "utf8",
+  );
+
+  // ---------------------------------------------------------------------
+  // Build registry/interface/[name].json.
+  // ---------------------------------------------------------------------
+
+  for (const file of files) {
+    let content = readFileSync(
+      path.join("../../packages/ui/src/interfaces", file),
+      "utf8",
+    );
+
+    // Remove single-line comments, excluding URLs
+    content = content.replace(/(^|[^:])\/\/.*$/gm, "$1");
+
+    // Remove multi-line comments
+    content = content.replace(/\/\*[\s\S]*?\*\//gm, "");
+
+    // Remove lines that are completely empty (after removing comments)
+    // content = content.replace(/^\s*\n/gm, "");
+
+    await fs.writeFile(
+      path.join(targetPath, `${file.replace(".ts", "")}.json`),
+      JSON.stringify({ name: file.replace(".ts", ""), content }, null, 2),
+      "utf8",
+    );
+  }
+
+  console.log("✅ Interface registry built!");
+}
+
 try {
   const result = registrySchema.safeParse(registry);
 
@@ -134,6 +194,7 @@ try {
 
   await buildRegistry(result.data);
   await buildStyles(result.data);
+  await buildinterfaceRegistry();
 
   console.log("✅ All done!");
 } catch (error) {
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index b97df53..52846e1 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -1,4 +1,5 @@
-import { createPreset } from "fumadocs-ui/tailwind-plugin";
+import { createPreset, presets } from "fumadocs-ui/tailwind-plugin";
+import animate from "tailwindcss-animate";
 
 /** @type {import('tailwindcss').Config} */
 // eslint-disable-next-line import/no-anonymous-default-export
@@ -24,6 +25,25 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
-  presets: [createPreset()],
+  plugins: [animate],
+  // presets: [createPreset()],
+  presets: [
+    createPreset({
+      preset: {
+        ...presets.default,
+        dark: {
+          ...presets.default.dark,
+          background: "0 0% 2%",
+          foreground: "0 0% 98%",
+          popover: "0 0% 4%",
+          card: "0 0% 4%",
+          muted: "0 0% 8%",
+          border: "0 0% 14%",
+          accent: "0 0% 15%",
+          "accent-foreground": "0 0% 100%",
+          "muted-foreground": "0 0% 60%",
+        },
+      },
+    }),
+  ],
 };
diff --git a/apps/www/tsconfig.json b/apps/www/tsconfig.json
index 77171ab..42bafc9 100644
--- a/apps/www/tsconfig.json
+++ b/apps/www/tsconfig.json
@@ -1,31 +1,10 @@
 {
   "extends": "tsconfig/nextjs.json",
   "compilerOptions": {
-    "baseUrl": ".",
-    "target": "ESNext",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    // "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
     "paths": {
       "@/*": ["./*"],
       "@ruru-ui": ["../../packages/ui/dist"]
-    },
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
index 9853dd8..7275691 100644
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -3,7 +3,7 @@ import * as z from "zod";
 import pc from "picocolors";
 import { getConfig } from "@/utils/get-config";
 import {
-  fetchTree,
+  fetchComponentsTree,
   getItemTargetPath,
   getRegistryBaseColor,
   getRegistryIndex,
@@ -57,7 +57,7 @@ export const add = new Command()
 
       if (!config) {
         pc.white(
-          `Configuration is missing. Please run ${pc.green(`init`)} to create a components.json file.`,
+          `Configuration is missing. Please run ${pc.green(`init`)} to create a ruru.json file.`,
         );
         process.exit(1);
       }
@@ -91,7 +91,7 @@ export const add = new Command()
       }
 
       const tree = await resolveTree(registryIndex, selectedComponents);
-      const payload = await fetchTree(tree);
+      const payload = await fetchComponentsTree(tree);
       const baseColor = await getRegistryBaseColor();
 
       if (!payload.length) {
@@ -217,7 +217,7 @@ export const add = new Command()
             registryIndex,
             subcategoryComponents,
           );
-          const subcategoryPayload = await fetchTree(subcategoryTree);
+          const subcategoryPayload = await fetchComponentsTree(subcategoryTree);
 
           for (const subitem of subcategoryPayload) {
             spinner.text = `Installing subcategory component ${subitem.name}...`;
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index d89bdae..b060946 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -29,12 +29,25 @@ import ora from "ora";
 import { applyPrefixesCss } from "@/utils/transformers/transform-tw-prefix";
 import * as z from "zod";
 import { Command } from "commander";
+import {
+  fetchInterfaceTree,
+  fetchTree,
+  getInterfaceRegistryIndex,
+  getItemTargetPath,
+  getProviderRegistryIndex,
+  getRegistryBaseColor,
+  resolveInterfaceTree,
+  resolveTree,
+} from "@/utils/registry";
+import { transform } from "@/utils/transformers";
 
 const PROJECT_DEPENDENCIES = [
   "tailwindcss-animate",
   "class-variance-authority",
   "clsx",
   "tailwind-merge",
+  "framer-motion",
+  "next-themes",
 ];
 
 const initOptionsSchema = z.object({
@@ -78,6 +91,7 @@ export const init = new Command()
     } else {
       // Read config.
       const existingConfig = await getConfig(cwd);
+
       const config = await promptForConfig(
         cwd,
         existingConfig,
@@ -104,6 +118,12 @@ export const init = new Command()
 export async function runInit(cwd: string, config: Config) {
   const spinner = ora(`Initializing project...`)?.start();
 
+  const registryIndex = await getProviderRegistryIndex();
+
+  const tree = await resolveTree(registryIndex, ["index", "theme"]);
+  const payload = await fetchTree(tree);
+  const baseColor = await getRegistryBaseColor();
+
   // Ensure all resolved paths directories exist.
   for (const [key, resolvedPath] of Object.entries(config.resolvedPaths)) {
     // Determine if the path is a file or directory.
@@ -173,6 +193,96 @@ export async function runInit(cwd: string, config: Config) {
     "utf8",
   );
 
+  // write provider file. and theme file in  config.resolvedPaths.provider
+
+  const providerSpinner = ora(`Writing provider file...`)?.start();
+
+  for (const item of payload) {
+    spinner.text = `Installing ${item.name}...`;
+    const targetDir = await getItemTargetPath(
+      config,
+      item,
+      cwd ? path.resolve(cwd, cwd) : undefined,
+    );
+
+    if (!targetDir) {
+      continue;
+    }
+
+    if (!existsSync(targetDir)) {
+      await fs.mkdir(targetDir, { recursive: true });
+    }
+
+    for (const file of item.files) {
+      let filePath = path.resolve(
+        targetDir,
+        config.resolvedPaths.provider,
+        file.name,
+      );
+
+      // Run transformers.
+      const content = await transform({
+        filename: file.name,
+        raw: file.content,
+        config,
+        baseColor,
+      });
+
+      if (!config.tsx) {
+        filePath = filePath.replace(/\.tsx$/, ".jsx");
+        filePath = filePath.replace(/\.ts$/, ".js");
+      }
+
+      await fs.writeFile(filePath, content);
+    }
+  }
+
+  providerSpinner?.succeed();
+
+  // write interface files if user use TS
+  // all TS files are on /registry/interface/index.json => [ "RuruContextType.ts", "RuruProviderProps.ts", "RuruThemeProviderProps.ts"]
+
+  // TODO: write interface files
+
+  if (config.tsx) {
+    // first get all interface files name
+    const interfaceRegistryIndex = await getInterfaceRegistryIndex();
+    const interfaceTree = await resolveInterfaceTree(interfaceRegistryIndex);
+    const interfacePayload = await fetchInterfaceTree(interfaceTree);
+
+    const interfaceSpinner = ora(`Writing interface files...`)?.start();
+
+    for (const item of interfacePayload) {
+      spinner.text = `Installing ${item.name}...`;
+      const targetDir = config.resolvedPaths.interfaces;
+
+      if (!targetDir) {
+        continue;
+      }
+
+      if (!existsSync(targetDir)) {
+        await fs.mkdir(targetDir, { recursive: true });
+      }
+
+      // Determine the file path and force it to have a .ts extension
+      let filePath = path.resolve(targetDir, item.name);
+      filePath = `${filePath}.ts`; // Append .ts extension
+
+      // Run transformers.
+      const content = await transform({
+        filename: item.name,
+        raw: item.content,
+        config,
+        baseColor,
+      });
+
+      // Save the file with the .ts extension
+      await fs.writeFile(filePath, content);
+    }
+
+    interfaceSpinner?.succeed();
+  }
+
   spinner?.succeed();
 
   // Install dependencies.
@@ -209,11 +319,6 @@ export async function promptForConfig(
           message: `Would you like to use ${pc.bold("TypeScript")} (recommended)?`,
           initialValue: true,
         }),
-      defaults: () =>
-        confirm({
-          message: `use default configuration.`,
-          initialValue: false,
-        }),
       tailwindCss: () =>
         text({
           message: `Where is your ${pc.bold("global CSS")} file?`,
@@ -257,6 +362,18 @@ export async function promptForConfig(
           placeholder: "@/lib/utils",
           initialValue: "@/lib/utils",
         }),
+      provider: () =>
+        text({
+          message: `Configure the import alias for ${pc.bold("provider")}:`,
+          placeholder: "@/provider",
+          initialValue: "@/provider",
+        }),
+      interfaces: () =>
+        text({
+          message: `Configure the import alias for ${pc.bold("interfaces")}:`,
+          placeholder: "@/interfaces",
+          initialValue: "@/interfaces",
+        }),
       rsc: () =>
         confirm({
           message: `Would you like to use ${pc.bold("RSC")} ?`,
@@ -272,6 +389,7 @@ export async function promptForConfig(
   );
 
   const config = rawConfigSchema.parse({
+    $schema: "https://ruru-ui.vercel.app/schema.json",
     tailwind: {
       config: options.tailwindConfig,
       css: options.tailwindCss,
@@ -284,12 +402,14 @@ export async function promptForConfig(
       components: options.components,
       utils: options.utils,
       ui: options.components,
+      provider: options.provider,
+      interfaces: options.interfaces,
     },
   });
 
   if (!skip) {
     const proceed = confirm({
-      message: `Write configuration to ${pc.bold("components.json")}. Proceed??`,
+      message: `Write configuration to ${pc.bold("ruru.json")}. Proceed??`,
       initialValue: true,
     });
 
@@ -300,8 +420,8 @@ export async function promptForConfig(
 
   // Write to file.
 
-  const spinner = ora(`Writing components.json...`)?.start();
-  const targetPath = path.resolve(cwd, "components.json");
+  const spinner = ora(`Writing ruru.json...`)?.start();
+  const targetPath = path.resolve(cwd, "ruru.json");
   await fs.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8");
   spinner.succeed();
 
@@ -338,8 +458,8 @@ export async function promptForMinimalConfig(
   });
 
   // Write to file.
-  const spinner = ora(`Writing components.json...`).start();
-  const targetPath = path.resolve(cwd, "components.json");
+  const spinner = ora(`Writing ruru.json...`).start();
+  const targetPath = path.resolve(cwd, "ruru.json");
   await fs.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8");
   spinner.succeed();
 
diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts
index 8c7ca01..5437fec 100644
--- a/packages/cli/src/utils/get-config.ts
+++ b/packages/cli/src/utils/get-config.ts
@@ -12,9 +12,9 @@ export const DEFAULT_TAILWIND_CONFIG = "tailwind.config.js";
 export const DEFAULT_TAILWIND_BASE_COLOR = "slate";
 
 // TODO: Figure out if we want to support all cosmiconfig formats.
-// A simple components.json file would be nice.
+// A simple ruru.json file would be nice.
 const explorer = cosmiconfig("components", {
-  searchPlaces: ["components.json"],
+  searchPlaces: ["ruru.json"],
 });
 
 export const rawConfigSchema = z
@@ -31,6 +31,8 @@ export const rawConfigSchema = z
       components: z.string(),
       utils: z.string(),
       ui: z.string().optional(),
+      provider: z.string().optional(),
+      interfaces: z.string().optional(),
     }),
   })
   .strict();
@@ -44,6 +46,8 @@ export const configSchema = rawConfigSchema.extend({
     utils: z.string(),
     components: z.string(),
     ui: z.string(),
+    provider: z.string(),
+    interfaces: z.string(),
   }),
 });
 
@@ -81,6 +85,12 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
       ui: config.aliases["ui"]
         ? await resolveImport(config.aliases["ui"], tsConfig)
         : await resolveImport(config.aliases["components"], tsConfig),
+      provider: config.aliases["provider"]
+        ? await resolveImport(config.aliases["provider"], tsConfig)
+        : await resolveImport(config.aliases["components"], tsConfig),
+      interfaces: config.aliases["interfaces"]
+        ? await resolveImport(config.aliases["interfaces"], tsConfig)
+        : await resolveImport(config.aliases["components"], tsConfig),
     },
   });
 }
@@ -95,6 +105,6 @@ export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
 
     return rawConfigSchema.parse(configResult.config);
   } catch (error) {
-    throw new Error(`Invalid configuration found in ${cwd}/components.json.`);
+    throw new Error(`Invalid configuration found in ${cwd}/ruru.json.`);
   }
 }
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
index cd29be2..0cc8691 100644
--- a/packages/cli/src/utils/registry/index.ts
+++ b/packages/cli/src/utils/registry/index.ts
@@ -1,10 +1,12 @@
 import path from "path";
 import { Config } from "@/utils/get-config";
 import {
+  interfaceRegistryIndexsSchemaSchema,
   registryBaseColorSchema,
   registryIndexSchema,
   registryItemWithContentSchema,
   registryWithContentSchema,
+  registryWithContentSchemaForInterfaces,
   stylesSchema,
 } from "@/utils/registry/schema";
 import { HttpsProxyAgent } from "https-proxy-agent";
@@ -28,6 +30,26 @@ export async function getRegistryIndex() {
   }
 }
 
+export async function getProviderRegistryIndex() {
+  try {
+    const [result] = await fetchRegistry(["providers/index.json"]);
+
+    return registryIndexSchema.parse(result);
+  } catch (error) {
+    throw new Error(`Failed to fetch components from registry.`);
+  }
+}
+
+export async function getInterfaceRegistryIndex() {
+  try {
+    const [result] = await fetchRegistry(["interface/index.json"]);
+
+    return interfaceRegistryIndexsSchemaSchema.parse(result);
+  } catch (error) {
+    throw new Error(`Failed to fetch components from registry.`);
+  }
+}
+
 export async function getRegistryStyles() {
   try {
     const [result] = await fetchRegistry(["styles/index.json"]);
@@ -100,7 +122,15 @@ export async function resolveTree(
   );
 }
 
-export async function fetchTree(tree: z.infer<typeof registryIndexSchema>) {
+export async function resolveInterfaceTree(
+  index: z.infer<typeof interfaceRegistryIndexsSchemaSchema>,
+) {
+  return index;
+}
+
+export async function fetchComponentsTree(
+  tree: z.infer<typeof registryIndexSchema>,
+) {
   try {
     const paths = tree.map((item) => `components/${item.name}.json`);
     const result = await fetchRegistry(paths);
@@ -111,6 +141,30 @@ export async function fetchTree(tree: z.infer<typeof registryIndexSchema>) {
   }
 }
 
+export async function fetchTree(tree: z.infer<typeof registryIndexSchema>) {
+  try {
+    const paths = tree.map((item) => `providers/components/${item.name}.json`);
+    const result = await fetchRegistry(paths);
+
+    return registryWithContentSchema.parse(result);
+  } catch (error) {
+    throw new Error(`Failed to fetch tree from registry.`);
+  }
+}
+
+export async function fetchInterfaceTree(
+  tree: z.infer<typeof interfaceRegistryIndexsSchemaSchema>,
+) {
+  try {
+    const paths = tree.map((item) => `interface/${item.name}.json`);
+    const result = await fetchRegistry(paths);
+
+    return registryWithContentSchemaForInterfaces.parse(result);
+  } catch (error) {
+    throw new Error(`Failed to fetch tree from registry.`);
+  }
+}
+
 export async function getItemTargetPath(
   config: Config,
   item: Pick<z.infer<typeof registryItemWithContentSchema>, "type">,
@@ -124,6 +178,10 @@ export async function getItemTargetPath(
     return config.resolvedPaths.ui;
   }
 
+  if (item.type === "components:component" && config.aliases.provider) {
+    return config.resolvedPaths.provider;
+  }
+
   const [parent, type] = item.type.split(":");
   if (!(parent in config.resolvedPaths)) {
     return null;
diff --git a/packages/cli/src/utils/registry/schema.ts b/packages/cli/src/utils/registry/schema.ts
index 0586de2..8001324 100644
--- a/packages/cli/src/utils/registry/schema.ts
+++ b/packages/cli/src/utils/registry/schema.ts
@@ -24,6 +24,15 @@ export const registryItemWithContentSchema = registryItemSchema.extend({
 
 export const registryWithContentSchema = z.array(registryItemWithContentSchema);
 
+export const registryItemWithContentSchemaForInterfaces = z.object({
+  name: z.string(),
+  content: z.string(),
+});
+
+export const registryWithContentSchemaForInterfaces = z.array(
+  registryItemWithContentSchemaForInterfaces,
+);
+
 export const stylesSchema = z.array(
   z.object({
     name: z.string(),
@@ -43,3 +52,11 @@ export const registryBaseColorSchema = z.object({
   inlineColorsTemplate: z.string(),
   cssVarsTemplate: z.string(),
 });
+
+export const interfaceRegistryIndexSchemaSchema = z.object({
+  name: z.string(),
+});
+
+export const interfaceRegistryIndexsSchemaSchema = z.array(
+  interfaceRegistryIndexSchemaSchema,
+);
diff --git a/packages/cli/src/utils/transformers/transform-import.ts b/packages/cli/src/utils/transformers/transform-import.ts
index d989e89..ff31a05 100644
--- a/packages/cli/src/utils/transformers/transform-import.ts
+++ b/packages/cli/src/utils/transformers/transform-import.ts
@@ -33,6 +33,29 @@ export const transformImport: Transformer = async ({ sourceFile, config }) => {
         );
       }
     }
+
+    // Replace `import { type RuruProviderProps } from "@/interface/RuruProviderProps";`
+    if (
+      moduleSpecifier.startsWith("@/interface/") &&
+      config.aliases.interfaces
+    ) {
+      console.log(moduleSpecifier);
+      if (config.aliases.ui) {
+        importDeclaration.setModuleSpecifier(
+          moduleSpecifier.replace(
+            /^@\/interface\/[^/]+\/ui/,
+            config.aliases.interfaces,
+          ),
+        );
+      } else {
+        importDeclaration.setModuleSpecifier(
+          moduleSpecifier.replace(
+            /^@\/interface\/[^/]+/,
+            config.aliases.interfaces,
+          ),
+        );
+      }
+    }
   }
 
   return sourceFile;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b3dc9e7..e5d5329 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -43,6 +43,10 @@
       "import": "./dist/provider/index.js",
       "types": "./dist/provider/index.d.ts"
     },
+    "./theme": {
+      "import": "./dist/provider/theme.js",
+      "types": "./dist/provider/theme.d.ts"
+    },
     "./utils": {
       "import": "./dist/utils/cn.js",
       "types": "./dist/utils/cn.d.ts"
diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx
index bbf3a5b..19bce19 100644
--- a/packages/ui/src/components/avatar.tsx
+++ b/packages/ui/src/components/avatar.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { cn } from "@/utils/cn";
-
 /**
  * Props for the Avatar component.
  */
@@ -56,7 +55,6 @@ type AvatarProps = Omit<
    */
   src: string;
 };
-
 /**
  * Avatar component
  * @param {AvatarProps} props
@@ -134,10 +132,34 @@ type AvatarGroupProps = Omit<
    *
    */
   limit?: number;
+  /**
+   * Additional class name for the avatar
+   *
+   * @type string
+   * @example
+   *
+   * ```tsx
+   * <AvatarGroup aClassName="text-primary-foreground" />
+   * ```
+   */
   aClassName?: string;
+  /**
+   * Additional class name for the last count
+   *
+   * @type string
+   * @example
+   *
+   * ```tsx
+   * <AvatarGroup lnClassName="text-primary-foreground" />
+   * ```
+   */
   lnClassName?: string;
 };
-
+/**
+ * AvatarGroup component
+ * @param {AvatarGroupProps} props
+ * @returns {ReactElement}
+ */
 const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
   (
     { className, aClassName, lnClassName, size = 30, members, limit, ...props },
@@ -246,10 +268,30 @@ type AvatarWithBadgeProps = Omit<
    *
    */
   badgeSrc: string;
+  /**
+   * Additional class name for the avatar
+   *
+   * @type string
+   * @example
+   *
+   * ```tsx
+   * <AvatarWithBadge iClassName="text-primary-foreground" />
+   * ```
+   */
   iClassName?: string;
+  /**
+   * Additional class name for the badge
+   *
+   * @type string
+   *
+   * @example
+   *
+   * ```tsx
+   * <AvatarWithBadge sClassName="text-primary-foreground" />
+   * ```
+   */
   sClassName?: string;
 };
-
 /**
  * AvatarWithBadge component
  *
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index 65f81b1..07ced29 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -11,7 +11,19 @@ type CheckboxProps = React.ComponentPropsWithoutRef<
 > & {
   indeterminate?: boolean;
 };
-
+/**
+ * Checkbox component
+ *
+ * @param {React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>} props
+ * @param {boolean} [props.indeterminate=false] - Indeterminate state of the checkbox
+ * @returns {React.ReactElement} - The checkbox component
+ * @example
+ *
+ * ```tsx
+ * <Checkbox indeterminate />
+ * ```
+ *
+ */
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   CheckboxProps
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index bb9c99f..13c14ed 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
       <SelectPrimitive.Trigger
         ref={ref}
         className={cn(
-          "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-ring focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+          "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
           className,
         )}
         {...props}
@@ -41,7 +41,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-ring focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:border-primary/75 focus:dark:ring-primary/35 focus:ring-primary/35 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
         className,
       )}
       {...props}
diff --git a/packages/ui/src/components/switch.tsx b/packages/ui/src/components/switch.tsx
index 51a603d..2761d2f 100644
--- a/packages/ui/src/components/switch.tsx
+++ b/packages/ui/src/components/switch.tsx
@@ -1,10 +1,19 @@
-// "use client";
-
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 import { cn } from "@/utils/cn";
-
+/**
+ * Switch component
+ *
+ * @param {string} className - Additional class names for the switch.
+ * @param {React.Ref<React.ElementRef<typeof SwitchPrimitives.Root>>} ref - Forwarded ref.
+ *
+ * @example
+ *
+ * ```tsx
+ * <Switch />
+ * ```
+ */
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 89f7235..d79df4d 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -35,12 +35,12 @@ const AnimatedTabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ children, ...props }, ref) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [activeIndex] = useState(0);
   const [indicatorProps, setIndicatorProps] = useState({
     width: 0,
     left: 0,
   });
+  const [hasMounted, setHasMounted] = useState(false);
 
   const listRef = useRef<HTMLDivElement | null>(null);
 
@@ -57,7 +57,11 @@ const AnimatedTabsList = React.forwardRef<
         left: activeTab.offsetLeft,
       });
     }
-  }, [activeIndex, children]);
+
+    if (!hasMounted) {
+      setHasMounted(true);
+    }
+  }, [activeIndex, children, hasMounted]);
 
   return (
     <TabsPrimitive.List
@@ -75,7 +79,11 @@ const AnimatedTabsList = React.forwardRef<
       {children}
       <motion.div
         className="absolute bottom-0 h-[2px] bg-primary"
-        animate={{ width: indicatorProps.width, left: indicatorProps.left }}
+        animate={
+          hasMounted
+            ? { width: indicatorProps.width, left: indicatorProps.left }
+            : false
+        }
         transition={{ type: "spring", stiffness: 500, damping: 30 }}
       />
     </TabsPrimitive.List>
@@ -101,16 +109,21 @@ TabsList.displayName = "TabsList";
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->((props, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    {...props}
-    className={cn(
-      "whitespace-nowrap border-b border-transparent py-2 text-sm font-medium transition-colors hover:text-primary disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary text-muted-foreground mx-1 data-[state=active]:border-primary",
-      props.className,
-    )}
-  />
-));
+>((props, ref) => {
+  const { animation } = useRuru();
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      {...props}
+      className={cn(
+        "whitespace-nowrap py-2 text-sm font-medium transition-colors hover:text-primary disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary text-muted-foreground mx-1 ",
+        props.className,
+        !animation &&
+          "border-b border-transparent data-[state=active]:border-primary",
+      )}
+    />
+  );
+});
 TabsTrigger.displayName = "TabsTrigger";
 
 const TabsContent = React.forwardRef<
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
index 4d571f6..66a1097 100644
--- a/packages/ui/src/components/tooltip.tsx
+++ b/packages/ui/src/components/tooltip.tsx
@@ -2,8 +2,10 @@
 
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { motion } from "framer-motion";
 
 import { cn } from "@/utils/cn";
+import { useRuru } from "@/provider";
 /**
  * TooltipProvider component.
  * Provides context for all tooltip components.
@@ -66,20 +68,50 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 5, ...props }, ref) => {
+  const { animation } = useRuru();
+
+  return animation ? (
+    <AnimatedTooltipContent ref={ref} {...props} />
+  ) : (
+    <TooltipPrimitive.Content
+      ref={ref}
+      className={cn(
+        "h-fit data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-primary-foreground select-none rounded-[4px] bg-primary px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]",
+        className,
+      )}
+      sideOffset={sideOffset}
+      {...props}
+    >
+      {props.children}
+      <TooltipPrimitive.Arrow className="fill-primary" />
+    </TooltipPrimitive.Content>
+  );
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+const AnimatedTooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 5, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    className={cn(
-      "h-fit data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-primary-foreground select-none rounded-[4px] bg-primary px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]",
-      className,
-    )}
-    sideOffset={sideOffset}
-    {...props}
-  >
-    {props.children}
-    <TooltipPrimitive.Arrow className="fill-primary" />
+  <TooltipPrimitive.Content asChild sideOffset={sideOffset} {...props}>
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      transition={{ duration: 0.2, ease: "easeOut" }}
+      className={cn(
+        "h-fit text-primary-foreground select-none rounded-[4px] bg-primary px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]",
+        className,
+      )}
+    >
+      <div>
+        {props.children}
+        <TooltipPrimitive.Arrow className="fill-primary" />
+      </div>
+    </motion.div>
   </TooltipPrimitive.Content>
 ));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/packages/ui/src/interface/RuruContextType.ts b/packages/ui/src/interfaces/RuruContextType.ts
similarity index 100%
rename from packages/ui/src/interface/RuruContextType.ts
rename to packages/ui/src/interfaces/RuruContextType.ts
diff --git a/packages/ui/src/interface/RuruProviderProps.ts b/packages/ui/src/interfaces/RuruProviderProps.ts
similarity index 95%
rename from packages/ui/src/interface/RuruProviderProps.ts
rename to packages/ui/src/interfaces/RuruProviderProps.ts
index caf68a4..704f30a 100644
--- a/packages/ui/src/interface/RuruProviderProps.ts
+++ b/packages/ui/src/interfaces/RuruProviderProps.ts
@@ -1,5 +1,4 @@
 import { type ReactNode } from "react";
-
 /**
  * Properties for the `RuruProvider` component.
  *
@@ -18,4 +17,5 @@ export interface RuruProviderProps {
   children: ReactNode;
   togleThemeAnimation?: boolean;
   disableAnimation?: boolean;
+  disableBaseColor?: boolean;
 }
diff --git a/packages/ui/src/interface/RuruThemeProviderProps.ts b/packages/ui/src/interfaces/RuruThemeProviderProps.ts
similarity index 99%
rename from packages/ui/src/interface/RuruThemeProviderProps.ts
rename to packages/ui/src/interfaces/RuruThemeProviderProps.ts
index 0e5a205..9cc220f 100644
--- a/packages/ui/src/interface/RuruThemeProviderProps.ts
+++ b/packages/ui/src/interfaces/RuruThemeProviderProps.ts
@@ -1,5 +1,4 @@
 import { type ReactNode } from "react";
-
 /**
  * Properties for the `RuruThemeProvider` component.
  *
diff --git a/packages/ui/src/provider/index.tsx b/packages/ui/src/provider/index.tsx
index 98ea0ca..9dceaee 100644
--- a/packages/ui/src/provider/index.tsx
+++ b/packages/ui/src/provider/index.tsx
@@ -1,10 +1,9 @@
 "use client";
 
 import React, { createContext, useContext, useState } from "react";
-import { type RuruContextType } from "@/interface/RuruContextType";
-import { type RuruProviderProps } from "@/interface/RuruProviderProps";
+import { type RuruContextType } from "@/interfaces/RuruContextType";
+import { type RuruProviderProps } from "@/interfaces/RuruProviderProps";
 import { RuruThemeProvider } from "./theme";
-
 // Create the context with default values
 const RuruContext = createContext<RuruContextType | undefined>(undefined);
 
@@ -12,18 +11,22 @@ export const RuruProvider: React.FC<RuruProviderProps> = ({
   children,
   togleThemeAnimation = false,
   disableAnimation = false,
+  disableBaseColor = false,
 }) => {
   const [animation, setAnimation] = useState(!disableAnimation);
 
   return (
     <RuruContext.Provider value={{ disableAnimation, animation, setAnimation }}>
       <RuruThemeProvider disableTransitionOnChange={!togleThemeAnimation}>
-        {children}
+        {disableBaseColor ? (
+          children
+        ) : (
+          <div className="bg-card">{children}</div>
+        )}
       </RuruThemeProvider>
     </RuruContext.Provider>
   );
 };
-
 /**
  * Custom hook to use the Ruru context.
  *
diff --git a/packages/ui/src/provider/theme.tsx b/packages/ui/src/provider/theme.tsx
index 9915348..af3073e 100644
--- a/packages/ui/src/provider/theme.tsx
+++ b/packages/ui/src/provider/theme.tsx
@@ -2,8 +2,7 @@
 
 import { ThemeProvider } from "next-themes";
 import React from "react";
-import { type RuruThemeProviderProps } from "@/interface/RuruThemeProviderProps";
-
+import { type RuruThemeProviderProps } from "@/interfaces/RuruThemeProviderProps";
 /**
  * A wrapper component to provide theme context using `next-themes`.
  *
@@ -36,7 +35,10 @@ export const RuruThemeProvider: React.FC<RuruThemeProviderProps> = ({
       enableSystem={enableSystem}
       disableTransitionOnChange={disableTransitionOnChange}
     >
-      <div className="bg-card">{children}</div>
+      <div>{children}</div>
     </ThemeProvider>
   );
 };
+
+import { useTheme } from "next-themes";
+export { useTheme };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f2ab2a8..f1bdaf1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -130,6 +130,12 @@ importers:
       '@radix-ui/react-scroll-area':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@vercel/analytics':
+        specifier: ^1.3.1
+        version: 1.3.1(next@14.2.5)(react@18.3.1)
       fs:
         specifier: 0.0.1-security
         version: 0.0.1-security
@@ -3624,6 +3630,22 @@ packages:
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  /@vercel/analytics@1.3.1(next@14.2.5)(react@18.3.1):
+    resolution: {integrity: sha512-xhSlYgAuJ6Q4WQGkzYTLmXwhYl39sWjoMA3nHxfkvG+WdBT25c563a7QhwwKivEOZtPJXifYHR1m2ihoisbWyA==}
+    peerDependencies:
+      next: '>= 13'
+      react: ^18 || ^19
+    peerDependenciesMeta:
+      next:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      next: 14.2.5(@babel/core@7.24.9)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      server-only: 0.0.1
+    dev: false
+
   /@vercel/style-guide@6.0.0(eslint@8.57.0)(prettier@3.3.3)(typescript@5.4.5):
     resolution: {integrity: sha512-tu0wFINGz91EPwaT5VjSqUwbvCY9pvLach7SPG4XyfJKPU9Vku2TFa6+AyzJ4oroGbo9fK+TQhIFHrnFl0nCdg==}
     engines: {node: '>=18.18'}
@@ -9170,6 +9192,10 @@ packages:
       upper-case-first: 1.1.2
     dev: true
 
+  /server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+    dev: false
+
   /set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}