diff --git a/packages/js/services/use-display-feedback.ts b/packages/js/services/use-display-feedback.ts
index fe12387e..8ed65c0c 100644
--- a/packages/js/services/use-display-feedback.ts
+++ b/packages/js/services/use-display-feedback.ts
@@ -1,5 +1,8 @@
 import { __ } from '@wpsocio/i18n';
-import { type Toast, useToast } from '@wpsocio/ui-components/ui/use-toast.js';
+import {
+	type Toast,
+	useToast,
+} from '@wpsocio/ui-components/ui/hooks/use-toast.js';
 import { FORM_ERROR } from '@wpsocio/utilities/constants.js';
 import { getErrorStrings } from '@wpsocio/utilities/misc.js';
 import type { AnyObject } from '@wpsocio/utilities/types.js';
diff --git a/packages/js/ui-components/components.json b/packages/js/ui-components/components.json
index 9def1d6b..38283326 100644
--- a/packages/js/ui-components/components.json
+++ b/packages/js/ui-components/components.json
@@ -10,6 +10,8 @@
 	},
 	"aliases": {
 		"components": "@",
-		"utils": "@/lib/utils.js"
+		"utils": "@/lib/utils.js",
+		"lib": "@/lib",
+		"hooks": "@/ui/hooks"
 	}
 }
diff --git a/packages/js/ui-components/tools/tailwind.config.js b/packages/js/ui-components/tools/tailwind.config.js
index 3c363ad6..126b12cb 100644
--- a/packages/js/ui-components/tools/tailwind.config.js
+++ b/packages/js/ui-components/tools/tailwind.config.js
@@ -11,7 +11,7 @@ export default {
 	],
 	theme: {
 		container: {
-			center: true,
+			center: 'true',
 			padding: '2rem',
 			screens: {
 				'2xl': '1400px',
@@ -60,12 +60,20 @@ export default {
 			},
 			keyframes: {
 				'accordion-down': {
-					from: { height: 0 },
-					to: { height: 'var(--radix-accordion-content-height)' },
+					from: {
+						height: '0',
+					},
+					to: {
+						height: 'var(--radix-accordion-content-height)',
+					},
 				},
 				'accordion-up': {
-					from: { height: 'var(--radix-accordion-content-height)' },
-					to: { height: 0 },
+					from: {
+						height: 'var(--radix-accordion-content-height)',
+					},
+					to: {
+						height: '0',
+					},
 				},
 			},
 			animation: {
diff --git a/packages/js/ui-components/ui/accordion.tsx b/packages/js/ui-components/ui/accordion.tsx
index 5a2339e7..f0b17117 100644
--- a/packages/js/ui-components/ui/accordion.tsx
+++ b/packages/js/ui-components/ui/accordion.tsx
@@ -4,11 +4,6 @@ import { ChevronDown } from "lucide-react"
 
 import { cn } from "../lib/utils.js"
 
-export type AccordionHeaderProps = {
-  beforeTrigger?: React.ReactNode
-  afterTrigger?: React.ReactNode
-}
-
 const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef<
@@ -25,10 +20,9 @@ AccordionItem.displayName = "AccordionItem"
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & AccordionHeaderProps
->(({ className, children, beforeTrigger, afterTrigger, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex items-center gap-1">
-    {beforeTrigger}
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
@@ -40,7 +34,6 @@ const AccordionTrigger = React.forwardRef<
       {children}
       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
-    {afterTrigger}
   </AccordionPrimitive.Header>
 ))
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
@@ -51,12 +44,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className={cn(
-      'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
-      {
-        'data-[state=closed]:h-0 data-[state=closed]:invisible': props.forceMount,
-      }
-    )}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
diff --git a/packages/js/ui-components/ui/button.tsx b/packages/js/ui-components/ui/button.tsx
index a743bcdb..16fc5e3d 100644
--- a/packages/js/ui-components/ui/button.tsx
+++ b/packages/js/ui-components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../lib/utils.js"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors 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",
   {
     variants: {
       variant: {
diff --git a/packages/js/ui-components/ui/card.tsx b/packages/js/ui-components/ui/card.tsx
index 99e07464..0c581128 100644
--- a/packages/js/ui-components/ui/card.tsx
+++ b/packages/js/ui-components/ui/card.tsx
@@ -30,10 +30,10 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
     ref={ref}
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
@@ -45,10 +45,10 @@ const CardTitle = React.forwardRef<
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
diff --git a/packages/js/ui-components/ui/dialog.tsx b/packages/js/ui-components/ui/dialog.tsx
index 245edb81..5c41a48a 100644
--- a/packages/js/ui-components/ui/dialog.tsx
+++ b/packages/js/ui-components/ui/dialog.tsx
@@ -1,6 +1,6 @@
+import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
-import * as React from "react"
 
 import { cn } from "../lib/utils.js"
 
diff --git a/packages/js/ui-components/ui/dropdown-menu.tsx b/packages/js/ui-components/ui/dropdown-menu.tsx
deleted file mode 100644
index 1513d201..00000000
--- a/packages/js/ui-components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "../lib/utils.js"
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
diff --git a/packages/js/ui-components/ui/use-toast.ts b/packages/js/ui-components/ui/hooks/use-toast.ts
similarity index 97%
rename from packages/js/ui-components/ui/use-toast.ts
rename to packages/js/ui-components/ui/hooks/use-toast.ts
index b257be66..09f88cfe 100644
--- a/packages/js/ui-components/ui/use-toast.ts
+++ b/packages/js/ui-components/ui/hooks/use-toast.ts
@@ -4,7 +4,13 @@ import * as React from "react"
 import type {
   ToastActionElement,
   ToastProps,
-} from "./toast.js"
+} from "../toast.js"
+
+/**
+ * Customizations:
+ * - TOAST_LIMIT = 5
+ * - status?: prop
+ */
 
 const TOAST_LIMIT = 5
 const TOAST_REMOVE_DELAY = 1000000
diff --git a/packages/js/ui-components/ui/input.tsx b/packages/js/ui-components/ui/input.tsx
index 60bd4509..b36a6ef2 100644
--- a/packages/js/ui-components/ui/input.tsx
+++ b/packages/js/ui-components/ui/input.tsx
@@ -2,16 +2,13 @@ import * as React from "react"
 
 import { cn } from "../lib/utils.js"
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
diff --git a/packages/js/ui-components/ui/scroll-area.tsx b/packages/js/ui-components/ui/scroll-area.tsx
deleted file mode 100644
index 59c8e96b..00000000
--- a/packages/js/ui-components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-
-import { cn } from "../lib/utils.js"
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
-
-export { ScrollArea, ScrollBar }
diff --git a/packages/js/ui-components/ui/select.tsx b/packages/js/ui-components/ui/select.tsx
index f0bbfd65..a300e52c 100644
--- a/packages/js/ui-components/ui/select.tsx
+++ b/packages/js/ui-components/ui/select.tsx
@@ -4,6 +4,11 @@ import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
 import { cn } from "../lib/utils.js"
 
+/**
+ * Customizations:
+ * - portalContainer
+ */
+
 const Select = SelectPrimitive.Root
 
 const SelectGroup = SelectPrimitive.Group
diff --git a/packages/js/ui-components/ui/sheet.tsx b/packages/js/ui-components/ui/sheet.tsx
deleted file mode 100644
index 62eeb198..00000000
--- a/packages/js/ui-components/ui/sheet.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "../lib/utils.js"
-
-const Sheet = SheetPrimitive.Root
-
-const SheetTrigger = SheetPrimitive.Trigger
-
-const SheetClose = SheetPrimitive.Close
-
-const SheetPortal = SheetPrimitive.Portal
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-)
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = "SheetHeader"
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
diff --git a/packages/js/ui-components/ui/table.tsx b/packages/js/ui-components/ui/table.tsx
deleted file mode 100644
index 2f67de98..00000000
--- a/packages/js/ui-components/ui/table.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../lib/utils.js"
-
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableFooter.displayName = "TableFooter"
-
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
diff --git a/packages/js/ui-components/ui/textarea.tsx b/packages/js/ui-components/ui/textarea.tsx
index f56a9f28..9c33b7d3 100644
--- a/packages/js/ui-components/ui/textarea.tsx
+++ b/packages/js/ui-components/ui/textarea.tsx
@@ -2,23 +2,21 @@ import * as React from "react"
 
 import { cn } from "../lib/utils.js"
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
 Textarea.displayName = "Textarea"
 
 export { Textarea }
diff --git a/packages/js/ui-components/ui/toaster.tsx b/packages/js/ui-components/ui/toaster.tsx
index 50688ee4..abaea283 100644
--- a/packages/js/ui-components/ui/toaster.tsx
+++ b/packages/js/ui-components/ui/toaster.tsx
@@ -6,7 +6,7 @@ import {
   ToastTitle,
   ToastViewport,
 } from "./toast.js"
-import { useToast } from "./use-toast.js"
+import { useToast } from "./hooks/use-toast.js"
 
 export function Toaster() {
   const { toasts } = useToast()
diff --git a/packages/js/ui-components/wrappers/accordion.tsx b/packages/js/ui-components/wrappers/accordion.tsx
index 7da2381b..17bdebf8 100644
--- a/packages/js/ui-components/wrappers/accordion.tsx
+++ b/packages/js/ui-components/wrappers/accordion.tsx
@@ -1,7 +1,6 @@
 import { cn } from '../lib/utils.js';
 import {
 	AccordionContent,
-	type AccordionHeaderProps,
 	AccordionItem,
 	AccordionTrigger,
 	Accordion as AccordionUI,
@@ -16,7 +15,7 @@ export type AccordionItemProps = {
 	content?: Content;
 	className?: string;
 	wrapperClassName?: string;
-} & AccordionHeaderProps;
+};
 
 export type AccordionProps = Partial<
 	Pick<React.ComponentProps<typeof AccordionUI>, 'type' | 'className'>
diff --git a/packages/js/ui-components/wrappers/avatar.tsx b/packages/js/ui-components/wrappers/avatar.tsx
deleted file mode 100644
index e881dc79..00000000
--- a/packages/js/ui-components/wrappers/avatar.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils.js';
-
-const avatarVariants = cva('rounded-full overflow-hidden', {
-	variants: {
-		size: {
-			xs: 'h-4 w-4',
-			sm: 'h-8 w-8',
-			md: 'h-12 w-12',
-			lg: 'h-16 w-16',
-			xl: 'h-20 w-20',
-			xxl: 'h-24 w-24',
-		},
-	},
-	defaultVariants: {
-		size: 'md',
-	},
-});
-
-export type AvatarProps = React.ButtonHTMLAttributes<HTMLSpanElement> &
-	VariantProps<typeof avatarVariants> & {
-		name: string;
-		src: string;
-	};
-
-export function Avatar({ name, size, src, className, ...props }: AvatarProps) {
-	return (
-		<span className={cn(avatarVariants({ size, className }))} {...props}>
-			<img src={src} alt={name} className="w-full h-full object-cover" />
-		</span>
-	);
-}
diff --git a/packages/js/ui-components/wrappers/dropdown-menu.tsx b/packages/js/ui-components/wrappers/dropdown-menu.tsx
deleted file mode 100644
index 74838e2d..00000000
--- a/packages/js/ui-components/wrappers/dropdown-menu.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-	DropdownMenu as DropdownMenuUI,
-} from '../ui/dropdown-menu.js';
-
-export type DropdownMenuProps = React.ComponentProps<typeof DropdownMenuUI> & {
-	trigger: React.ReactNode;
-	label: React.ReactNode;
-	items?: Array<React.ComponentProps<typeof DropdownMenuItem> & { id: string }>;
-	children?: Array<React.ReactNode>;
-};
-
-export function DropdownMenu({
-	trigger,
-	label,
-	children,
-	items,
-	...props
-}: DropdownMenuProps) {
-	return (
-		<DropdownMenuUI {...props}>
-			<DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
-			<DropdownMenuContent>
-				<DropdownMenuLabel>{label}</DropdownMenuLabel>
-				<DropdownMenuSeparator />
-				{children ||
-					items?.map((props) => <DropdownMenuItem key={props.id} {...props} />)}
-			</DropdownMenuContent>
-		</DropdownMenuUI>
-	);
-}
diff --git a/packages/js/ui-components/wrappers/table.tsx b/packages/js/ui-components/wrappers/table.tsx
deleted file mode 100644
index 8c899828..00000000
--- a/packages/js/ui-components/wrappers/table.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-	Table as TableUI,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from '../ui/table.js';
-
-export type TableColumn = {
-	id: string;
-	label?: React.ReactNode;
-} & React.ComponentProps<typeof TableHead>;
-
-export type TableDataItem = {
-	id: string;
-	value: React.ReactNode;
-} & React.ComponentProps<typeof TableCell>;
-
-export type TableData = {
-	id: string;
-	items: Array<TableDataItem>;
-};
-
-export type TableProps = {
-	caption?: string;
-	columns: Array<TableColumn>;
-	children?: Array<TableData>;
-	data?: Array<TableData>;
-} & Omit<React.ComponentProps<typeof TableUI>, 'children'>;
-
-export function Table({
-	caption,
-	columns,
-	data,
-	children,
-	...props
-}: TableProps) {
-	const tableData = data || children || [];
-
-	return (
-		<TableUI {...props}>
-			{caption ? <TableCaption>{caption}</TableCaption> : null}
-			<TableHeader>
-				<TableRow>
-					{columns.map(({ id, label, children, ...props }) => (
-						<TableHead key={id} {...props}>
-							{label || children}
-						</TableHead>
-					))}
-				</TableRow>
-			</TableHeader>
-			<TableBody>
-				{tableData.map(({ id, items }) => (
-					<TableRow key={id}>
-						{items.map(({ id, value, ...props }) => (
-							<TableCell key={id} {...props}>
-								{value}
-							</TableCell>
-						))}
-					</TableRow>
-				))}
-			</TableBody>
-		</TableUI>
-	);
-}