diff --git a/app/layout.tsx b/app/layout.tsx
index 0396d04..1582a7e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import TopNav from "@/components/TopNav";
 import "./global.css";
 import { Archivo_Black, Space_Grotesk, Space_Mono } from "next/font/google";
 import { Metadata } from "next";
+import { Toaster } from "@/components/retroui";
 
 const archivoBlack = Archivo_Black({
   subsets: ["latin"],
@@ -55,6 +56,7 @@ export default function RootLayout({
           <TopNav />
         </div>
         {children}
+        <Toaster />
       </body>
     </html>
   );
diff --git a/components/retroui/Popover.tsx b/components/retroui/Popover.tsx
new file mode 100644
index 0000000..6a7ad1a
--- /dev/null
+++ b/components/retroui/Popover.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+import { cva, VariantProps } from "class-variance-authority";
+
+const popoverContentVariants = cva(
+    "z-50 w-72 rounded-md border bg-primary p-4 text-popover-foreground  outline-none 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 origin-[--radix-popover-content-transform-origin]",
+    {
+        variants: {
+            variant: {
+                default: "bg-background",
+                primary: "bg-primary",
+            },
+            shadow: {
+                default: "",
+                sm: "shadow-sm",
+                md: "shadow-md",
+                lg: "shadow-lg",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            shadow: "default",
+        },
+    },
+);
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+    React.ElementRef<typeof PopoverPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
+        VariantProps<typeof popoverContentVariants>
+>(
+    (
+        {
+            className,
+            align = "center",
+            sideOffset = 4,
+            variant,
+            shadow,
+            ...props
+        },
+        ref,
+    ) => (
+        <PopoverPrimitive.Portal>
+            <PopoverPrimitive.Content
+                ref={ref}
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                    popoverContentVariants({
+                        variant,
+                        shadow,
+                        className,
+                    }),
+                )}
+                {...props}
+            />
+        </PopoverPrimitive.Portal>
+    ),
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/components/retroui/Sonner.tsx b/components/retroui/Sonner.tsx
new file mode 100644
index 0000000..71a47da
--- /dev/null
+++ b/components/retroui/Sonner.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+    return (
+        <Sonner
+            toastOptions={{
+                classNames: {
+                    toast: "h-auto w-full p-4 bg-background rounded-md border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border shadow-lg flex items-center relative",
+                    description:
+                        "group-[.toast]:text-muted-foreground ml-2 font-sans",
+                    actionButton:
+                        "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 shadow-md bg-background border-border border-2 ml-auto h-fit min-w-fit",
+                    cancelButton:
+                        "group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 shadow-md bg-background border-border border-2 ml-auto h-fit min-w-fit",
+                    title: "ml-2 font-sans",
+                    closeButton:
+                        "absolute bg-background shadow-md -top-1 -left-1 rounded-full p-0.5",
+                },
+                unstyled: true,
+            }}
+            {...props}
+        />
+    );
+};
+
+export { Toaster };
diff --git a/components/retroui/Toggle.tsx b/components/retroui/Toggle.tsx
new file mode 100644
index 0000000..9270e0c
--- /dev/null
+++ b/components/retroui/Toggle.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+    "inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted",
+                outlined:
+                    "border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+                solid: "border-2 border-input bg-transparent hover:bg-black hover:text-white/90 hover:border-black data-[state=on]:bg-black data-[state=on]:text-white data-[state=on]:border-black",
+                "outline-muted":
+                    "border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted",
+            },
+            size: {
+                default: "h-10 px-3 min-w-10",
+                sm: "h-9 px-2.5 min-w-9",
+                lg: "h-11 px-5 min-w-11",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+const Toggle = React.forwardRef<
+    React.ElementRef<typeof TogglePrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+        VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+    <TogglePrimitive.Root
+        ref={ref}
+        className={cn(toggleVariants({ variant, size, className }))}
+        {...props}
+    />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
diff --git a/components/retroui/ToggleGroup.tsx b/components/retroui/ToggleGroup.tsx
new file mode 100644
index 0000000..5d9d129
--- /dev/null
+++ b/components/retroui/ToggleGroup.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "./Toggle";
+
+const ToggleGroupContext = React.createContext<
+    VariantProps<typeof toggleVariants>
+>({
+    size: "default",
+    variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+    React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+        VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+    <ToggleGroupPrimitive.Root
+        ref={ref}
+        className={cn("flex items-center justify-center gap-1", className)}
+        {...props}
+    >
+        <ToggleGroupContext.Provider value={{ variant, size }}>
+            {children}
+        </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+    React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+        VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+    const context = React.useContext(ToggleGroupContext);
+
+    return (
+        <ToggleGroupPrimitive.Item
+            ref={ref}
+            className={cn(
+                toggleVariants({
+                    variant: context.variant || variant,
+                    size: context.size || size,
+                }),
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </ToggleGroupPrimitive.Item>
+    );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/components/retroui/Tooltip.tsx b/components/retroui/Tooltip.tsx
new file mode 100644
index 0000000..37d7c5d
--- /dev/null
+++ b/components/retroui/Tooltip.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+import { cva, VariantProps } from "class-variance-authority";
+
+const tooltipContentVariants = cva(
+    "z-50 overflow-hidden border-2 border-border bg-background px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 origin-[--radix-tooltip-content-transform-origin]",
+    {
+        variants: {
+            variant: {
+                default: "bg-background text-foreground",
+                primary: "bg-primary text-foreground",
+                solid: "bg-solid text-solid-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+        VariantProps<typeof tooltipContentVariants>
+>(({ className, sideOffset = 4, variant, ...props }, ref) => (
+    <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={cn(
+                tooltipContentVariants({
+                    variant,
+                    className,
+                }),
+            )}
+            {...props}
+        />
+    </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/components/retroui/index.ts b/components/retroui/index.ts
index ba8f34c..63ebfae 100644
--- a/components/retroui/index.ts
+++ b/components/retroui/index.ts
@@ -17,3 +17,8 @@ export * from "./Tab";
 export * from "./Dialog";
 export * from "./Menu";
 export * from "./Progress";
+export * from "./Popover";
+export * from "./Toggle";
+export * from "./ToggleGroup";
+export * from "./Sonner";
+export * from "./Tooltip";
diff --git a/config/components.ts b/config/components.ts
index ca40200..453eb06 100644
--- a/config/components.ts
+++ b/config/components.ts
@@ -67,6 +67,10 @@ export const componentConfig: {
       name: "progress",
       filePath: "components/retroui/Progress.tsx",
     },
+    popover: {
+      name: "popover",
+      filePath: "components/retroui/Popover.tsx",
+    },
     radio: {
       name: "radio",
       filePath: "components/retroui/Radio.tsx",
@@ -79,15 +83,31 @@ export const componentConfig: {
       name: "switch",
       filePath: "components/retroui/Switch.tsx",
     },
-    text: {
-      name: "text",
-      filePath: "components/retroui/Text.tsx",
-    },
     slider: {
       name: "slider",
       dependencies: ["@radix-ui/react-slider"],
       filePath: "components/retroui/Slider.tsx",
     },
+    sonner: {
+      name: "sonner",
+      filePath: "components/retroui/Sonner.tsx",
+    },
+    text: {
+      name: "text",
+      filePath: "components/retroui/Text.tsx",
+    },
+    toggle: {
+      name: "toggle",
+      filePath: "components/retroui/Toggle.tsx",
+    },
+    "toggle-group": {
+      name: "toggle-group",
+      filePath: "components/retroui/ToggleGroup.tsx",
+    },
+    tooltip: {
+      name: "tooltip",
+      filePath: "components/retroui/Tooltip.tsx",
+    },
   },
   examples: {
     "accordion-style-default": {
@@ -262,6 +282,30 @@ export const componentConfig: {
         () => import("@/preview/components/progress-style-default"),
       ),
     },
+    "popover-style-default": {
+      name: "popover-style-default",
+      filePath: "preview/components/popover-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/popover-style-default")),
+    },
+    "popover-style-primary": {
+      name: "popover-style-primary",
+      filePath: "preview/components/popover-style-primary.tsx",
+      preview: lazy(() => import("@/preview/components/popover-style-primary")),
+    },
+    "popover-style-default-shadow": {
+      name: "popover-style-default-shadow",
+      filePath: "preview/components/popover-style-default-shadow.tsx",
+      preview: lazy(
+        () => import("@/preview/components/popover-style-default-shadow"),
+      ),
+    },
+    "popover-style-primary-shadow": {
+      name: "popover-style-primary-shadow",
+      filePath: "preview/components/popover-style-primary-shadow.tsx",
+      preview: lazy(
+        () => import("@/preview/components/popover-style-primary-shadow"),
+      ),
+    },
     "radio-style-default": {
       name: "radio-style-default",
       filePath: "preview/components/radio-style-default.tsx",
@@ -345,5 +389,97 @@ export const componentConfig: {
       filePath: "preview/components/slider-style-default.tsx",
       preview: lazy(() => import("@/preview/components/slider-style-default")),
     },
+    "toggle-style-default": {
+      name: "toggle-style-default",
+      filePath: "preview/components/toggle-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/toggle-style-default")),
+    },
+    "toggle-style-outlined": {
+      name: "toggle-style-outlined",
+      filePath: "preview/components/toggle-style-outlined.tsx",
+      preview: lazy(() => import("@/preview/components/toggle-style-outlined")),
+    },
+    "toggle-style-solid": {
+      name: "toggle-style-solid",
+      filePath: "preview/components/toggle-style-solid.tsx",
+      preview: lazy(() => import("@/preview/components/toggle-style-solid")),
+    },
+    "toggle-style-outline-muted": {
+      name: "toggle-style-outline-muted",
+      filePath: "preview/components/toggle-style-outline-muted.tsx",
+      preview: lazy(
+        () => import("@/preview/components/toggle-style-outline-muted"),
+      ),
+    },
+    "sonner-style-default": {
+      name: "sonner-style-default",
+      filePath: "preview/components/sonner-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/sonner-style-default")),
+    },
+    "sonner-style-warning": {
+      name: "sonner-style-warning",
+      filePath: "preview/components/sonner-style-warning.tsx",
+      preview: lazy(() => import("@/preview/components/sonner-style-warning")),
+    },
+    "sonner-style-error": {
+      name: "sonner-style-error",
+      filePath: "preview/components/sonner-style-error.tsx",
+      preview: lazy(() => import("@/preview/components/sonner-style-error")),
+    },
+    "sonner-style-rich-colors": {
+      name: "sonner-style-rich-colors",
+      filePath: "preview/components/sonner-style-rich-colors.tsx",
+      preview: lazy(
+        () => import("@/preview/components/sonner-style-rich-colors"),
+      ),
+    },
+    label: {
+      name: "label",
+      filePath: "preview/components/label.tsx",
+      preview: lazy(() => import("@/preview/components/label")),
+    },
+    "tooltip-style-default": {
+      name: "tooltip-style-default",
+      filePath: "preview/components/tooltip-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/tooltip-style-default")),
+    },
+    "tooltip-style-solid": {
+      name: "tooltip-style-solid",
+      filePath: "preview/components/tooltip-style-solid.tsx",
+      preview: lazy(() => import("@/preview/components/tooltip-style-solid")),
+    },
+    "tooltip-style-primary": {
+      name: "tooltip-style-primary",
+      filePath: "preview/components/tooltip-style-primary.tsx",
+      preview: lazy(() => import("@/preview/components/tooltip-style-primary")),
+    },
+    "toggle-group-style-default": {
+      name: "toggle-group-style-default",
+      filePath: "preview/components/toggle-group-style-default.tsx",
+      preview: lazy(
+        () => import("@/preview/components/toggle-group-style-default"),
+      ),
+    },
+    "toggle-group-style-outlined": {
+      name: "toggle-group-style-outlined",
+      filePath: "preview/components/toggle-group-style-outlined.tsx",
+      preview: lazy(
+        () => import("@/preview/components/toggle-group-style-outlined"),
+      ),
+    },
+    "toggle-group-style-outline-muted": {
+      name: "toggle-group-style-outline-muted",
+      filePath: "preview/components/toggle-group-style-outline-muted.tsx",
+      preview: lazy(
+        () => import("@/preview/components/toggle-group-style-outline-muted"),
+      ),
+    },
+    "toggle-group-style-solid": {
+      name: "toggle-group-style-solid",
+      filePath: "preview/components/toggle-group-style-solid.tsx",
+      preview: lazy(
+        () => import("@/preview/components/toggle-group-style-solid"),
+      ),
+    },
   },
 };
diff --git a/config/navigation.ts b/config/navigation.ts
index 7f18508..59092bf 100644
--- a/config/navigation.ts
+++ b/config/navigation.ts
@@ -35,14 +35,39 @@ export const navConfig: INavigationConfig = {
         { title: "Input", href: `${componentsRoute}/input` },
         { title: "Label", href: `${componentsRoute}/label`, tag: "New" },
         { title: "Menu", href: `${componentsRoute}/menu` },
+        {
+          title: "Popover",
+          href: `${componentsRoute}/popover`,
+          tag: "New",
+        },
         { title: "Progress", href: `${componentsRoute}/progress` },
         { title: "Radio", href: `${componentsRoute}/radio` },
         { title: "Select", href: `${componentsRoute}/select` },
         { title: "Slider", href: `${componentsRoute}/slider`, tag: "New" },
+        {
+          title: "Sonner",
+          href: `${componentsRoute}/sonner`,
+          tag: "New",
+        },
         { title: "Switch", href: `${componentsRoute}/switch` },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },
         { title: "Text", href: `${componentsRoute}/text` },
+        {
+          title: "Toggle",
+          href: `${componentsRoute}/toggle`,
+          tag: "New",
+        },
+        {
+          title: "Toggle Group",
+          href: `${componentsRoute}/toggle-group`,
+          tag: "New",
+        },
+        {
+          title: "Tooltip",
+          href: `${componentsRoute}/tooltip`,
+          tag: "New",
+        },
       ],
     },
     {
diff --git a/content/docs/components/popover.mdx b/content/docs/components/popover.mdx
new file mode 100644
index 0000000..86a7273
--- /dev/null
+++ b/content/docs/components/popover.mdx
@@ -0,0 +1,80 @@
+---
+title: Popover
+description: A handy small component for your little input needs...😉
+lastUpdated: 08 Apr, 2025
+---
+
+<ComponentShowcase name="popover-style-default" />
+<br />
+<br />
+
+<ComponentInstall>
+    <ComponentInstall.Cli>
+        ```sh
+        npx shadcn@latest add "https://retroui.dev/r/popover.json"
+        ```
+    </ComponentInstall.Cli>
+    <ComponentInstall.Manual>
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-popover
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="popover" />
+    </ComponentInstall.Manual>
+
+</ComponentInstall>
+
+<br />
+<br />
+
+## Usage
+
+```typescript
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/retroui/popover";
+```
+
+```typescript
+<Popover>
+  <PopoverTrigger>Open</PopoverTrigger>
+  <PopoverContent>Place content for the popover here.</PopoverContent>
+</Popover>
+```
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="popover-style-default" />
+<br />
+<br />
+
+### Primary
+
+<ComponentShowcase name="popover-style-primary" />
+<br />
+<br />
+
+### Shadowed
+
+<ComponentShowcase name="popover-style-default-shadow" />
+<br />
+<br />
+
+### Primary Shadowed
+
+<ComponentShowcase name="popover-style-primary-shadow" />
+<br />
+<br />
diff --git a/content/docs/components/slider.mdx b/content/docs/components/slider.mdx
index 4c7b46f..6cdf54e 100644
--- a/content/docs/components/slider.mdx
+++ b/content/docs/components/slider.mdx
@@ -4,7 +4,7 @@ description: A customizable slider component with two variants.
 lastUpdated: 25 Mar, 2025
 links:
   api_reference: https://www.radix-ui.com/docs/primitives/components/slider#api-reference
-  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Slider.tsx 
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Slider.tsx
 ---
 
 <ComponentShowcase name="slider-style-default" />
@@ -20,7 +20,7 @@ links:
     ```
   </ComponentInstall.Cli>
   <ComponentInstall.Manual>
-  
+
 #### 1. Install dependencies:
 
 ```sh
@@ -43,4 +43,4 @@ npm install @radix-ui/react-slider
 
 ### Default
 
-<ComponentShowcase name="slider-style-default" />
\ No newline at end of file
+<ComponentShowcase name="slider-style-default" />
diff --git a/content/docs/components/sonner.mdx b/content/docs/components/sonner.mdx
new file mode 100644
index 0000000..4159099
--- /dev/null
+++ b/content/docs/components/sonner.mdx
@@ -0,0 +1,86 @@
+---
+title: Sonner
+description: A beautiful toast component that can grab audience attention from any place.
+lastUpdated: 04 Apr, 2025
+---
+
+<ComponentShowcase name="sonner-style-default" />
+<br />
+<br />
+
+## About
+
+[Sonner](https://sonner.emilkowal.ski) is built and maintained by [Emil Kowalski](https://x.com/emilkowalski_)
+
+<br />
+<br />
+
+## Installation
+
+<ComponentInstall>
+    <ComponentInstall.Cli>
+        ```sh
+        npx shadcn@latest add "https://retroui.dev/r/sonner.json"
+        ```
+    </ComponentInstall.Cli>
+    <ComponentInstall.Manual>
+    #### 1. Install dependencies:
+
+    ```sh
+    npm install sonner
+    ```
+
+    <br />
+    #### 2. Copy the code 👇 into your project:
+
+    <ComponentSource name="sonner" />
+
+    <br/>
+    ### 3. Add ``Toaster`` in your ``app/layout.tsx``
+
+    ```tsx
+    import { Toaster } from "@/components/retroui/sonner"
+
+    export default function RootLayout({ children }) {
+      return (
+        <html lang="en">
+          <head />
+          <body>
+            <main>{children}</main>
+            <Toaster />
+          </body>
+        </html>
+      )
+    }
+    ```
+    </ComponentInstall.Manual>
+
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="sonner-style-default" />
+<br />
+<br />
+
+### Warning Sonner
+
+<ComponentShowcase name="sonner-style-warning" />
+<br />
+<br />
+
+### Error Sonner
+
+<ComponentShowcase name="sonner-style-error" />
+
+<br />
+<br />
+
+### Rich Colors Sonner
+
+<ComponentShowcase name="sonner-style-rich-colors" />
diff --git a/content/docs/components/toggle-group.mdx b/content/docs/components/toggle-group.mdx
new file mode 100644
index 0000000..e7b8035
--- /dev/null
+++ b/content/docs/components/toggle-group.mdx
@@ -0,0 +1,84 @@
+---
+title: Toggle Group
+description: Group of toggling buttons...🤙
+lastUpdated: 08 Apr, 2025
+---
+
+<ComponentShowcase name="toggle-group-style-default" />
+<br />
+<br />
+
+<ComponentInstall>
+    <ComponentInstall.Cli>
+        ```sh
+        npx shadcn@latest add "https://retroui.dev/r/toggle-group.json"
+        ```
+    </ComponentInstall.Cli>
+    <ComponentInstall.Manual>
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-toggle-group @radix-ui/react-toggle
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project `toggle.tsx`:
+
+<ComponentSource name="toggle" />
+
+<br />
+
+#### 3. Copy the code 👇 into your project `toggle-group.tsx`:
+
+<ComponentSource name="toggle-group" />
+    </ComponentInstall.Manual>
+
+</ComponentInstall>
+
+<br />
+<br />
+
+## Usage
+
+```tsx
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/components/retroui/toggle-group";
+```
+
+```tsx
+<ToggleGroup type="single">
+  <ToggleGroupItem value="a">A</ToggleGroupItem>
+  <ToggleGroupItem value="b">B</ToggleGroupItem>
+  <ToggleGroupItem value="c">C</ToggleGroupItem>
+</ToggleGroup>
+```
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="toggle-group-style-default" />
+<br />
+<br />
+
+### Outlined
+
+<ComponentShowcase name="toggle-group-style-outlined" />
+<br />
+<br />
+
+### Solid
+
+<ComponentShowcase name="toggle-group-style-solid" />
+<br />
+<br />
+
+### Outline Muted
+
+<ComponentShowcase name="toggle-group-style-outline-muted" />
diff --git a/content/docs/components/toggle.mdx b/content/docs/components/toggle.mdx
new file mode 100644
index 0000000..cfb30c6
--- /dev/null
+++ b/content/docs/components/toggle.mdx
@@ -0,0 +1,58 @@
+---
+title: Toggle
+description: This crazy toggling button keeps people toggling...😃
+lastUpdated: 02 Apr, 2025
+---
+
+<ComponentShowcase name="toggle-style-default" />
+<br />
+<br />
+
+<ComponentInstall>
+    <ComponentInstall.Cli>
+        ```sh
+        npx shadcn@latest add "https://retroui.dev/r/toggle.json"
+        ```
+    </ComponentInstall.Cli>
+    <ComponentInstall.Manual>
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-toggle
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="toggle" />
+    </ComponentInstall.Manual>
+
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="toggle-style-default" />
+<br />
+<br />
+
+### Outlined
+
+<ComponentShowcase name="toggle-style-outlined" />
+<br />
+<br />
+
+### Solid
+
+<ComponentShowcase name="toggle-style-solid" />
+<br />
+<br />
+
+### Outline Muted
+
+<ComponentShowcase name="toggle-style-outline-muted" />
diff --git a/content/docs/components/tooltip.mdx b/content/docs/components/tooltip.mdx
new file mode 100644
index 0000000..d075801
--- /dev/null
+++ b/content/docs/components/tooltip.mdx
@@ -0,0 +1,52 @@
+---
+title: Tooltip
+description: A cool way to give your users a hint of what a component does...😉
+lastUpdated: 08 Apr, 2025
+---
+
+<ComponentShowcase name="tooltip-style-default" />
+<br />
+<br />
+
+<ComponentInstall>
+    <ComponentInstall.Cli>
+        ```sh
+        npx shadcn@latest add "https://retroui.dev/r/tooltip.json"
+        ```
+    </ComponentInstall.Cli>
+    <ComponentInstall.Manual>
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-tooltip
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="tooltip" />
+    </ComponentInstall.Manual>
+
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="tooltip-style-default" />
+<br />
+<br />
+
+### Primary
+
+<ComponentShowcase name="tooltip-style-primary" />
+<br />
+<br />
+
+### Solid
+
+<ComponentShowcase name="tooltip-style-solid" />
diff --git a/package.json b/package.json
index aed2675..60a7205 100644
--- a/package.json
+++ b/package.json
@@ -17,11 +17,15 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.10",
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slider": "^1.2.4",
     "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.6",
+    "@radix-ui/react-toggle-group": "^1.1.7",
+    "@radix-ui/react-tooltip": "^1.2.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -35,6 +39,7 @@
     "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",
     "shadcn": "2.4.0-canary.10",
+    "sonner": "^2.0.3",
     "tailwind-merge": "^2.5.3",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8b4dade..5fa3acc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.1.2
         version: 2.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.10
+        version: 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@radix-ui/react-progress':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -44,6 +47,15 @@ importers:
       '@radix-ui/react-switch':
         specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-toggle':
+        specifier: ^1.1.6
+        version: 1.1.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-toggle-group':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.3
+        version: 1.2.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@radix-ui/react-visually-hidden':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -83,6 +95,9 @@ importers:
       shadcn:
         specifier: 2.4.0-canary.10
         version: 2.4.0-canary.10(@types/node@20.17.1)(typescript@5.6.3)
+      sonner:
+        specifier: ^2.0.3
+        version: 2.0.3(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       tailwind-merge:
         specifier: ^2.5.3
         version: 2.5.4
@@ -890,6 +905,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-arrow@1.1.4':
+    resolution: {integrity: sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-avatar@1.1.1':
     resolution: {integrity: sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==}
     peerDependencies:
@@ -968,6 +996,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.4':
+    resolution: {integrity: sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.0':
     resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
     peerDependencies:
@@ -1079,6 +1120,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dismissable-layer@1.1.7':
+    resolution: {integrity: sha512-j5+WBUdhccJsmH5/H0K6RncjDtoALSEr6jbkaZu+bjw6hOPOhHycr6vEUujl+HBK8kjUfWcoCJXxP6e4lUlMZw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dropdown-menu@2.1.2':
     resolution: {integrity: sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==}
     peerDependencies:
@@ -1101,6 +1155,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-focus-guards@1.1.2':
+    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-focus-scope@1.1.0':
     resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
     peerDependencies:
@@ -1127,6 +1190,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-focus-scope@1.1.4':
+    resolution: {integrity: sha512-r2annK27lIW5w9Ho5NyQgqs0MmgZSTIKXWpVCJaLC1q2kZrZkcqnmHkCHMEmv8XLvsLlurKMPT+kbKkRkm/xVA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-id@1.1.0':
     resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
     peerDependencies:
@@ -1136,6 +1212,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-label@2.1.2':
     resolution: {integrity: sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==}
     peerDependencies:
@@ -1162,6 +1247,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popover@1.1.10':
+    resolution: {integrity: sha512-IZN7b3sXqajiPsOzKuNJBSP9obF4MX5/5UhTgWNofw4r1H+eATWb0SyMlaxPD/kzA4vadFgy1s7Z1AEJ6WMyHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.2.0':
     resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
     peerDependencies:
@@ -1188,6 +1286,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popper@1.2.4':
+    resolution: {integrity: sha512-3p2Rgm/a1cK0r/UVkx5F/K9v/EplfjAeIFCGOPYPO4lZ0jtg4iSQXt/YGTSLWaf4x7NG6Z4+uKFcylcTZjeqDA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.2':
     resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
     peerDependencies:
@@ -1214,6 +1325,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-portal@1.1.6':
+    resolution: {integrity: sha512-XmsIl2z1n/TsYFLIdYam2rmFwf9OC/Sh2avkbmVMDuBZIe7hSpM0cYnWPAo7nHOVx8zTuwDZGByfcqLdnzp3Vw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-presence@1.1.1':
     resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
     peerDependencies:
@@ -1240,6 +1364,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-presence@1.1.3':
+    resolution: {integrity: sha512-IrVLIhskYhH3nLvtcBLQFZr61tBG7wx7O3kEmdzcYwRGAEBmBicGGL7ATzNgruYJ3xBTbuzEEq9OXJM3PAX3tA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.0.0':
     resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
     peerDependencies:
@@ -1279,6 +1416,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.0':
+    resolution: {integrity: sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-progress@1.1.2':
     resolution: {integrity: sha512-u1IgJFQ4zNAUTjGdDL5dcl/U8ntOR6jsnhxKb5RKp5Ozwl88xKR9EqRZOe/Mk8tnx0x5tNUe2F+MzsyjqMg0MA==}
     peerDependencies:
@@ -1331,6 +1481,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-roving-focus@1.1.7':
+    resolution: {integrity: sha512-C6oAg451/fQT3EGbWHbCQjYTtbyjNO1uzQgMzwyivcHT3GKNEmu1q3UuREhN+HzHAVtv3ivMVK08QlC+PkYw9Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-select@2.1.6':
     resolution: {integrity: sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg==}
     peerDependencies:
@@ -1397,6 +1560,45 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toggle-group@1.1.7':
+    resolution: {integrity: sha512-GRaPJhxrRSOqAcmcX3MwRL/SZACkoYdmoY9/sg7Bd5DhBYsB2t4co0NxTvVW8H7jUmieQDQwRtUlZ5Ta8UbgJA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.6':
+    resolution: {integrity: sha512-3SeJxKeO3TO1zVw1Nl++Cp0krYk6zHDHMCUXXVkosIzl6Nxcvb07EerQpyD2wXQSJ5RZajrYAmPaydU8Hk1IyQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.3':
+    resolution: {integrity: sha512-0KX7jUYFA02np01Y11NWkk6Ip6TqMNmD4ijLelYAzeIndl2aVeltjJFJ2gwjNa1P8U/dgjQ+8cr9Y3Ni+ZNoRA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.0':
     resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
@@ -1433,6 +1635,24 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-escape-keydown@1.1.0':
     resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
     peerDependencies:
@@ -1442,6 +1662,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-layout-effect@1.1.0':
     resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
     peerDependencies:
@@ -1487,6 +1716,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-size@1.1.0':
     resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
     peerDependencies:
@@ -1531,9 +1769,25 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-visually-hidden@1.2.0':
+    resolution: {integrity: sha512-rQj0aAWOpCdCMRbI6pLQm8r7S2BM3YhTa0SzOYD55k+hJA8oo9J+H+9wLM9oMlZWOX/wJWPTzfDfmZkf7LvCfg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/rect@1.1.0':
     resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
 
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@react-aria/focus@3.18.4':
     resolution: {integrity: sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==}
     peerDependencies:
@@ -3762,6 +4016,12 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
+  sonner@2.0.3:
+    resolution: {integrity: sha512-njQ4Hht92m0sMqqHVDL32V2Oun9W1+PHO9NDv9FHfJjT3JT22IG4Jpo3FPQy+mouRKCXFWO+r67v6MrHX2zeIA==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -5034,6 +5294,15 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-arrow@1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-avatar@1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-context': 1.1.1(@types/react@18.0.0)(react@18.0.0)
@@ -5114,6 +5383,18 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-collection@1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-compose-refs@1.1.0(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       react: 18.0.0
@@ -5210,6 +5491,19 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-dismissable-layer@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-dropdown-menu@2.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -5231,6 +5525,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-focus-guards@1.1.2(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
   '@radix-ui/react-focus-scope@1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.0.0)(react@18.0.0)
@@ -5253,6 +5553,17 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-focus-scope@1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-id@1.1.0(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.0.0)(react@18.0.0)
@@ -5260,6 +5571,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-id@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
   '@radix-ui/react-label@2.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -5295,6 +5613,29 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-popover@1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-popper': 1.2.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      aria-hidden: 1.2.4
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+      react-remove-scroll: 2.6.3(@types/react@18.0.0)(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-popper@1.2.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@floating-ui/react-dom': 2.1.2(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -5331,6 +5672,24 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-popper@1.2.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-arrow': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/rect': 1.1.1
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-portal@1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -5351,6 +5710,16 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-portal@1.1.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-presence@1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.0.0)(react@18.0.0)
@@ -5371,6 +5740,16 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-presence@1.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-slot': 1.1.0(@types/react@18.0.0)(react@18.0.0)
@@ -5398,6 +5777,15 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-primitive@2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.0(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-progress@1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-context': 1.1.1(@types/react@18.0.0)(react@18.0.0)
@@ -5460,6 +5848,23 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-roving-focus@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-select@2.1.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/number': 1.1.0
@@ -5544,6 +5949,52 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-toggle-group@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-roving-focus': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-toggle': 1.1.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-toggle@1.1.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-tooltip@1.2.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-popper': 1.2.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-visually-hidden': 1.2.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       react: 18.0.0
@@ -5570,6 +6021,21 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
   '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.0.0)(react@18.0.0)
@@ -5577,6 +6043,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
   '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       react: 18.0.0
@@ -5608,6 +6081,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-use-rect@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
   '@radix-ui/react-use-size@1.1.0(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.0.0)(react@18.0.0)
@@ -5640,8 +6120,19 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-visually-hidden@1.2.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/rect@1.1.0': {}
 
+  '@radix-ui/rect@1.1.1': {}
+
   '@react-aria/focus@3.18.4(react@18.0.0)':
     dependencies:
       '@react-aria/interactions': 3.22.4(react@18.0.0)
@@ -8424,6 +8915,11 @@ snapshots:
 
   slash@3.0.0: {}
 
+  sonner@2.0.3(react-dom@18.0.0(react@18.0.0))(react@18.0.0):
+    dependencies:
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
diff --git a/preview/components/label.tsx b/preview/components/label.tsx
new file mode 100644
index 0000000..a5a4ec5
--- /dev/null
+++ b/preview/components/label.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { Checkbox } from "@/components/retroui";
+import { Label } from "@/components/retroui";
+
+export default function LabelDefault() {
+  return (
+    <div className="flex items-center bg-background space-x-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  );
+}
diff --git a/preview/components/popover-style-default-shadow.tsx b/preview/components/popover-style-default-shadow.tsx
new file mode 100644
index 0000000..3a3efc3
--- /dev/null
+++ b/preview/components/popover-style-default-shadow.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Label,
+  Button,
+  Input,
+} from "@/components/retroui";
+
+export default function PopoverStyleDefaultShadow() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 font-sans" variant="default" shadow="md">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/preview/components/popover-style-default.tsx b/preview/components/popover-style-default.tsx
new file mode 100644
index 0000000..ffb62ea
--- /dev/null
+++ b/preview/components/popover-style-default.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Label,
+  Button,
+  Input,
+} from "@/components/retroui";
+
+export default function PopoverStyleDefault() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 font-sans">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/preview/components/popover-style-primary-shadow.tsx b/preview/components/popover-style-primary-shadow.tsx
new file mode 100644
index 0000000..57b11d4
--- /dev/null
+++ b/preview/components/popover-style-primary-shadow.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Label,
+  Button,
+  Input,
+} from "@/components/retroui";
+
+export default function PopoverStylePrimaryShadow() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 font-sans" variant="primary" shadow="md">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/preview/components/popover-style-primary.tsx b/preview/components/popover-style-primary.tsx
new file mode 100644
index 0000000..e7cc9ab
--- /dev/null
+++ b/preview/components/popover-style-primary.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Label,
+  Button,
+  Input,
+} from "@/components/retroui";
+
+export default function PopoverStylePrimary() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 font-sans" variant="primary">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/preview/components/sonner-style-default.tsx b/preview/components/sonner-style-default.tsx
new file mode 100644
index 0000000..916680e
--- /dev/null
+++ b/preview/components/sonner-style-default.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@/components/retroui";
+import { toast } from "sonner";
+
+export default function SonnerStyleDefault() {
+  const onClick = () => {
+    toast("Event has been created", {
+      description: "Sunday, December 03, 2025",
+      cancel: {
+        label: "Undo",
+        onClick: () => {},
+      },
+    });
+  };
+
+  return <Button onClick={onClick}>Show Toast</Button>;
+}
diff --git a/preview/components/sonner-style-error.tsx b/preview/components/sonner-style-error.tsx
new file mode 100644
index 0000000..08d8a00
--- /dev/null
+++ b/preview/components/sonner-style-error.tsx
@@ -0,0 +1,10 @@
+import { Button } from "@/components/retroui";
+import { toast } from "sonner";
+
+export default function SonnerStyleError() {
+  const onClick = () => {
+    toast.error("Oops! you ran into a pot hole");
+  };
+
+  return <Button onClick={onClick}>Show Toast (Error)</Button>;
+}
diff --git a/preview/components/sonner-style-rich-colors.tsx b/preview/components/sonner-style-rich-colors.tsx
new file mode 100644
index 0000000..afdf208
--- /dev/null
+++ b/preview/components/sonner-style-rich-colors.tsx
@@ -0,0 +1,12 @@
+import { Button } from "@/components/retroui";
+import { toast } from "sonner";
+
+export default function SonnerStyleRichColors() {
+  const onClick = () => {
+    toast.success("Congrats man 🎉", {
+      richColors: true,
+    });
+  };
+
+  return <Button onClick={onClick}>Show Toast (Rick colors)</Button>;
+}
diff --git a/preview/components/sonner-style-warning.tsx b/preview/components/sonner-style-warning.tsx
new file mode 100644
index 0000000..a136c1a
--- /dev/null
+++ b/preview/components/sonner-style-warning.tsx
@@ -0,0 +1,10 @@
+import { Button } from "@/components/retroui";
+import { toast } from "sonner";
+
+export default function SonnerStyleWarning() {
+  const onClick = () => {
+    toast.warning("This is a serious warning");
+  };
+
+  return <Button onClick={onClick}>Show Toast (Warning)</Button>;
+}
diff --git a/preview/components/toggle-group-style-default.tsx b/preview/components/toggle-group-style-default.tsx
new file mode 100644
index 0000000..5890be7
--- /dev/null
+++ b/preview/components/toggle-group-style-default.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/retroui";
+import { Bold, Italic, Underline } from "lucide-react";
+
+export default function ToggleGroupStyleDefault() {
+  return (
+    <ToggleGroup type="multiple" variant="default">
+      <ToggleGroupItem value="bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
diff --git a/preview/components/toggle-group-style-outline-muted.tsx b/preview/components/toggle-group-style-outline-muted.tsx
new file mode 100644
index 0000000..57abb57
--- /dev/null
+++ b/preview/components/toggle-group-style-outline-muted.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/retroui";
+import { Bold, Italic, Underline } from "lucide-react";
+
+export default function ToggleGroupStyleOutlineMuted() {
+  return (
+    <ToggleGroup type="multiple" variant="outline-muted">
+      <ToggleGroupItem value="bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
diff --git a/preview/components/toggle-group-style-outlined.tsx b/preview/components/toggle-group-style-outlined.tsx
new file mode 100644
index 0000000..a34de35
--- /dev/null
+++ b/preview/components/toggle-group-style-outlined.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/retroui";
+import { Bold, Italic, Underline } from "lucide-react";
+
+export default function ToggleGroupStyleOutlined() {
+  return (
+    <ToggleGroup type="multiple" variant="outlined">
+      <ToggleGroupItem value="bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
diff --git a/preview/components/toggle-group-style-solid.tsx b/preview/components/toggle-group-style-solid.tsx
new file mode 100644
index 0000000..a32745e
--- /dev/null
+++ b/preview/components/toggle-group-style-solid.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/retroui";
+import { Bold, Italic, Underline } from "lucide-react";
+
+export default function ToggleGroupStyleSolid() {
+  return (
+    <ToggleGroup type="multiple" variant="solid">
+      <ToggleGroupItem value="bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
diff --git a/preview/components/toggle-style-default.tsx b/preview/components/toggle-style-default.tsx
new file mode 100644
index 0000000..7b77ea7
--- /dev/null
+++ b/preview/components/toggle-style-default.tsx
@@ -0,0 +1,10 @@
+import { Toggle } from "@/components/retroui";
+import { Bold } from "lucide-react";
+
+export default function ToggleStyleDefault() {
+  return (
+    <Toggle>
+      <Bold />
+    </Toggle>
+  );
+}
diff --git a/preview/components/toggle-style-outline-muted.tsx b/preview/components/toggle-style-outline-muted.tsx
new file mode 100644
index 0000000..d4a4a21
--- /dev/null
+++ b/preview/components/toggle-style-outline-muted.tsx
@@ -0,0 +1,10 @@
+import { Toggle } from "@/components/retroui";
+import { Bold } from "lucide-react";
+
+export default function ToggleStyleOutlineMuted() {
+  return (
+    <Toggle variant="outline-muted">
+      <Bold />
+    </Toggle>
+  );
+}
diff --git a/preview/components/toggle-style-outlined.tsx b/preview/components/toggle-style-outlined.tsx
new file mode 100644
index 0000000..4c95db1
--- /dev/null
+++ b/preview/components/toggle-style-outlined.tsx
@@ -0,0 +1,10 @@
+import { Toggle } from "@/components/retroui";
+import { Bold } from "lucide-react";
+
+export default function ToggleStyleOutlined() {
+  return (
+    <Toggle variant="outlined">
+      <Bold />
+    </Toggle>
+  );
+}
diff --git a/preview/components/toggle-style-solid.tsx b/preview/components/toggle-style-solid.tsx
new file mode 100644
index 0000000..1fa1517
--- /dev/null
+++ b/preview/components/toggle-style-solid.tsx
@@ -0,0 +1,10 @@
+import { Toggle } from "@/components/retroui";
+import { Italic } from "lucide-react";
+
+export default function ToggleStyleSolid() {
+  return (
+    <Toggle variant="solid">
+      <Italic /> Italics
+    </Toggle>
+  );
+}
diff --git a/preview/components/tooltip-style-default.tsx b/preview/components/tooltip-style-default.tsx
new file mode 100644
index 0000000..10557be
--- /dev/null
+++ b/preview/components/tooltip-style-default.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import {
+  Button,
+  Tooltip,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/retroui";
+
+export default function TooltipStyleDefault() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent variant="default">Add to Library</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/preview/components/tooltip-style-primary.tsx b/preview/components/tooltip-style-primary.tsx
new file mode 100644
index 0000000..170b0ff
--- /dev/null
+++ b/preview/components/tooltip-style-primary.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import {
+  Button,
+  Tooltip,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/retroui";
+
+export default function TooltipStylePrimary() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent variant="primary">Add to Library</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/preview/components/tooltip-style-solid.tsx b/preview/components/tooltip-style-solid.tsx
new file mode 100644
index 0000000..5f926d5
--- /dev/null
+++ b/preview/components/tooltip-style-solid.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import {
+  Button,
+  Tooltip,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/retroui";
+
+export default function TooltipStyleSolid() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent variant="solid">Add to Library</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/public/r/popover-style-default-shadow.json b/public/r/popover-style-default-shadow.json
new file mode 100644
index 0000000..441d09c
--- /dev/null
+++ b/public/r/popover-style-default-shadow.json
@@ -0,0 +1,20 @@
+{
+  "name": "popover-style-default-shadow",
+  "title": "popover-style-default-shadow",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/popover.json",
+    "https://retroui.dev/r/label.json",
+    "https://retroui.dev/r/input.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/popover-style-default-shadow.tsx",
+      "target": "components/retroui/preview/popover-style-default-shadow.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  Label,\n  Button,\n  Input,\n} from \"@/components/retroui\";\n\nexport default function PopoverStyleDefaultShadow() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button>Open Popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 font-sans\" variant=\"default\" shadow=\"md\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
+    }
+  ]
+}
diff --git a/public/r/popover-style-default.json b/public/r/popover-style-default.json
new file mode 100644
index 0000000..dfc6d03
--- /dev/null
+++ b/public/r/popover-style-default.json
@@ -0,0 +1,20 @@
+{
+  "name": "popover-style-default",
+  "title": "popover-style-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/popover.json",
+    "https://retroui.dev/r/label.json",
+    "https://retroui.dev/r/input.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/popover-style-default.tsx",
+      "target": "components/retroui/preview/popover-style-default.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  Label,\n  Button,\n  Input,\n} from \"@/components/retroui\";\n\nexport default function PopoverStyleDefault() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button>Open Popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 font-sans\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
+    }
+  ]
+}
diff --git a/public/r/popover-style-primary-shadow.json b/public/r/popover-style-primary-shadow.json
new file mode 100644
index 0000000..9fcef1e
--- /dev/null
+++ b/public/r/popover-style-primary-shadow.json
@@ -0,0 +1,20 @@
+{
+  "name": "popover-style-primary-shadow",
+  "title": "popover-style-primary-shadow",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/popover.json",
+    "https://retroui.dev/r/label.json",
+    "https://retroui.dev/r/input.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/popover-style-primary-shadow.tsx",
+      "target": "components/retroui/preview/popover-style-primary-shadow.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  Label,\n  Button,\n  Input,\n} from \"@/components/retroui\";\n\nexport default function PopoverStylePrimaryShadow() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button>Open Popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 font-sans\" variant=\"primary\" shadow=\"md\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
+    }
+  ]
+}
diff --git a/public/r/popover-style-primary.json b/public/r/popover-style-primary.json
new file mode 100644
index 0000000..2bc5bd2
--- /dev/null
+++ b/public/r/popover-style-primary.json
@@ -0,0 +1,20 @@
+{
+  "name": "popover-style-primary",
+  "title": "popover-style-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/popover.json",
+    "https://retroui.dev/r/label.json",
+    "https://retroui.dev/r/input.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/popover-style-primary.tsx",
+      "target": "components/retroui/preview/popover-style-primary.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  Label,\n  Button,\n  Input,\n} from \"@/components/retroui\";\n\nexport default function PopoverStylePrimary() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button>Open Popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 font-sans\" variant=\"primary\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
+    }
+  ]
+}
diff --git a/public/r/popover.json b/public/r/popover.json
new file mode 100644
index 0000000..71a97a6
--- /dev/null
+++ b/public/r/popover.json
@@ -0,0 +1,16 @@
+{
+  "name": "popover",
+  "type": "registry:component",
+  "title": "Popover",
+  "description": "A handy small component for your little input needs...😉",
+  "dependencies": ["@radix-ui/react-popover", "class-variance-authority"],
+  "author": "Ankan Bhattacharya <https://github.com/ankan002>",
+  "files": [
+    {
+      "path": "components/retroui/Popover.tsx",
+      "target": "components/retroui/Popover.tsx",
+      "type": "registry:component",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\n\nimport { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst popoverContentVariants = cva(\n    \"z-50 w-72 rounded-md border bg-primary p-4 text-popover-foreground  outline-none 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 origin-[--radix-popover-content-transform-origin]\",\n    {\n        variants: {\n            variant: {\n                default: \"bg-background\",\n                primary: \"bg-primary\",\n            },\n            shadow: {\n                default: \"\",\n                sm: \"shadow-sm\",\n                md: \"shadow-md\",\n                lg: \"shadow-lg\",\n            },\n        },\n        defaultVariants: {\n            variant: \"default\",\n            shadow: \"default\",\n        },\n    },\n);\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\nconst PopoverContent = React.forwardRef<\n    React.ElementRef<typeof PopoverPrimitive.Content>,\n    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &\n        VariantProps<typeof popoverContentVariants>\n>(\n    (\n        {\n            className,\n            align = \"center\",\n            sideOffset = 4,\n            variant,\n            shadow,\n            ...props\n        },\n        ref,\n    ) => (\n        <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n                ref={ref}\n                align={align}\n                sideOffset={sideOffset}\n                className={cn(\n                    popoverContentVariants({\n                        variant,\n                        shadow,\n                        className,\n                    }),\n                )}\n                {...props}\n            />\n        </PopoverPrimitive.Portal>\n    ),\n);\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n"
+    }
+  ]
+}
diff --git a/public/r/sonner-style-default.json b/public/r/sonner-style-default.json
new file mode 100644
index 0000000..30f0e9e
--- /dev/null
+++ b/public/r/sonner-style-default.json
@@ -0,0 +1,18 @@
+{
+  "name": "sonner-style-default",
+  "title": "sonner-style-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/sonner.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/sonner-style-default.tsx",
+      "target": "components/retroui/preview/sonner-style-default.tsx",
+      "type": "registry:block",
+      "content": "import { Button } from \"@/components/retroui\";\nimport { toast } from \"sonner\";\n\nexport default function SonnerStyleDefault() {\n  const onClick = () => {\n    toast(\"Event has been created\", {\n      description: \"Sunday, December 03, 2025\",\n      cancel: {\n        label: \"Undo\",\n        onClick: () => {},\n      },\n    });\n  };\n\n  return <Button onClick={onClick}>Show Toast</Button>;\n}\n"
+    }
+  ]
+}
diff --git a/public/r/sonner-style-error.json b/public/r/sonner-style-error.json
new file mode 100644
index 0000000..056e7ad
--- /dev/null
+++ b/public/r/sonner-style-error.json
@@ -0,0 +1,18 @@
+{
+  "name": "sonner-style-error",
+  "title": "sonner-style-error",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/sonner.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/sonner-style-error.tsx",
+      "target": "components/retroui/preview/sonner-style-error.tsx",
+      "type": "registry:block",
+      "content": "import { Button } from \"@/components/retroui\";\nimport { toast } from \"sonner\";\n\nexport default function SonnerStyleError() {\n  const onClick = () => {\n    toast.error(\"Oops! you ran into a pot hole\");\n  };\n\n  return <Button onClick={onClick}>Show Toast (Error)</Button>;\n}\n"
+    }
+  ]
+}
diff --git a/public/r/sonner-style-rich-colors.json b/public/r/sonner-style-rich-colors.json
new file mode 100644
index 0000000..34c0640
--- /dev/null
+++ b/public/r/sonner-style-rich-colors.json
@@ -0,0 +1,18 @@
+{
+  "name": "sonner-style-rich-colors",
+  "title": "sonner-style-rich-colors",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/sonner.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/sonner-style-rich-colors.tsx",
+      "target": "components/retroui/preview/sonner-style-rich-colors.tsx",
+      "type": "registry:block",
+      "content": "import { Button } from \"@/components/retroui\";\nimport { toast } from \"sonner\";\n\nexport default function SonnerStyleRichColors() {\n  const onClick = () => {\n    toast.success(\"Congrats man 🎉\", {\n      richColors: true,\n    });\n  };\n\n  return <Button onClick={onClick}>Show Toast (Rick colors)</Button>;\n}\n"
+    }
+  ]
+}
diff --git a/public/r/sonner-style-warning.json b/public/r/sonner-style-warning.json
new file mode 100644
index 0000000..b9b679a
--- /dev/null
+++ b/public/r/sonner-style-warning.json
@@ -0,0 +1,18 @@
+{
+  "name": "sonner-style-warning",
+  "title": "sonner-style-warning",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/sonner.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/sonner-style-warning.tsx",
+      "target": "components/retroui/preview/sonner-style-warning.tsx",
+      "type": "registry:block",
+      "content": "import { Button } from \"@/components/retroui\";\nimport { toast } from \"sonner\";\n\nexport default function SonnerStyleWarning() {\n  const onClick = () => {\n    toast.warning(\"This is a serious warning\");\n  };\n\n  return <Button onClick={onClick}>Show Toast (Warning)</Button>;\n}\n"
+    }
+  ]
+}
diff --git a/public/r/sonner.json b/public/r/sonner.json
new file mode 100644
index 0000000..055f571
--- /dev/null
+++ b/public/r/sonner.json
@@ -0,0 +1,15 @@
+{
+  "name": "sonner",
+  "type": "registry:component",
+  "title": "Sonner",
+  "description": "A beautiful toast component that can grab audience attention from any place.",
+  "dependencies": ["sonner", "lucide-react", "class-variance-authority"],
+  "files": [
+    {
+      "path": "components/retroui/Sonner.tsx",
+      "target": "components/retroui/Sonner.tsx",
+      "type": "registry:component",
+      "content": "\"use client\";\n\nimport { Toaster as Sonner } from \"sonner\";\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n    return (\n        <Sonner\n            toastOptions={{\n                classNames: {\n                    toast: \"h-auto w-full p-4 bg-background rounded-md border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border shadow-lg flex items-center relative\",\n                    description:\n                        \"group-[.toast]:text-muted-foreground ml-2 font-sans\",\n                    actionButton:\n                        \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 shadow-md bg-background border-border border-2 ml-auto h-fit min-w-fit\",\n                    cancelButton:\n                        \"group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 shadow-md bg-background border-border border-2 ml-auto h-fit min-w-fit\",\n                    title: \"ml-2 font-sans\",\n                    closeButton:\n                        \"absolute bg-background shadow-md -top-1 -left-1 rounded-full p-0.5\",\n                },\n                unstyled: true,\n            }}\n            {...props}\n        />\n    );\n};\n\nexport { Toaster };\n"
+    }
+  ]
+}
diff --git a/public/r/toggle-group-outlined.json b/public/r/toggle-group-outlined.json
new file mode 100644
index 0000000..132b404
--- /dev/null
+++ b/public/r/toggle-group-outlined.json
@@ -0,0 +1,18 @@
+{
+  "name": "toggle-group-style-outline-muted",
+  "title": "toggle-group-style-outline-muted",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/toggle.json",
+    "https://retroui.dev/r/toggle-group.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/toggle-group-style-outline-muted.tsx",
+      "target": "components/retroui/preview/toggle-group-style-outline-muted.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/retroui\";\nimport { Bold, Italic, Underline } from \"lucide-react\";\n\nexport default function ToggleGroupStyleOutlined() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"outlined\">\n      <ToggleGroupItem value=\"bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n"
+    }
+  ]
+}
diff --git a/public/r/toggle-group-style-default.json b/public/r/toggle-group-style-default.json
new file mode 100644
index 0000000..8512102
--- /dev/null
+++ b/public/r/toggle-group-style-default.json
@@ -0,0 +1,18 @@
+{
+  "name": "toggle-group-style-default",
+  "title": "toggle-group-style-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/toggle.json",
+    "https://retroui.dev/r/toggle-group.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/toggle-group-style-default.tsx",
+      "target": "components/retroui/preview/toggle-group-style-default.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/retroui\";\nimport { Bold, Italic, Underline } from \"lucide-react\";\n\nexport default function ToggleGroupStyleDefault() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"default\">\n      <ToggleGroupItem value=\"bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}"
+    }
+  ]
+}
diff --git a/public/r/toggle-group-style-outline-muted.json b/public/r/toggle-group-style-outline-muted.json
new file mode 100644
index 0000000..35061d1
--- /dev/null
+++ b/public/r/toggle-group-style-outline-muted.json
@@ -0,0 +1,18 @@
+{
+  "name": "toggle-group-style-outline-muted",
+  "title": "toggle-group-style-outline-muted",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/toggle.json",
+    "https://retroui.dev/r/toggle-group.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/toggle-group-style-outline-muted.tsx",
+      "target": "components/retroui/preview/toggle-group-style-outline-muted.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/retroui\";\nimport { Bold, Italic, Underline } from \"lucide-react\";\n\nexport default function ToggleGroupStyleOutlineMuted() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"outline-muted\">\n      <ToggleGroupItem value=\"bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}"
+    }
+  ]
+}
diff --git a/public/r/toggle-group-style-solid.json b/public/r/toggle-group-style-solid.json
new file mode 100644
index 0000000..1eb1397
--- /dev/null
+++ b/public/r/toggle-group-style-solid.json
@@ -0,0 +1,18 @@
+{
+  "name": "toggle-group-style-solid",
+  "title": "toggle-group-style-solid",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/toggle.json",
+    "https://retroui.dev/r/toggle-group.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/toggle-group-style-solid.tsx",
+      "target": "components/retroui/preview/toggle-group-style-solid.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/retroui\";\nimport { Bold, Italic, Underline } from \"lucide-react\";\n\nexport default function ToggleGroupStyleSolid() {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"solid\">\n      <ToggleGroupItem value=\"bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n\n      <ToggleGroupItem value=\"underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n"
+    }
+  ]
+}
diff --git a/public/r/toggle-group.json b/public/r/toggle-group.json
new file mode 100644
index 0000000..249622b
--- /dev/null
+++ b/public/r/toggle-group.json
@@ -0,0 +1,26 @@
+{
+  "name": "toggle-group",
+  "type": "registry:component",
+  "title": "Toggle Group",
+  "description": "Group of toggling buttons...🤙",
+  "dependencies": [
+    "@radix-ui/react-toggle",
+    "@radix-ui/react-toggle-group",
+    "class-variance-authority"
+  ],
+  "author": "Ankan Bhattacharya <https://github.com/ankan002>",
+  "files": [
+    {
+      "path": "components/retroui/Toggle.tsx",
+      "target": "components/retroui/Toggle.tsx",
+      "type": "registry:component",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleVariants = cva(\n    \"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\",\n    {\n        variants: {\n            variant: {\n                default:\n                    \"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted\",\n                outlined:\n                    \"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n                solid: \"border-2 border-input bg-transparent hover:bg-black hover:text-white/90 hover:border-black data-[state=on]:bg-black data-[state=on]:text-white data-[state=on]:border-black\",\n                \"outline-muted\":\n                    \"border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted\",\n            },\n            size: {\n                default: \"h-10 px-3 min-w-10\",\n                sm: \"h-9 px-2.5 min-w-9\",\n                lg: \"h-11 px-5 min-w-11\",\n            },\n        },\n        defaultVariants: {\n            variant: \"default\",\n            size: \"default\",\n        },\n    },\n);\n\nconst Toggle = React.forwardRef<\n    React.ElementRef<typeof TogglePrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n        VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n    <TogglePrimitive.Root\n        ref={ref}\n        className={cn(toggleVariants({ variant, size, className }))}\n        {...props}\n    />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\nexport { Toggle, toggleVariants };\n"
+    },
+    {
+      "path": "components/retroui/ToggleGroup.tsx",
+      "target": "components/retroui/ToggleGroup.tsx",
+      "type": "registry:component",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { toggleVariants } from \"./Toggle\";\n\nconst ToggleGroupContext = React.createContext<\n    VariantProps<typeof toggleVariants>\n>({\n    size: \"default\",\n    variant: \"default\",\n});\n\nconst ToggleGroup = React.forwardRef<\n    React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n        VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n    <ToggleGroupPrimitive.Root\n        ref={ref}\n        className={cn(\"flex items-center justify-center gap-1\", className)}\n        {...props}\n    >\n        <ToggleGroupContext.Provider value={{ variant, size }}>\n            {children}\n        </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n));\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;\n\nconst ToggleGroupItem = React.forwardRef<\n    React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n        VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n    const context = React.useContext(ToggleGroupContext);\n\n    return (\n        <ToggleGroupPrimitive.Item\n            ref={ref}\n            className={cn(\n                toggleVariants({\n                    variant: context.variant || variant,\n                    size: context.size || size,\n                }),\n                className,\n            )}\n            {...props}\n        >\n            {children}\n        </ToggleGroupPrimitive.Item>\n    );\n});\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;\n\nexport { ToggleGroup, ToggleGroupItem };\n"
+    }
+  ]
+}
diff --git a/public/r/toggle-style-default.json b/public/r/toggle-style-default.json
new file mode 100644
index 0000000..964802e
--- /dev/null
+++ b/public/r/toggle-style-default.json
@@ -0,0 +1,15 @@
+{
+  "name": "toggle-style-default",
+  "title": "toggle-style-default",
+  "type": "registry:block",
+  "registryDependencies": ["https://retroui.dev/r/toggle.json"],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/toggle-style-default.tsx",
+      "target": "components/retroui/preview/toggle-style-default.tsx",
+      "type": "registry:block",
+      "content": "import { Toggle } from \"@/components/retroui\";\nimport { Bold } from \"lucide-react\";\n\nexport default function ToggleStyleDefault() {\n  return (\n    <Toggle>\n      <Bold />\n    </Toggle>\n  );\n}\n"
+    }
+  ]
+}
diff --git a/public/r/toggle-style-outline-muted.json b/public/r/toggle-style-outline-muted.json
new file mode 100644
index 0000000..feaa8eb
--- /dev/null
+++ b/public/r/toggle-style-outline-muted.json
@@ -0,0 +1,15 @@
+{
+  "name": "toggle-style-outline-muted",
+  "title": "toggle-style-outline-muted",
+  "type": "registry:block",
+  "registryDependencies": ["https://retroui.dev/r/toggle.json"],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/toggle-style-outline-muted.tsx",
+      "target": "components/retroui/preview/toggle-style-outline-muted.tsx",
+      "type": "registry:block",
+      "content": "import { Toggle } from \"@/components/retroui\";\nimport { Bold } from \"lucide-react\";\n\nexport default function ToggleStyleOutlineMuted() {\n  return (\n    <Toggle variant=\"outline-muted\">\n      <Bold />\n    </Toggle>\n  );\n}"
+    }
+  ]
+}
diff --git a/public/r/toggle-style-outlined.json b/public/r/toggle-style-outlined.json
new file mode 100644
index 0000000..c51fbf4
--- /dev/null
+++ b/public/r/toggle-style-outlined.json
@@ -0,0 +1,15 @@
+{
+  "name": "toggle-style-outlined",
+  "title": "toggle-style-outlined",
+  "type": "registry:block",
+  "registryDependencies": ["https://retroui.dev/r/toggle.json"],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/toggle-style-outlined.tsx",
+      "target": "components/retroui/preview/toggle-style-outlined.tsx",
+      "type": "registry:block",
+      "content": "import { Toggle } from \"@/components/retroui\";\nimport { Bold } from \"lucide-react\";\n\nexport default function ToggleStyleOutlined() {\n  return (\n    <Toggle variant=\"outlined\">\n      <Bold />\n    </Toggle>\n  );\n}"
+    }
+  ]
+}
diff --git a/public/r/toggle-style-solid.json b/public/r/toggle-style-solid.json
new file mode 100644
index 0000000..7332e8f
--- /dev/null
+++ b/public/r/toggle-style-solid.json
@@ -0,0 +1,15 @@
+{
+  "name": "toggle-style-solid",
+  "title": "toggle-style-solid",
+  "type": "registry:block",
+  "registryDependencies": ["https://retroui.dev/r/toggle.json"],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/toggle-style-solid.tsx",
+      "target": "components/retroui/preview/toggle-style-solid.tsx",
+      "type": "registry:block",
+      "content": "import { Toggle } from \"@/components/retroui\";\nimport { Italic } from \"lucide-react\";\n\nexport default function ToggleStyleSolid() {\n  return (\n    <Toggle variant=\"solid\">\n      <Italic /> Italics\n    </Toggle>\n  );\n}"
+    }
+  ]
+}
diff --git a/public/r/toggle.json b/public/r/toggle.json
new file mode 100644
index 0000000..d0b3ec0
--- /dev/null
+++ b/public/r/toggle.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle",
+  "type": "registry:component",
+  "title": "toggle",
+  "description": "This crazy toggling button keeps people toggling...😃",
+  "dependencies": ["@radix-ui/react-toggle", "class-variance-authority"],
+  "author": "Ankan Bhattacharya <https://github.com/ankan002>",
+  "files": [
+    {
+      "path": "components/retroui/Toggle.tsx",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleVariants = cva(\n    \"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\",\n    {\n        variants: {\n            variant: {\n                default:\n                    \"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted\",\n                outlined:\n                    \"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n                solid: \"border-2 border-input bg-transparent hover:bg-black hover:text-white/90 hover:border-black data-[state=on]:bg-black data-[state=on]:text-white data-[state=on]:border-black\",\n                \"outline-muted\":\n                    \"border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted\",\n            },\n            size: {\n                default: \"h-10 px-3 min-w-10\",\n                sm: \"h-9 px-2.5 min-w-9\",\n                lg: \"h-11 px-5 min-w-11\",\n            },\n        },\n        defaultVariants: {\n            variant: \"default\",\n            size: \"default\",\n        },\n    },\n);\n\nconst Toggle = React.forwardRef<\n    React.ElementRef<typeof TogglePrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n        VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n    <TogglePrimitive.Root\n        ref={ref}\n        className={cn(toggleVariants({ variant, size, className }))}\n        {...props}\n    />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\nexport { Toggle, toggleVariants };\n",
+      "type": "registry:component",
+      "target": "components/retroui/Toggle.tsx"
+    }
+  ]
+}
diff --git a/public/r/tooltip-style-default.json b/public/r/tooltip-style-default.json
new file mode 100644
index 0000000..32e3eaf
--- /dev/null
+++ b/public/r/tooltip-style-default.json
@@ -0,0 +1,18 @@
+{
+  "name": "tooltip-style-default",
+  "title": "tooltip-style-default",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/tooltip.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/tooltip-style-default.tsx",
+      "target": "components/retroui/preview/tooltip-style-default.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport {\n  Button,\n  Tooltip,\n  TooltipProvider,\n  TooltipTrigger,\n  TooltipContent,\n} from \"@/components/retroui\";\n\nexport default function TooltipStyleDefault() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent variant=\"default\">Add to Library</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
+    }
+  ]
+}
diff --git a/public/r/tooltip-style-primary.json b/public/r/tooltip-style-primary.json
new file mode 100644
index 0000000..cddad58
--- /dev/null
+++ b/public/r/tooltip-style-primary.json
@@ -0,0 +1,18 @@
+{
+  "name": "tooltip-style-primary",
+  "title": "tooltip-style-primary",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/tooltip.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/tooltip-style-primary.tsx",
+      "target": "components/retroui/preview/tooltip-style-primary.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport {\n  Button,\n  Tooltip,\n  TooltipProvider,\n  TooltipTrigger,\n  TooltipContent,\n} from \"@/components/retroui\";\n\nexport default function TooltipStylePrimary() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent variant=\"primary\">Add to Library</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
+    }
+  ]
+}
diff --git a/public/r/tooltip-style-solid.json b/public/r/tooltip-style-solid.json
new file mode 100644
index 0000000..a663046
--- /dev/null
+++ b/public/r/tooltip-style-solid.json
@@ -0,0 +1,18 @@
+{
+  "name": "tooltip-style-solid",
+  "title": "tooltip-style-solid",
+  "type": "registry:block",
+  "registryDependencies": [
+    "https://retroui.dev/r/tooltip.json",
+    "https://retroui.dev/r/button.json"
+  ],
+  "dependencies": ["lucide-react"],
+  "files": [
+    {
+      "path": "preview/components/tooltip-style-solid.tsx",
+      "target": "components/retroui/preview/tooltip-style-solid.tsx",
+      "type": "registry:block",
+      "content": "\"use client\";\n\nimport {\n  Button,\n  Tooltip,\n  TooltipProvider,\n  TooltipTrigger,\n  TooltipContent,\n} from \"@/components/retroui\";\n\nexport default function TooltipStyleSolid() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent variant=\"solid\">Add to Library</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
+    }
+  ]
+}
diff --git a/public/r/tooltip.json b/public/r/tooltip.json
new file mode 100644
index 0000000..8415157
--- /dev/null
+++ b/public/r/tooltip.json
@@ -0,0 +1,16 @@
+{
+  "name": "tooltip",
+  "type": "registry:component",
+  "title": "Tooltip",
+  "description": "A cool way to give your users a hint of what a component does...😉",
+  "dependencies": ["@radix-ui/react-tooltip", "class-variance-authority"],
+  "author": "Ankan Bhattacharya <https://github.com/ankan002>",
+  "files": [
+    {
+      "path": "components/retroui/Tooltip.tsx",
+      "target": "components/retroui/Tooltip.tsx",
+      "type": "registry:component",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst tooltipContentVariants = cva(\n    \"z-50 overflow-hidden border-2 border-border bg-background px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 origin-[--radix-tooltip-content-transform-origin]\",\n    {\n        variants: {\n            variant: {\n                default: \"bg-background text-foreground\",\n                primary: \"bg-primary text-foreground\",\n                solid: \"bg-solid text-solid-foreground\",\n            },\n        },\n        defaultVariants: {\n            variant: \"default\",\n        },\n    },\n);\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        VariantProps<typeof tooltipContentVariants>\n>(({ className, sideOffset = 4, variant, ...props }, ref) => (\n    <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n            ref={ref}\n            sideOffset={sideOffset}\n            className={cn(\n                tooltipContentVariants({\n                    variant,\n                    className,\n                }),\n            )}\n            {...props}\n        />\n    </TooltipPrimitive.Portal>\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"
+    }
+  ]
+}
diff --git a/registry.json b/registry.json
index 56d1b98..e8517ef 100644
--- a/registry.json
+++ b/registry.json
@@ -2,10 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry.json",
   "name": "retro ui",
   "homepage": "https://retroui.dev",
-  "dependencies": [
-    "tailwind-merge",
-    "clsx"
-  ],
+  "dependencies": ["tailwind-merge", "clsx"],
   "items": [
     {
       "$schema": "https://ui.shadcn.com/schema/registry-item.json",
@@ -58,10 +55,7 @@
       "name": "utils",
       "type": "registry:lib",
       "title": "Utils",
-      "dependencies": [
-        "clsx",
-        "tailwind-merge"
-      ],
+      "dependencies": ["clsx", "tailwind-merge"],
       "files": [
         {
           "path": "lib/utils.ts",
@@ -74,10 +68,7 @@
       "type": "registry:component",
       "title": "Accordion",
       "description": "This collapsible component let's your users read only the content they care about. 😌",
-      "dependencies": [
-        "@radix-ui/react-accordion",
-        "lucide-react"
-      ],
+      "dependencies": ["@radix-ui/react-accordion", "lucide-react"],
       "files": [
         {
           "path": "components/retroui/Accordion.tsx",
@@ -91,9 +82,7 @@
       "type": "registry:component",
       "title": "Alert",
       "description": "Notify your users about important events and updates. 📣",
-      "dependencies": [
-        "class-variance-authority"
-      ],
+      "dependencies": ["class-variance-authority"],
       "files": [
         {
           "path": "components/retroui/Alert.tsx",
@@ -107,9 +96,7 @@
       "type": "registry:component",
       "title": "Avatar",
       "description": "Default rounded avatar that can show your users profile picture. ✨",
-      "dependencies": [
-        "@radix-ui/react-avatar"
-      ],
+      "dependencies": ["@radix-ui/react-avatar"],
       "files": [
         {
           "path": "components/retroui/Avatar.tsx",
@@ -123,9 +110,7 @@
       "type": "registry:component",
       "title": "Badge",
       "description": "The component that looks like a button but isn't clickable!",
-      "dependencies": [
-        "class-variance-authority"
-      ],
+      "dependencies": ["class-variance-authority"],
       "files": [
         {
           "path": "components/retroui/Badge.tsx",
@@ -139,9 +124,7 @@
       "type": "registry:component",
       "title": "Retro Button",
       "description": "This bold button makes sure your users click on it and perform the actions you want!",
-      "dependencies": [
-        "class-variance-authority"
-      ],
+      "dependencies": ["class-variance-authority"],
       "files": [
         {
           "path": "components/retroui/Button.tsx",
@@ -218,10 +201,7 @@
       "type": "registry:component",
       "title": "Label",
       "description": "Label for form fields",
-      "dependencies": [
-        "@radix-ui/react-label",
-        "class-variance-authority"
-      ],
+      "dependencies": ["@radix-ui/react-label", "class-variance-authority"],
       "files": [
         {
           "path": "components/retroui/Label.tsx",
@@ -235,9 +215,7 @@
       "type": "registry:component",
       "title": "Menu",
       "description": "Show your users a list of actions they can take. 📋",
-      "dependencies": [
-        "@radix-ui/react-dropdown-menu"
-      ],
+      "dependencies": ["@radix-ui/react-dropdown-menu"],
       "files": [
         {
           "path": "components/retroui/Menu.tsx",
@@ -246,6 +224,21 @@
         }
       ]
     },
+    {
+      "name": "popover",
+      "type": "registry:component",
+      "title": "Popover",
+      "description": "A handy small component for your little input needs...😉",
+      "dependencies": ["@radix-ui/react-popover", "class-variance-authority"],
+      "author": "Ankan Bhattacharya <https://github.com/ankan002>",
+      "files": [
+        {
+          "path": "components/retroui/Popover.tsx",
+          "target": "components/retroui/Popover.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
     {
       "name": "radio",
       "type": "registry:component",
@@ -268,10 +261,7 @@
       "type": "registry:component",
       "title": "Select",
       "description": "Let your users pick what they want.",
-      "dependencies": [
-        "@radix-ui/react-select",
-        "lucide-react"
-      ],
+      "dependencies": ["@radix-ui/react-select", "lucide-react"],
       "files": [
         {
           "path": "components/retroui/Select.tsx",
@@ -285,10 +275,7 @@
       "type": "registry:component",
       "title": "Slider",
       "description": "Let your users pick what they want.",
-      "dependencies": [
-        "@radix-ui/react-slider",
-        "lucide-react"
-      ],
+      "dependencies": ["@radix-ui/react-slider", "lucide-react"],
       "files": [
         {
           "path": "components/retroui/Slider.tsx",
@@ -297,14 +284,26 @@
         }
       ]
     },
+    {
+      "name": "sonner",
+      "type": "registry:component",
+      "title": "Sonner",
+      "description": "A beautiful toast component that can grab audience attention from any place.",
+      "dependencies": ["sonner", "lucide-react", "class-variance-authority"],
+      "files": [
+        {
+          "path": "components/retroui/Sonner.tsx",
+          "target": "components/retroui/Sonner.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
     {
       "name": "switch",
       "type": "registry:component",
       "title": "Switch",
       "description": "Let users to turn on or off your marketing emails or notifications.",
-      "dependencies": [
-        "@radix-ui/react-switch"
-      ],
+      "dependencies": ["@radix-ui/react-switch"],
       "files": [
         {
           "path": "components/retroui/Switch.tsx",
@@ -318,9 +317,7 @@
       "type": "registry:component",
       "title": "Tab",
       "description": "Switch between different views using tabs.",
-      "dependencies": [
-        "@headlessui/react"
-      ],
+      "dependencies": ["@headlessui/react"],
       "files": [
         {
           "path": "components/retroui/Tab.tsx",
@@ -334,9 +331,7 @@
       "type": "registry:component",
       "title": "text",
       "description": "Show your texts in different styles. 💅",
-      "dependencies": [
-        "class-variance-authority"
-      ],
+      "dependencies": ["class-variance-authority"],
       "files": [
         {
           "path": "components/retroui/Text.tsx",
@@ -358,13 +353,65 @@
         }
       ]
     },
+    {
+      "name": "toggle",
+      "type": "registry:component",
+      "title": "Toggle",
+      "description": "This crazy toggling button keeps people toggling...😃",
+      "dependencies": ["@radix-ui/react-toggle", "class-variance-authority"],
+      "author": "Ankan Bhattacharya <https://github.com/ankan002>",
+      "files": [
+        {
+          "path": "components/retroui/Toggle.tsx",
+          "target": "components/retroui/Toggle.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group",
+      "type": "registry:component",
+      "title": "Toggle Group",
+      "description": "Group of toggling buttons...🤙",
+      "dependencies": [
+        "@radix-ui/react-toggle",
+        "@radix-ui/react-toggle-group",
+        "class-variance-authority"
+      ],
+      "author": "Ankan Bhattacharya <https://github.com/ankan002>",
+      "files": [
+        {
+          "path": "components/retroui/Toggle.tsx",
+          "target": "components/retroui/Toggle.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "components/retroui/ToggleGroup.tsx",
+          "target": "components/retroui/ToggleGroup.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "tooltip",
+      "type": "registry:component",
+      "title": "Tooltip",
+      "description": "A cool way to give your users a hint of what a component does...😉",
+      "dependencies": ["@radix-ui/react-tooltip", "class-variance-authority"],
+      "author": "Ankan Bhattacharya <https://github.com/ankan002>",
+      "files": [
+        {
+          "path": "components/retroui/Tooltip.tsx",
+          "target": "components/retroui/Tooltip.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
     {
       "name": "accordion-style-default",
       "title": "accordion-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/accordion.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/accordion.json"],
       "files": [
         {
           "path": "preview/components/accordion-style-default.tsx",
@@ -377,9 +424,7 @@
       "name": "alert-style-default",
       "title": "alert-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/alert.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/alert.json"],
       "files": [
         {
           "path": "preview/components/alert-style-default.tsx",
@@ -392,9 +437,7 @@
       "name": "alert-style-solid",
       "title": "alert-style-solid",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/alert.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/alert.json"],
       "files": [
         {
           "path": "preview/components/alert-style-solid.tsx",
@@ -407,9 +450,7 @@
       "name": "alert-style-with-icon",
       "title": "alert-style-with-icon",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/alert.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/alert.json"],
       "files": [
         {
           "path": "preview/components/alert-style-with-icon.tsx",
@@ -422,9 +463,7 @@
       "name": "alert-style-all-status",
       "title": "alert-style-all-status",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/alert.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/alert.json"],
       "files": [
         {
           "path": "preview/components/alert-style-all-status.tsx",
@@ -437,9 +476,7 @@
       "name": "avatar-style-circle",
       "title": "avatar-style-circle",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/avatar.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/avatar.json"],
       "files": [
         {
           "path": "preview/components/avatar-style-circle.tsx",
@@ -452,9 +489,7 @@
       "name": "avatar-style-fallbacks",
       "title": "avatar-style-fallbacks",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/avatar.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/avatar.json"],
       "files": [
         {
           "path": "preview/components/avatar-style-circle-fallbacks.tsx",
@@ -467,9 +502,7 @@
       "name": "avatar-style-circle-sizes",
       "title": "avatar-style-circle-sizes",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/avatar.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/avatar.json"],
       "files": [
         {
           "path": "preview/components/avatar-style-circle-sizes.tsx",
@@ -482,9 +515,7 @@
       "name": "badge-style-default",
       "title": "badge-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/badge.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/badge.json"],
       "files": [
         {
           "path": "preview/components/badge-style-default.tsx",
@@ -497,9 +528,7 @@
       "name": "badge-style-variants",
       "title": "badge-style-variants",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/badge.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/badge.json"],
       "files": [
         {
           "path": "preview/components/badge-style-variants.tsx",
@@ -512,9 +541,7 @@
       "name": "badge-style-default",
       "title": "badge-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/badge.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/badge.json"],
       "files": [
         {
           "path": "preview/components/badge-style-rounded.tsx",
@@ -527,9 +554,7 @@
       "name": "badge-style-sizes",
       "title": "badge-style-sizes",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/badge.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/badge.json"],
       "files": [
         {
           "path": "preview/components/badge-style-sizes.tsx",
@@ -542,9 +567,7 @@
       "name": "button-style-default",
       "title": "button-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/button.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/button.json"],
       "files": [
         {
           "path": "preview/components/button-style-default.tsx",
@@ -572,9 +595,7 @@
       "name": "button-style-secondary",
       "title": "button-style-secondary",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/button.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/button.json"],
       "files": [
         {
           "path": "preview/components/button-style-secondary.tsx",
@@ -587,9 +608,7 @@
       "name": "button-style-outline",
       "title": "button-style-outline",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/button.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/button.json"],
       "files": [
         {
           "path": "preview/components/button-style-outline.tsx",
@@ -602,9 +621,7 @@
       "name": "button-style-link",
       "title": "button-style-link",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/button.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/button.json"],
       "files": [
         {
           "path": "preview/components/button-style-link.tsx",
@@ -617,9 +634,7 @@
       "name": "button-style-with-icon",
       "title": "button-style-with-icon",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/button.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/button.json"],
       "files": [
         {
           "path": "preview/components/button-style-with-icon.tsx",
@@ -632,9 +647,7 @@
       "name": "card-style-default",
       "title": "card-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/card.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/card.json"],
       "files": [
         {
           "path": "preview/components/card-style-default.tsx",
@@ -647,9 +660,7 @@
       "name": "card-style-commerce",
       "title": "card-style-commerce",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/card.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/card.json"],
       "files": [
         {
           "path": "preview/components/card-style-commerce.tsx",
@@ -662,9 +673,7 @@
       "name": "card-style-testimonial",
       "title": "card-style-testimonial",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/card.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/card.json"],
       "files": [
         {
           "path": "preview/components/card-style-testimonial.tsx",
@@ -677,9 +686,7 @@
       "name": "checkbox-style-default",
       "title": "checkbox-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/checkbox.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/checkbox.json"],
       "files": [
         {
           "path": "preview/components/checkbox-style-default.tsx",
@@ -692,9 +699,7 @@
       "name": "checkbox-style-toggle",
       "title": "checkbox-style-toggle",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/checkbox.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/checkbox.json"],
       "files": [
         {
           "path": "preview/components/checkbox-style-variants.tsx",
@@ -707,9 +712,7 @@
       "name": "checkbox-style-default",
       "title": "checkbox-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/checkbox.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/checkbox.json"],
       "files": [
         {
           "path": "preview/components/checkbox-style-sizes.tsx",
@@ -722,9 +725,7 @@
       "name": "input-style-default",
       "title": "input-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/input.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/input.json"],
       "files": [
         {
           "path": "preview/components/input-style-default.tsx",
@@ -737,9 +738,7 @@
       "name": "input-style-with-label",
       "title": "input-style-with-label",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/input.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/input.json"],
       "files": [
         {
           "path": "preview/components/input-style-with-label.tsx",
@@ -752,9 +751,7 @@
       "name": "input-style-error",
       "title": "input-style-error",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/input.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/input.json"],
       "files": [
         {
           "path": "preview/components/input-style-error.tsx",
@@ -767,9 +764,7 @@
       "name": "menu-style-default",
       "title": "menu-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/menu.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/menu.json"],
       "files": [
         {
           "path": "preview/components/menu-style-default.tsx",
@@ -782,9 +777,7 @@
       "name": "progress-style-default",
       "title": "progress-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/progress.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/progress.json"],
       "files": [
         {
           "path": "preview/components/progress-style-default.tsx",
@@ -797,9 +790,7 @@
       "name": "radio-style-default",
       "title": "radio-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/radio.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/radio.json"],
       "files": [
         {
           "path": "preview/components/radio-style-default.tsx",
@@ -812,9 +803,7 @@
       "name": "radio-style-variants",
       "title": "radio-style-variants",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/radio.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/radio.json"],
       "files": [
         {
           "path": "preview/components/radio-style-variants.tsx",
@@ -827,9 +816,7 @@
       "name": "radio-style-sizes",
       "title": "radio-style-sizes",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/radio.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/radio.json"],
       "files": [
         {
           "path": "preview/components/radio-style-sizes.tsx",
@@ -842,9 +829,7 @@
       "name": "select-style-default",
       "title": "select-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/select.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/select.json"],
       "files": [
         {
           "path": "preview/components/select-style-default.tsx",
@@ -857,9 +842,7 @@
       "name": "switch-style-default",
       "title": "switch-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/switch.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/switch.json"],
       "files": [
         {
           "path": "preview/components/switch-style-default.tsx",
@@ -872,9 +855,7 @@
       "name": "switch-style-disabled",
       "title": "switch-style-disabled",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/switch.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/switch.json"],
       "files": [
         {
           "path": "preview/components/switch-style-disabled.tsx",
@@ -887,9 +868,7 @@
       "name": "textarea-style-default",
       "title": "textarea-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/textarea.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/textarea.json"],
       "files": [
         {
           "path": "preview/components/textarea-style-default.tsx",
@@ -902,9 +881,7 @@
       "name": "text-headings",
       "title": "text-headings",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/text.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/text.json"],
       "files": [
         {
           "path": "preview/components/text-headings.tsx",
@@ -917,9 +894,7 @@
       "name": "typography-p",
       "title": "typography-p",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/text.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/text.json"],
       "files": [
         {
           "path": "preview/components/typography-p.tsx",
@@ -932,9 +907,7 @@
       "name": "tab-style-default",
       "title": "tab-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/tab.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/tab.json"],
       "files": [
         {
           "path": "preview/components/tab-style-default.tsx",
@@ -947,9 +920,7 @@
       "name": "dialog-style-default",
       "title": "dialog-style-default",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/dialog.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/dialog.json"],
       "files": [
         {
           "path": "preview/components/dialog-style-default.tsx",
@@ -962,9 +933,7 @@
       "name": "dialog-style-with-footer",
       "title": "dialog-style-with-footer",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/dialog.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/dialog.json"],
       "files": [
         {
           "path": "preview/components/dialog-style-with-footer.tsx",
@@ -977,9 +946,7 @@
       "name": "dialog-style-width-variant",
       "title": "dialog-style-width-variant",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/dialog.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/dialog.json"],
       "files": [
         {
           "path": "preview/components/dialog-style-width-variant.tsx",
@@ -992,9 +959,7 @@
       "name": "dialog-style-with-form",
       "title": "dialog-style-with-form",
       "type": "registry:block",
-      "registryDependencies": [
-        "https://retroui.dev/r/dialog.json"
-      ],
+      "registryDependencies": ["https://retroui.dev/r/dialog.json"],
       "files": [
         {
           "path": "preview/components/dialog-style-with-form.tsx",
@@ -1002,6 +967,325 @@
           "type": "registry:block"
         }
       ]
+    },
+    {
+      "name": "toggle-style-default",
+      "title": "toggle-style-default",
+      "type": "registry:block",
+      "registryDependencies": ["https://retroui.dev/r/toggle.json"],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/toggle-style-default.tsx",
+          "target": "components/retroui/preview/toggle-style-default.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "toggle-style-outline-muted",
+      "title": "toggle-style-outline-muted",
+      "type": "registry:block",
+      "registryDependencies": ["https://retroui.dev/r/toggle.json"],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/toggle-style-outline-muted.tsx",
+          "target": "components/retroui/preview/toggle-style-outline-muted.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "toggle-style-outlined",
+      "title": "toggle-style-outlined",
+      "type": "registry:block",
+      "registryDependencies": ["https://retroui.dev/r/toggle.json"],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/toggle-style-outlined.tsx",
+          "target": "components/retroui/preview/toggle-style-outlined.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "toggle-style-solid",
+      "title": "toggle-style-solid",
+      "type": "registry:block",
+      "registryDependencies": ["https://retroui.dev/r/toggle.json"],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/toggle-style-solid.tsx",
+          "target": "components/retroui/preview/toggle-style-solid.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-style-default",
+      "title": "toggle-group-style-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/toggle.json",
+        "https://retroui.dev/r/toggle-group.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/toggle-group-style-default.tsx",
+          "target": "components/retroui/preview/toggle-group-style-default.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-style-outline-muted",
+      "title": "toggle-group-style-outline-muted",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/toggle.json",
+        "https://retroui.dev/r/toggle-group.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/toggle-group-style-outline-muted.tsx",
+          "target": "components/retroui/preview/toggle-group-style-outline-muted.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-style-outlined",
+      "title": "toggle-group-style-outlined",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/toggle.json",
+        "https://retroui.dev/r/toggle-group.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/toggle-group-style-outlined.tsx",
+          "target": "components/retroui/preview/toggle-group-style-outlined.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "toggle-group-style-solid",
+      "title": "toggle-group-style-solid",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/toggle.json",
+        "https://retroui.dev/r/toggle-group.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/toggle-group-style-solid.tsx",
+          "target": "components/retroui/preview/toggle-group-style-solid.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "tooltip-style-default",
+      "title": "tooltip-style-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/tooltip.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/tooltip-style-default.tsx",
+          "target": "components/retroui/preview/tooltip-style-default.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "tooltip-style-primary",
+      "title": "tooltip-style-primary",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/tooltip.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/tooltip-style-primary.tsx",
+          "target": "components/retroui/preview/tooltip-style-primary.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "tooltip-style-solid",
+      "title": "tooltip-style-solid",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/tooltip.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/tooltip-style-solid.tsx",
+          "target": "components/retroui/preview/tooltip-style-solid.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "sonner-style-default",
+      "title": "sonner-style-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/sonner.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/sonner-style-default.tsx",
+          "target": "components/retroui/preview/sonner-style-default.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "sonner-style-error",
+      "title": "sonner-style-error",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/sonner.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/sonner-style-error.tsx",
+          "target": "components/retroui/preview/sonner-style-error.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "sonner-style-warning",
+      "title": "sonner-style-warning",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/sonner.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/sonner-style-warning.tsx",
+          "target": "components/retroui/preview/sonner-style-warning.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "sonner-style-rich-colors",
+      "title": "sonner-style-rich-colors",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/sonner.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/sonner-style-rich-colors.tsx",
+          "target": "components/retroui/preview/sonner-style-rich-colors.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "popover-style-default",
+      "title": "popover-style-default",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/popover.json",
+        "https://retroui.dev/r/label.json",
+        "https://retroui.dev/r/input.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/popover-style-default.tsx",
+          "target": "components/retroui/preview/popover-style-default.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "popover-style-default-shadow",
+      "title": "popover-style-default-shadow",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/popover.json",
+        "https://retroui.dev/r/label.json",
+        "https://retroui.dev/r/input.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/popover-style-default-shadow.tsx",
+          "target": "components/retroui/preview/popover-style-default-shadow.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "popover-style-primary",
+      "title": "popover-style-primary",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/popover.json",
+        "https://retroui.dev/r/label.json",
+        "https://retroui.dev/r/input.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/popover-style-primary.tsx",
+          "target": "components/retroui/preview/popover-style-primary.tsx",
+          "type": "registry:block"
+        }
+      ]
+    },
+    {
+      "name": "popover-style-primary-shadow",
+      "title": "popover-style-primary-shadow",
+      "type": "registry:block",
+      "registryDependencies": [
+        "https://retroui.dev/r/popover.json",
+        "https://retroui.dev/r/label.json",
+        "https://retroui.dev/r/input.json",
+        "https://retroui.dev/r/button.json"
+      ],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "preview/components/popover-style-primary-shadow.tsx",
+          "target": "components/retroui/preview/popover-style-primary-shadow.tsx",
+          "type": "registry:block"
+        }
+      ]
     }
   ]
-}
\ No newline at end of file
+}