From 55ff100ec3e5a1a7f9907697459f15a7921cc13a Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sun, 18 Jan 2026 00:49:50 +0000
Subject: [PATCH] refactor(ui): split primitives into per-file components

---
 src/components/ui/alert-dialog.tsx            | 157 --------
 .../ui/alert-dialog/alert-dialog-action.tsx   |  21 ++
 .../ui/alert-dialog/alert-dialog-cancel.tsx   |  21 ++
 .../ui/alert-dialog/alert-dialog-content.tsx  |  30 ++
 .../alert-dialog/alert-dialog-description.tsx |  21 ++
 .../ui/alert-dialog/alert-dialog-footer.tsx   |  23 ++
 .../ui/alert-dialog/alert-dialog-header.tsx   |  20 +
 .../ui/alert-dialog/alert-dialog-overlay.tsx  |  24 ++
 .../ui/alert-dialog/alert-dialog-portal.tsx   |  14 +
 .../ui/alert-dialog/alert-dialog-title.tsx    |  21 ++
 .../ui/alert-dialog/alert-dialog-trigger.tsx  |  14 +
 .../ui/alert-dialog/alert-dialog.tsx          |  12 +
 src/components/ui/alert-dialog/index.tsx      |  11 +
 src/components/ui/carousel.tsx                | 242 ------------
 .../ui/carousel/carousel-content.tsx          |  30 ++
 .../ui/carousel/carousel-context.ts           |  18 +
 src/components/ui/carousel/carousel-item.tsx  |  27 ++
 src/components/ui/carousel/carousel-next.tsx  |  41 ++
 .../ui/carousel/carousel-previous.tsx         |  41 ++
 src/components/ui/carousel/carousel-types.ts  |  18 +
 src/components/ui/carousel/carousel.tsx       | 109 ++++++
 src/components/ui/carousel/index.tsx          |   6 +
 src/components/ui/carousel/use-carousel.tsx   |  17 +
 src/components/ui/chart.tsx                   | 351 ------------------
 src/components/ui/chart/chart-constants.ts    |  16 +
 src/components/ui/chart/chart-container.tsx   |  45 +++
 src/components/ui/chart/chart-context.ts      |  12 +
 .../ui/chart/chart-legend-content.tsx         |  63 ++++
 src/components/ui/chart/chart-legend.tsx      |   5 +
 src/components/ui/chart/chart-style.tsx       |  36 ++
 .../ui/chart/chart-tooltip-content.tsx        | 153 ++++++++
 src/components/ui/chart/chart-tooltip.tsx     |   5 +
 .../chart/get-payload-config-from-payload.ts  |  42 +++
 src/components/ui/chart/index.tsx             |   7 +
 src/components/ui/chart/use-chart.tsx         |  15 +
 src/components/ui/command.tsx                 | 177 ---------
 src/components/ui/command/command-dialog.tsx  |  39 ++
 src/components/ui/command/command-empty.tsx   |  18 +
 src/components/ui/command/command-group.tsx   |  24 ++
 src/components/ui/command/command-input.tsx   |  31 ++
 src/components/ui/command/command-item.tsx    |  24 ++
 src/components/ui/command/command-list.tsx    |  24 ++
 .../ui/command/command-separator.tsx          |  21 ++
 .../ui/command/command-shortcut.tsx           |  23 ++
 src/components/ui/command/command.tsx         |  24 ++
 src/components/ui/command/index.tsx           |   9 +
 src/components/ui/context-menu.tsx            | 254 -------------
 .../context-menu-checkbox-item.tsx            |  35 ++
 .../ui/context-menu/context-menu-content.tsx  |  26 ++
 .../ui/context-menu/context-menu-group.tsx    |  14 +
 .../ui/context-menu/context-menu-item.tsx     |  31 ++
 .../ui/context-menu/context-menu-label.tsx    |  28 ++
 .../ui/context-menu/context-menu-portal.tsx   |  14 +
 .../context-menu/context-menu-radio-group.tsx |  17 +
 .../context-menu/context-menu-radio-item.tsx  |  33 ++
 .../context-menu/context-menu-separator.tsx   |  21 ++
 .../ui/context-menu/context-menu-shortcut.tsx |  23 ++
 .../context-menu/context-menu-sub-content.tsx |  24 ++
 .../context-menu/context-menu-sub-trigger.tsx |  33 ++
 .../ui/context-menu/context-menu-sub.tsx      |  12 +
 .../ui/context-menu/context-menu-trigger.tsx  |  14 +
 .../ui/context-menu/context-menu.tsx          |  12 +
 src/components/ui/context-menu/index.tsx      |  15 +
 src/components/ui/dropdown-menu.tsx           | 259 -------------
 .../dropdown-menu-checkbox-item.tsx           |  35 ++
 .../dropdown-menu/dropdown-menu-content.tsx   |  28 ++
 .../ui/dropdown-menu/dropdown-menu-group.tsx  |  14 +
 .../ui/dropdown-menu/dropdown-menu-item.tsx   |  31 ++
 .../ui/dropdown-menu/dropdown-menu-label.tsx  |  28 ++
 .../ui/dropdown-menu/dropdown-menu-portal.tsx |  14 +
 .../dropdown-menu-radio-group.tsx             |  17 +
 .../dropdown-menu-radio-item.tsx              |  33 ++
 .../dropdown-menu/dropdown-menu-separator.tsx |  21 ++
 .../dropdown-menu/dropdown-menu-shortcut.tsx  |  23 ++
 .../dropdown-menu-sub-content.tsx             |  24 ++
 .../dropdown-menu-sub-trigger.tsx             |  33 ++
 .../ui/dropdown-menu/dropdown-menu-sub.tsx    |  12 +
 .../dropdown-menu/dropdown-menu-trigger.tsx   |  17 +
 .../ui/dropdown-menu/dropdown-menu.tsx        |  12 +
 src/components/ui/dropdown-menu/index.tsx     |  15 +
 src/components/ui/form.tsx                    | 165 --------
 src/components/ui/form/form-control.tsx       |  24 ++
 src/components/ui/form/form-description.tsx   |  20 +
 src/components/ui/form/form-field-context.ts  |  16 +
 src/components/ui/form/form-field.tsx         |  23 ++
 src/components/ui/form/form-item-context.ts   |  12 +
 src/components/ui/form/form-item.tsx          |  21 ++
 src/components/ui/form/form-label.tsx         |  26 ++
 src/components/ui/form/form-message.tsx       |  27 ++
 src/components/ui/form/form.tsx               |   5 +
 src/components/ui/form/index.tsx              |   8 +
 src/components/ui/form/use-form-field.tsx     |  30 ++
 src/components/ui/menubar.tsx                 | 276 --------------
 src/components/ui/menubar/index.tsx           |  16 +
 .../ui/menubar/menubar-checkbox-item.tsx      |  33 ++
 src/components/ui/menubar/menubar-content.tsx |  32 ++
 src/components/ui/menubar/menubar-group.tsx   |  10 +
 src/components/ui/menubar/menubar-item.tsx    |  29 ++
 src/components/ui/menubar/menubar-label.tsx   |  26 ++
 src/components/ui/menubar/menubar-menu.tsx    |  10 +
 src/components/ui/menubar/menubar-portal.tsx  |  10 +
 .../ui/menubar/menubar-radio-group.tsx        |  12 +
 .../ui/menubar/menubar-radio-item.tsx         |  31 ++
 .../ui/menubar/menubar-separator.tsx          |  19 +
 .../ui/menubar/menubar-shortcut.tsx           |  21 ++
 .../ui/menubar/menubar-sub-content.tsx        |  22 ++
 .../ui/menubar/menubar-sub-trigger.tsx        |  31 ++
 src/components/ui/menubar/menubar-sub.tsx     |  10 +
 src/components/ui/menubar/menubar-trigger.tsx |  22 ++
 src/components/ui/menubar/menubar.tsx         |  22 ++
 src/components/ui/navigation-menu.tsx         | 168 ---------
 src/components/ui/navigation-menu/index.tsx   |   9 +
 .../navigation-menu-content.tsx               |  23 ++
 .../navigation-menu-indicator.tsx             |  24 ++
 .../navigation-menu/navigation-menu-item.tsx  |  19 +
 .../navigation-menu/navigation-menu-link.tsx  |  22 ++
 .../navigation-menu/navigation-menu-list.tsx  |  22 ++
 .../navigation-menu-trigger-style.ts          |   7 +
 .../navigation-menu-trigger.tsx               |  29 ++
 .../navigation-menu-viewport.tsx              |  28 ++
 .../ui/navigation-menu/navigation-menu.tsx    |  32 ++
 src/components/ui/select.tsx                  | 185 ---------
 src/components/ui/select/index.tsx            |  10 +
 src/components/ui/select/select-content.tsx   |  44 +++
 src/components/ui/select/select-group.tsx     |  10 +
 src/components/ui/select/select-item.tsx      |  31 ++
 src/components/ui/select/select-label.tsx     |  19 +
 .../ui/select/select-scroll-down-button.tsx   |  25 ++
 .../ui/select/select-scroll-up-button.tsx     |  25 ++
 src/components/ui/select/select-separator.tsx |  19 +
 src/components/ui/select/select-trigger.tsx   |  33 ++
 src/components/ui/select/select-value.tsx     |  10 +
 src/components/ui/select/select.tsx           |  10 +
 133 files changed, 2903 insertions(+), 2234 deletions(-)
 delete mode 100644 src/components/ui/alert-dialog.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog-action.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog-cancel.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog-content.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog-description.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog-footer.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog-header.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog-overlay.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog-portal.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog-title.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog-trigger.tsx
 create mode 100644 src/components/ui/alert-dialog/alert-dialog.tsx
 create mode 100644 src/components/ui/alert-dialog/index.tsx
 delete mode 100644 src/components/ui/carousel.tsx
 create mode 100644 src/components/ui/carousel/carousel-content.tsx
 create mode 100644 src/components/ui/carousel/carousel-context.ts
 create mode 100644 src/components/ui/carousel/carousel-item.tsx
 create mode 100644 src/components/ui/carousel/carousel-next.tsx
 create mode 100644 src/components/ui/carousel/carousel-previous.tsx
 create mode 100644 src/components/ui/carousel/carousel-types.ts
 create mode 100644 src/components/ui/carousel/carousel.tsx
 create mode 100644 src/components/ui/carousel/index.tsx
 create mode 100644 src/components/ui/carousel/use-carousel.tsx
 delete mode 100644 src/components/ui/chart.tsx
 create mode 100644 src/components/ui/chart/chart-constants.ts
 create mode 100644 src/components/ui/chart/chart-container.tsx
 create mode 100644 src/components/ui/chart/chart-context.ts
 create mode 100644 src/components/ui/chart/chart-legend-content.tsx
 create mode 100644 src/components/ui/chart/chart-legend.tsx
 create mode 100644 src/components/ui/chart/chart-style.tsx
 create mode 100644 src/components/ui/chart/chart-tooltip-content.tsx
 create mode 100644 src/components/ui/chart/chart-tooltip.tsx
 create mode 100644 src/components/ui/chart/get-payload-config-from-payload.ts
 create mode 100644 src/components/ui/chart/index.tsx
 create mode 100644 src/components/ui/chart/use-chart.tsx
 delete mode 100644 src/components/ui/command.tsx
 create mode 100644 src/components/ui/command/command-dialog.tsx
 create mode 100644 src/components/ui/command/command-empty.tsx
 create mode 100644 src/components/ui/command/command-group.tsx
 create mode 100644 src/components/ui/command/command-input.tsx
 create mode 100644 src/components/ui/command/command-item.tsx
 create mode 100644 src/components/ui/command/command-list.tsx
 create mode 100644 src/components/ui/command/command-separator.tsx
 create mode 100644 src/components/ui/command/command-shortcut.tsx
 create mode 100644 src/components/ui/command/command.tsx
 create mode 100644 src/components/ui/command/index.tsx
 delete mode 100644 src/components/ui/context-menu.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-checkbox-item.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-content.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-group.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-item.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-label.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-portal.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-radio-group.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-radio-item.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-separator.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-shortcut.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-sub-content.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-sub-trigger.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-sub.tsx
 create mode 100644 src/components/ui/context-menu/context-menu-trigger.tsx
 create mode 100644 src/components/ui/context-menu/context-menu.tsx
 create mode 100644 src/components/ui/context-menu/index.tsx
 delete mode 100644 src/components/ui/dropdown-menu.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-content.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-group.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-item.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-label.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-portal.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-radio-group.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-radio-item.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-separator.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-shortcut.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-sub-content.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-sub.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu-trigger.tsx
 create mode 100644 src/components/ui/dropdown-menu/dropdown-menu.tsx
 create mode 100644 src/components/ui/dropdown-menu/index.tsx
 delete mode 100644 src/components/ui/form.tsx
 create mode 100644 src/components/ui/form/form-control.tsx
 create mode 100644 src/components/ui/form/form-description.tsx
 create mode 100644 src/components/ui/form/form-field-context.ts
 create mode 100644 src/components/ui/form/form-field.tsx
 create mode 100644 src/components/ui/form/form-item-context.ts
 create mode 100644 src/components/ui/form/form-item.tsx
 create mode 100644 src/components/ui/form/form-label.tsx
 create mode 100644 src/components/ui/form/form-message.tsx
 create mode 100644 src/components/ui/form/form.tsx
 create mode 100644 src/components/ui/form/index.tsx
 create mode 100644 src/components/ui/form/use-form-field.tsx
 delete mode 100644 src/components/ui/menubar.tsx
 create mode 100644 src/components/ui/menubar/index.tsx
 create mode 100644 src/components/ui/menubar/menubar-checkbox-item.tsx
 create mode 100644 src/components/ui/menubar/menubar-content.tsx
 create mode 100644 src/components/ui/menubar/menubar-group.tsx
 create mode 100644 src/components/ui/menubar/menubar-item.tsx
 create mode 100644 src/components/ui/menubar/menubar-label.tsx
 create mode 100644 src/components/ui/menubar/menubar-menu.tsx
 create mode 100644 src/components/ui/menubar/menubar-portal.tsx
 create mode 100644 src/components/ui/menubar/menubar-radio-group.tsx
 create mode 100644 src/components/ui/menubar/menubar-radio-item.tsx
 create mode 100644 src/components/ui/menubar/menubar-separator.tsx
 create mode 100644 src/components/ui/menubar/menubar-shortcut.tsx
 create mode 100644 src/components/ui/menubar/menubar-sub-content.tsx
 create mode 100644 src/components/ui/menubar/menubar-sub-trigger.tsx
 create mode 100644 src/components/ui/menubar/menubar-sub.tsx
 create mode 100644 src/components/ui/menubar/menubar-trigger.tsx
 create mode 100644 src/components/ui/menubar/menubar.tsx
 delete mode 100644 src/components/ui/navigation-menu.tsx
 create mode 100644 src/components/ui/navigation-menu/index.tsx
 create mode 100644 src/components/ui/navigation-menu/navigation-menu-content.tsx
 create mode 100644 src/components/ui/navigation-menu/navigation-menu-indicator.tsx
 create mode 100644 src/components/ui/navigation-menu/navigation-menu-item.tsx
 create mode 100644 src/components/ui/navigation-menu/navigation-menu-link.tsx
 create mode 100644 src/components/ui/navigation-menu/navigation-menu-list.tsx
 create mode 100644 src/components/ui/navigation-menu/navigation-menu-trigger-style.ts
 create mode 100644 src/components/ui/navigation-menu/navigation-menu-trigger.tsx
 create mode 100644 src/components/ui/navigation-menu/navigation-menu-viewport.tsx
 create mode 100644 src/components/ui/navigation-menu/navigation-menu.tsx
 delete mode 100644 src/components/ui/select.tsx
 create mode 100644 src/components/ui/select/index.tsx
 create mode 100644 src/components/ui/select/select-content.tsx
 create mode 100644 src/components/ui/select/select-group.tsx
 create mode 100644 src/components/ui/select/select-item.tsx
 create mode 100644 src/components/ui/select/select-label.tsx
 create mode 100644 src/components/ui/select/select-scroll-down-button.tsx
 create mode 100644 src/components/ui/select/select-scroll-up-button.tsx
 create mode 100644 src/components/ui/select/select-separator.tsx
 create mode 100644 src/components/ui/select/select-trigger.tsx
 create mode 100644 src/components/ui/select/select-value.tsx
 create mode 100644 src/components/ui/select/select.tsx

diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
deleted file mode 100644
index a6f8177..0000000
--- a/src/components/ui/alert-dialog.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-function AlertDialog({
-  ...props
-}: ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({
-  ...props
-}: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({
-  ...props
-}: ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}
diff --git a/src/components/ui/alert-dialog/alert-dialog-action.tsx b/src/components/ui/alert-dialog/alert-dialog-action.tsx
new file mode 100644
index 0000000..7a94842
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog-action.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialogAction({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+export { AlertDialogAction }
diff --git a/src/components/ui/alert-dialog/alert-dialog-cancel.tsx b/src/components/ui/alert-dialog/alert-dialog-cancel.tsx
new file mode 100644
index 0000000..83e28e4
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog-cancel.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export { AlertDialogCancel }
diff --git a/src/components/ui/alert-dialog/alert-dialog-content.tsx b/src/components/ui/alert-dialog/alert-dialog-content.tsx
new file mode 100644
index 0000000..9dbc22d
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog-content.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+
+import { AlertDialogOverlay } from "./alert-dialog-overlay"
+import { AlertDialogPortal } from "./alert-dialog-portal"
+
+function AlertDialogContent({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+export { AlertDialogContent }
diff --git a/src/components/ui/alert-dialog/alert-dialog-description.tsx b/src/components/ui/alert-dialog/alert-dialog-description.tsx
new file mode 100644
index 0000000..496e4c9
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog-description.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export { AlertDialogDescription }
diff --git a/src/components/ui/alert-dialog/alert-dialog-footer.tsx b/src/components/ui/alert-dialog/alert-dialog-footer.tsx
new file mode 100644
index 0000000..1f77db3
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog-footer.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { AlertDialogFooter }
diff --git a/src/components/ui/alert-dialog/alert-dialog-header.tsx b/src/components/ui/alert-dialog/alert-dialog-header.tsx
new file mode 100644
index 0000000..25829a4
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog-header.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+export { AlertDialogHeader }
diff --git a/src/components/ui/alert-dialog/alert-dialog-overlay.tsx b/src/components/ui/alert-dialog/alert-dialog-overlay.tsx
new file mode 100644
index 0000000..bed50cf
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog-overlay.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { AlertDialogOverlay }
diff --git a/src/components/ui/alert-dialog/alert-dialog-portal.tsx b/src/components/ui/alert-dialog/alert-dialog-portal.tsx
new file mode 100644
index 0000000..087d522
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog-portal.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+function AlertDialogPortal({
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+export { AlertDialogPortal }
diff --git a/src/components/ui/alert-dialog/alert-dialog-title.tsx b/src/components/ui/alert-dialog/alert-dialog-title.tsx
new file mode 100644
index 0000000..e4bf00d
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog-title.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+export { AlertDialogTitle }
diff --git a/src/components/ui/alert-dialog/alert-dialog-trigger.tsx b/src/components/ui/alert-dialog/alert-dialog-trigger.tsx
new file mode 100644
index 0000000..d5fba4f
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog-trigger.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+function AlertDialogTrigger({
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+export { AlertDialogTrigger }
diff --git a/src/components/ui/alert-dialog/alert-dialog.tsx b/src/components/ui/alert-dialog/alert-dialog.tsx
new file mode 100644
index 0000000..100afa5
--- /dev/null
+++ b/src/components/ui/alert-dialog/alert-dialog.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+function AlertDialog({
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+export { AlertDialog }
diff --git a/src/components/ui/alert-dialog/index.tsx b/src/components/ui/alert-dialog/index.tsx
new file mode 100644
index 0000000..46c9341
--- /dev/null
+++ b/src/components/ui/alert-dialog/index.tsx
@@ -0,0 +1,11 @@
+export { AlertDialog } from "./alert-dialog"
+export { AlertDialogAction } from "./alert-dialog-action"
+export { AlertDialogCancel } from "./alert-dialog-cancel"
+export { AlertDialogContent } from "./alert-dialog-content"
+export { AlertDialogDescription } from "./alert-dialog-description"
+export { AlertDialogFooter } from "./alert-dialog-footer"
+export { AlertDialogHeader } from "./alert-dialog-header"
+export { AlertDialogOverlay } from "./alert-dialog-overlay"
+export { AlertDialogPortal } from "./alert-dialog-portal"
+export { AlertDialogTitle } from "./alert-dialog-title"
+export { AlertDialogTrigger } from "./alert-dialog-trigger"
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
deleted file mode 100644
index 0e76744..0000000
--- a/src/components/ui/carousel.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-"use client"
-
-import { ComponentProps, createContext, useCallback, useContext, useEffect, useState, KeyboardEvent } from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import ArrowLeft from "lucide-react/dist/esm/icons/arrow-left"
-import ArrowRight from "lucide-react/dist/esm/icons/arrow-right"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
-}: ComponentProps<"div"> & CarouselProps) {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    },
-    plugins
-  )
-  const [canScrollPrev, setCanScrollPrev] = useState(false)
-  const [canScrollNext, setCanScrollNext] = useState(false)
-
-  const onSelect = useCallback((api: CarouselApi) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
-
-  const scrollPrev = useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
-
-  const scrollNext = useCallback(() => {
-    api?.scrollNext()
-  }, [api])
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault()
-        scrollPrev()
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault()
-        scrollNext()
-      }
-    },
-    [scrollPrev, scrollNext]
-  )
-
-  useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
-
-  useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
-
-    return () => {
-      api?.off("select", onSelect)
-    }
-  }, [api, onSelect])
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role="region"
-        aria-roledescription="carousel"
-        data-slot="carousel"
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  )
-}
-
-function CarouselContent({ className, ...props }: ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
-      <div
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CarouselItem({ className, ...props }: ComponentProps<"div">) {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      role="group"
-      aria-roledescription="slide"
-      data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-previous"
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-}
-
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-next"
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-}
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}
diff --git a/src/components/ui/carousel/carousel-content.tsx b/src/components/ui/carousel/carousel-content.tsx
new file mode 100644
index 0000000..81ebcd3
--- /dev/null
+++ b/src/components/ui/carousel/carousel-content.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { useCarousel } from "./use-carousel"
+
+function CarouselContent({ className, ...props }: ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export { CarouselContent }
diff --git a/src/components/ui/carousel/carousel-context.ts b/src/components/ui/carousel/carousel-context.ts
new file mode 100644
index 0000000..7ffcd86
--- /dev/null
+++ b/src/components/ui/carousel/carousel-context.ts
@@ -0,0 +1,18 @@
+import { createContext } from "react"
+import type { UseEmblaCarouselType } from "embla-carousel-react"
+
+import type { CarouselProps } from "./carousel-types"
+
+type CarouselContextProps = {
+  carouselRef: UseEmblaCarouselType[0]
+  api: UseEmblaCarouselType[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = createContext<CarouselContextProps | null>(null)
+
+export type { CarouselContextProps }
+export { CarouselContext }
diff --git a/src/components/ui/carousel/carousel-item.tsx b/src/components/ui/carousel/carousel-item.tsx
new file mode 100644
index 0000000..112d8fe
--- /dev/null
+++ b/src/components/ui/carousel/carousel-item.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { useCarousel } from "./use-carousel"
+
+function CarouselItem({ className, ...props }: ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { CarouselItem }
diff --git a/src/components/ui/carousel/carousel-next.tsx b/src/components/ui/carousel/carousel-next.tsx
new file mode 100644
index 0000000..52cb2f8
--- /dev/null
+++ b/src/components/ui/carousel/carousel-next.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import { ComponentProps } from "react"
+import ArrowRight from "lucide-react/dist/esm/icons/arrow-right"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+import { useCarousel } from "./use-carousel"
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export { CarouselNext }
diff --git a/src/components/ui/carousel/carousel-previous.tsx b/src/components/ui/carousel/carousel-previous.tsx
new file mode 100644
index 0000000..1b4f9af
--- /dev/null
+++ b/src/components/ui/carousel/carousel-previous.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import { ComponentProps } from "react"
+import ArrowLeft from "lucide-react/dist/esm/icons/arrow-left"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+import { useCarousel } from "./use-carousel"
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+export { CarouselPrevious }
diff --git a/src/components/ui/carousel/carousel-types.ts b/src/components/ui/carousel/carousel-types.ts
new file mode 100644
index 0000000..d9a413f
--- /dev/null
+++ b/src/components/ui/carousel/carousel-types.ts
@@ -0,0 +1,18 @@
+import type { UseEmblaCarouselType } from "embla-carousel-react"
+
+type CarouselApi = UseEmblaCarouselType[1]
+
+type UseCarouselParameters = Parameters<typeof import("embla-carousel-react").default>
+
+type CarouselOptions = UseCarouselParameters[0]
+
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+export type { CarouselApi, CarouselOptions, CarouselPlugin, CarouselProps }
diff --git a/src/components/ui/carousel/carousel.tsx b/src/components/ui/carousel/carousel.tsx
new file mode 100644
index 0000000..faa6a5a
--- /dev/null
+++ b/src/components/ui/carousel/carousel.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import {
+  ComponentProps,
+  KeyboardEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from "react"
+import useEmblaCarousel from "embla-carousel-react"
+
+import { cn } from "@/lib/utils"
+
+import { CarouselContext, type CarouselContextProps } from "./carousel-context"
+import type { CarouselApi, CarouselProps } from "./carousel-types"
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = useState(false)
+  const [canScrollNext, setCanScrollNext] = useState(false)
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={
+        {
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        } as CarouselContextProps
+      }
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+export { Carousel }
diff --git a/src/components/ui/carousel/index.tsx b/src/components/ui/carousel/index.tsx
new file mode 100644
index 0000000..2d03e62
--- /dev/null
+++ b/src/components/ui/carousel/index.tsx
@@ -0,0 +1,6 @@
+export { Carousel } from "./carousel"
+export { CarouselContent } from "./carousel-content"
+export { CarouselItem } from "./carousel-item"
+export { CarouselNext } from "./carousel-next"
+export { CarouselPrevious } from "./carousel-previous"
+export { type CarouselApi } from "./carousel-types"
diff --git a/src/components/ui/carousel/use-carousel.tsx b/src/components/ui/carousel/use-carousel.tsx
new file mode 100644
index 0000000..c9edf29
--- /dev/null
+++ b/src/components/ui/carousel/use-carousel.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { useContext } from "react"
+
+import { CarouselContext } from "./carousel-context"
+
+function useCarousel() {
+  const context = useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+export { useCarousel }
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
deleted file mode 100644
index 101c153..0000000
--- a/src/components/ui/chart.tsx
+++ /dev/null
@@ -1,351 +0,0 @@
-import { ComponentProps, ComponentType, createContext, CSSProperties, ReactNode, useContext, useId, useMemo } from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: ReactNode
-    icon?: ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  ...props
-}: ComponentProps<"div"> & {
-  config: ChartConfig
-  children: ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
-}) {
-  const uniqueId = useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
-}: ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
-  }) {
-  const { config } = useChart()
-
-  const tooltipLabel = useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null
-    }
-
-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
-    const value =
-      !labelKey && typeof label === "string"
-        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
-
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
-    }
-
-    if (!value) {
-      return null
-    }
-
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
-
-  if (!active || !payload?.length) {
-    return null
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot"
-
-  return (
-    <div
-      className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload.map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-          const indicatorColor = color || item.payload.fill || item.color
-
-          return (
-            <div
-              key={item.dataKey}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                indicator === "dot" && "items-center"
-              )}
-            >
-              {formatter && item?.value !== undefined && item.name ? (
-                formatter(item.value, item.name, item, index, item.payload)
-              ) : (
-                <>
-                  {itemConfig?.icon ? (
-                    <itemConfig.icon />
-                  ) : (
-                    !hideIndicator && (
-                      <div
-                        className={cn(
-                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                          {
-                            "h-2.5 w-2.5": indicator === "dot",
-                            "w-1": indicator === "line",
-                            "w-0 border-[1.5px] border-dashed bg-transparent":
-                              indicator === "dashed",
-                            "my-0.5": nestLabel && indicator === "dashed",
-                          }
-                        )}
-                        style={
-                          {
-                            "--color-bg": indicatorColor,
-                            "--color-border": indicatorColor,
-                          } as CSSProperties
-                        }
-                      />
-                    )
-                  )}
-                  <div
-                    className={cn(
-                      "flex flex-1 justify-between leading-none",
-                      nestLabel ? "items-end" : "items-center"
-                    )}
-                  >
-                    <div className="grid gap-1.5">
-                      {nestLabel ? tooltipLabel : null}
-                      <span className="text-muted-foreground">
-                        {itemConfig?.label || item.name}
-                      </span>
-                    </div>
-                    {item.value && (
-                      <span className="text-foreground font-mono font-medium tabular-nums">
-                        {item.value.toLocaleString()}
-                      </span>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-const ChartLegend = RechartsPrimitive.Legend
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-}: ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean
-    nameKey?: string
-  }) {
-  const { config } = useChart()
-
-  if (!payload?.length) {
-    return null
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
-      {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`
-        const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-        return (
-          <div
-            key={item.value}
-            className={cn(
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
-            )}
-          >
-            {itemConfig?.icon && !hideIcon ? (
-              <itemConfig.icon />
-            ) : (
-              <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
-                style={{
-                  backgroundColor: item.color,
-                }}
-              />
-            )}
-            {itemConfig?.label}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
diff --git a/src/components/ui/chart/chart-constants.ts b/src/components/ui/chart/chart-constants.ts
new file mode 100644
index 0000000..3e52ef8
--- /dev/null
+++ b/src/components/ui/chart/chart-constants.ts
@@ -0,0 +1,16 @@
+import { ComponentType, ReactNode } from "react"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: ReactNode
+    icon?: ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+export { THEMES }
diff --git a/src/components/ui/chart/chart-container.tsx b/src/components/ui/chart/chart-container.tsx
new file mode 100644
index 0000000..8ccc548
--- /dev/null
+++ b/src/components/ui/chart/chart-container.tsx
@@ -0,0 +1,45 @@
+import { ComponentProps, useId } from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+import { ChartContext } from "./chart-context"
+import { type ChartConfig } from "./chart-constants"
+import { ChartStyle } from "./chart-style"
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: ComponentProps<"div"> & {
+  config: ChartConfig
+  children: ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+}) {
+  const uniqueId = useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+export { ChartContainer }
diff --git a/src/components/ui/chart/chart-context.ts b/src/components/ui/chart/chart-context.ts
new file mode 100644
index 0000000..3116f8f
--- /dev/null
+++ b/src/components/ui/chart/chart-context.ts
@@ -0,0 +1,12 @@
+import { createContext } from "react"
+
+import type { ChartConfig } from "./chart-constants"
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = createContext<ChartContextProps | null>(null)
+
+export type { ChartContextProps }
+export { ChartContext }
diff --git a/src/components/ui/chart/chart-legend-content.tsx b/src/components/ui/chart/chart-legend-content.tsx
new file mode 100644
index 0000000..ce2a474
--- /dev/null
+++ b/src/components/ui/chart/chart-legend-content.tsx
@@ -0,0 +1,63 @@
+import { ComponentProps } from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+import { getPayloadConfigFromPayload } from "./get-payload-config-from-payload"
+import { useChart } from "./use-chart"
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export { ChartLegendContent }
diff --git a/src/components/ui/chart/chart-legend.tsx b/src/components/ui/chart/chart-legend.tsx
new file mode 100644
index 0000000..b660f2e
--- /dev/null
+++ b/src/components/ui/chart/chart-legend.tsx
@@ -0,0 +1,5 @@
+import * as RechartsPrimitive from "recharts"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+export { ChartLegend }
diff --git a/src/components/ui/chart/chart-style.tsx b/src/components/ui/chart/chart-style.tsx
new file mode 100644
index 0000000..34e0cf5
--- /dev/null
+++ b/src/components/ui/chart/chart-style.tsx
@@ -0,0 +1,36 @@
+import { THEMES, type ChartConfig } from "./chart-constants"
+
+function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+export { ChartStyle }
diff --git a/src/components/ui/chart/chart-tooltip-content.tsx b/src/components/ui/chart/chart-tooltip-content.tsx
new file mode 100644
index 0000000..35174a8
--- /dev/null
+++ b/src/components/ui/chart/chart-tooltip-content.tsx
@@ -0,0 +1,153 @@
+import { ComponentProps, CSSProperties, useMemo } from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+import { getPayloadConfigFromPayload } from "./get-payload-config-from-payload"
+import { useChart } from "./use-chart"
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          }
+                        )}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          } as CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export { ChartTooltipContent }
diff --git a/src/components/ui/chart/chart-tooltip.tsx b/src/components/ui/chart/chart-tooltip.tsx
new file mode 100644
index 0000000..984b767
--- /dev/null
+++ b/src/components/ui/chart/chart-tooltip.tsx
@@ -0,0 +1,5 @@
+import * as RechartsPrimitive from "recharts"
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+export { ChartTooltip }
diff --git a/src/components/ui/chart/get-payload-config-from-payload.ts b/src/components/ui/chart/get-payload-config-from-payload.ts
new file mode 100644
index 0000000..d41e5e1
--- /dev/null
+++ b/src/components/ui/chart/get-payload-config-from-payload.ts
@@ -0,0 +1,42 @@
+import type { ChartConfig } from "./chart-constants"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export { getPayloadConfigFromPayload }
diff --git a/src/components/ui/chart/index.tsx b/src/components/ui/chart/index.tsx
new file mode 100644
index 0000000..e11b0c3
--- /dev/null
+++ b/src/components/ui/chart/index.tsx
@@ -0,0 +1,7 @@
+export { ChartContainer } from "./chart-container"
+export { ChartLegend } from "./chart-legend"
+export { ChartLegendContent } from "./chart-legend-content"
+export { ChartStyle } from "./chart-style"
+export { ChartTooltip } from "./chart-tooltip"
+export { ChartTooltipContent } from "./chart-tooltip-content"
+export { type ChartConfig } from "./chart-constants"
diff --git a/src/components/ui/chart/use-chart.tsx b/src/components/ui/chart/use-chart.tsx
new file mode 100644
index 0000000..a2548ea
--- /dev/null
+++ b/src/components/ui/chart/use-chart.tsx
@@ -0,0 +1,15 @@
+import { useContext } from "react"
+
+import { ChartContext } from "./chart-context"
+
+function useChart() {
+  const context = useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+export { useChart }
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
deleted file mode 100644
index 07eefef..0000000
--- a/src/components/ui/command.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import SearchIcon from "lucide-react/dist/esm/icons/search"
-
-import { cn } from "@/lib/utils"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-
-function Command({
-  className,
-  ...props
-}: ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  ...props
-}: ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function CommandInput({
-  className,
-  ...props
-}: ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CommandList({
-  className,
-  ...props
-}: ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandEmpty({
-  ...props
-}: ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  )
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({
-  className,
-  ...props
-}: ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}
diff --git a/src/components/ui/command/command-dialog.tsx b/src/components/ui/command/command-dialog.tsx
new file mode 100644
index 0000000..e91219a
--- /dev/null
+++ b/src/components/ui/command/command-dialog.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { ComponentProps } from "react"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+import { Command } from "./command"
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { CommandDialog }
diff --git a/src/components/ui/command/command-empty.tsx b/src/components/ui/command/command-empty.tsx
new file mode 100644
index 0000000..a3140c3
--- /dev/null
+++ b/src/components/ui/command/command-empty.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import { ComponentProps } from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+function CommandEmpty({
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+export { CommandEmpty }
diff --git a/src/components/ui/command/command-group.tsx b/src/components/ui/command/command-group.tsx
new file mode 100644
index 0000000..5020f8e
--- /dev/null
+++ b/src/components/ui/command/command-group.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ComponentProps } from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+
+function CommandGroup({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { CommandGroup }
diff --git a/src/components/ui/command/command-input.tsx b/src/components/ui/command/command-input.tsx
new file mode 100644
index 0000000..ecc0bd5
--- /dev/null
+++ b/src/components/ui/command/command-input.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { ComponentProps } from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import SearchIcon from "lucide-react/dist/esm/icons/search"
+
+import { cn } from "@/lib/utils"
+
+function CommandInput({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export { CommandInput }
diff --git a/src/components/ui/command/command-item.tsx b/src/components/ui/command/command-item.tsx
new file mode 100644
index 0000000..a561dc4
--- /dev/null
+++ b/src/components/ui/command/command-item.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ComponentProps } from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+
+function CommandItem({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { CommandItem }
diff --git a/src/components/ui/command/command-list.tsx b/src/components/ui/command/command-list.tsx
new file mode 100644
index 0000000..b9b98d3
--- /dev/null
+++ b/src/components/ui/command/command-list.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ComponentProps } from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+
+function CommandList({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { CommandList }
diff --git a/src/components/ui/command/command-separator.tsx b/src/components/ui/command/command-separator.tsx
new file mode 100644
index 0000000..50397a9
--- /dev/null
+++ b/src/components/ui/command/command-separator.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { ComponentProps } from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+
+function CommandSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+export { CommandSeparator }
diff --git a/src/components/ui/command/command-shortcut.tsx b/src/components/ui/command/command-shortcut.tsx
new file mode 100644
index 0000000..f55832a
--- /dev/null
+++ b/src/components/ui/command/command-shortcut.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+function CommandShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { CommandShortcut }
diff --git a/src/components/ui/command/command.tsx b/src/components/ui/command/command.tsx
new file mode 100644
index 0000000..f4877a8
--- /dev/null
+++ b/src/components/ui/command/command.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ComponentProps } from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+
+function Command({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Command }
diff --git a/src/components/ui/command/index.tsx b/src/components/ui/command/index.tsx
new file mode 100644
index 0000000..390da21
--- /dev/null
+++ b/src/components/ui/command/index.tsx
@@ -0,0 +1,9 @@
+export { Command } from "./command"
+export { CommandDialog } from "./command-dialog"
+export { CommandEmpty } from "./command-empty"
+export { CommandGroup } from "./command-group"
+export { CommandInput } from "./command-input"
+export { CommandItem } from "./command-item"
+export { CommandList } from "./command-list"
+export { CommandSeparator } from "./command-separator"
+export { CommandShortcut } from "./command-shortcut"
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
deleted file mode 100644
index bb17d6e..0000000
--- a/src/components/ui/context-menu.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import CheckIcon from "lucide-react/dist/esm/icons/check";
-import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
-import CircleIcon from "lucide-react/dist/esm/icons/circle"
-
-import { cn } from "@/lib/utils"
-
-function ContextMenu({
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
-}
-
-function ContextMenuTrigger({
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  )
-}
-
-function ContextMenuGroup({
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
-}
-
-function ContextMenuPortal({
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
-}
-
-function ContextMenuSub({
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
-}
-
-function ContextMenuRadioGroup({
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      data-slot="context-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuPrimitive.SubTrigger>
-  )
-}
-
-function ContextMenuSubContent({
-  className,
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-  return (
-    <ContextMenuPrimitive.SubContent
-      data-slot="context-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuContent({
-  className,
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-content"
-        className={cn(
-          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  )
-}
-
-function ContextMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-slot="context-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
-  return (
-    <ContextMenuPrimitive.CheckboxItem
-      data-slot="context-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  )
-}
-
-function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
-  return (
-    <ContextMenuPrimitive.RadioItem
-      data-slot="context-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  )
-}
-
-function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.Label
-      data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuSeparator({
-  className,
-  ...props
-}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {
-  return (
-    <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuShortcut({
-  className,
-  ...props
-}: ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="context-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}
diff --git a/src/components/ui/context-menu/context-menu-checkbox-item.tsx b/src/components/ui/context-menu/context-menu-checkbox-item.tsx
new file mode 100644
index 0000000..569bece
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-checkbox-item.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import CheckIcon from "lucide-react/dist/esm/icons/check"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+export { ContextMenuCheckboxItem }
diff --git a/src/components/ui/context-menu/context-menu-content.tsx b/src/components/ui/context-menu/context-menu-content.tsx
new file mode 100644
index 0000000..d0ac726
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-content.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenuContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+export { ContextMenuContent }
diff --git a/src/components/ui/context-menu/context-menu-group.tsx b/src/components/ui/context-menu/context-menu-group.tsx
new file mode 100644
index 0000000..f219ce5
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-group.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+function ContextMenuGroup({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+export { ContextMenuGroup }
diff --git a/src/components/ui/context-menu/context-menu-item.tsx b/src/components/ui/context-menu/context-menu-item.tsx
new file mode 100644
index 0000000..703f52c
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-item.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { ContextMenuItem }
diff --git a/src/components/ui/context-menu/context-menu-label.tsx b/src/components/ui/context-menu/context-menu-label.tsx
new file mode 100644
index 0000000..9ec0249
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-label.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { ContextMenuLabel }
diff --git a/src/components/ui/context-menu/context-menu-portal.tsx b/src/components/ui/context-menu/context-menu-portal.tsx
new file mode 100644
index 0000000..a4e425e
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-portal.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+function ContextMenuPortal({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+export { ContextMenuPortal }
diff --git a/src/components/ui/context-menu/context-menu-radio-group.tsx b/src/components/ui/context-menu/context-menu-radio-group.tsx
new file mode 100644
index 0000000..2bcfd3d
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-radio-group.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+function ContextMenuRadioGroup({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+export { ContextMenuRadioGroup }
diff --git a/src/components/ui/context-menu/context-menu-radio-item.tsx b/src/components/ui/context-menu/context-menu-radio-item.tsx
new file mode 100644
index 0000000..8e3cd54
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-radio-item.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import CircleIcon from "lucide-react/dist/esm/icons/circle"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+export { ContextMenuRadioItem }
diff --git a/src/components/ui/context-menu/context-menu-separator.tsx b/src/components/ui/context-menu/context-menu-separator.tsx
new file mode 100644
index 0000000..6de599b
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-separator.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+export { ContextMenuSeparator }
diff --git a/src/components/ui/context-menu/context-menu-shortcut.tsx b/src/components/ui/context-menu/context-menu-shortcut.tsx
new file mode 100644
index 0000000..1abb16e
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-shortcut.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { ContextMenuShortcut }
diff --git a/src/components/ui/context-menu/context-menu-sub-content.tsx b/src/components/ui/context-menu/context-menu-sub-content.tsx
new file mode 100644
index 0000000..56ebe7f
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-sub-content.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { ContextMenuSubContent }
diff --git a/src/components/ui/context-menu/context-menu-sub-trigger.tsx b/src/components/ui/context-menu/context-menu-sub-trigger.tsx
new file mode 100644
index 0000000..af6eb0d
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-sub-trigger.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+export { ContextMenuSubTrigger }
diff --git a/src/components/ui/context-menu/context-menu-sub.tsx b/src/components/ui/context-menu/context-menu-sub.tsx
new file mode 100644
index 0000000..bfe00c9
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-sub.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+function ContextMenuSub({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+export { ContextMenuSub }
diff --git a/src/components/ui/context-menu/context-menu-trigger.tsx b/src/components/ui/context-menu/context-menu-trigger.tsx
new file mode 100644
index 0000000..b99ae18
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu-trigger.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+function ContextMenuTrigger({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+export { ContextMenuTrigger }
diff --git a/src/components/ui/context-menu/context-menu.tsx b/src/components/ui/context-menu/context-menu.tsx
new file mode 100644
index 0000000..201e952
--- /dev/null
+++ b/src/components/ui/context-menu/context-menu.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+
+function ContextMenu({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+export { ContextMenu }
diff --git a/src/components/ui/context-menu/index.tsx b/src/components/ui/context-menu/index.tsx
new file mode 100644
index 0000000..76a0fdf
--- /dev/null
+++ b/src/components/ui/context-menu/index.tsx
@@ -0,0 +1,15 @@
+export { ContextMenu } from "./context-menu"
+export { ContextMenuCheckboxItem } from "./context-menu-checkbox-item"
+export { ContextMenuContent } from "./context-menu-content"
+export { ContextMenuGroup } from "./context-menu-group"
+export { ContextMenuItem } from "./context-menu-item"
+export { ContextMenuLabel } from "./context-menu-label"
+export { ContextMenuPortal } from "./context-menu-portal"
+export { ContextMenuRadioGroup } from "./context-menu-radio-group"
+export { ContextMenuRadioItem } from "./context-menu-radio-item"
+export { ContextMenuSeparator } from "./context-menu-separator"
+export { ContextMenuShortcut } from "./context-menu-shortcut"
+export { ContextMenuSub } from "./context-menu-sub"
+export { ContextMenuSubContent } from "./context-menu-sub-content"
+export { ContextMenuSubTrigger } from "./context-menu-sub-trigger"
+export { ContextMenuTrigger } from "./context-menu-trigger"
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
deleted file mode 100644
index a757339..0000000
--- a/src/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-"use client"
-
-import { ComponentProps } from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import CheckIcon from "lucide-react/dist/esm/icons/check"
-import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
-import CircleIcon from "lucide-react/dist/esm/icons/circle"
-
-import { cn } from "@/lib/utils"
-
-function DropdownMenu({
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.tsx b/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.tsx
new file mode 100644
index 0000000..77d27ca
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import CheckIcon from "lucide-react/dist/esm/icons/check"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+export { DropdownMenuCheckboxItem }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-content.tsx b/src/components/ui/dropdown-menu/dropdown-menu-content.tsx
new file mode 100644
index 0000000..33d03a0
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-content.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+export { DropdownMenuContent }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-group.tsx b/src/components/ui/dropdown-menu/dropdown-menu-group.tsx
new file mode 100644
index 0000000..2b7aaa0
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-group.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+function DropdownMenuGroup({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+export { DropdownMenuGroup }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-item.tsx b/src/components/ui/dropdown-menu/dropdown-menu-item.tsx
new file mode 100644
index 0000000..f521995
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-item.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { DropdownMenuItem }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-label.tsx b/src/components/ui/dropdown-menu/dropdown-menu-label.tsx
new file mode 100644
index 0000000..ff5e1d5
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-label.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { DropdownMenuLabel }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-portal.tsx b/src/components/ui/dropdown-menu/dropdown-menu-portal.tsx
new file mode 100644
index 0000000..3c35204
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-portal.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+function DropdownMenuPortal({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+export { DropdownMenuPortal }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-radio-group.tsx b/src/components/ui/dropdown-menu/dropdown-menu-radio-group.tsx
new file mode 100644
index 0000000..4c3a4d4
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-radio-group.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+function DropdownMenuRadioGroup({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+export { DropdownMenuRadioGroup }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-radio-item.tsx b/src/components/ui/dropdown-menu/dropdown-menu-radio-item.tsx
new file mode 100644
index 0000000..1c186e9
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-radio-item.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import CircleIcon from "lucide-react/dist/esm/icons/circle"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+export { DropdownMenuRadioItem }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-separator.tsx b/src/components/ui/dropdown-menu/dropdown-menu-separator.tsx
new file mode 100644
index 0000000..b9c1afb
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-separator.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+export { DropdownMenuSeparator }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-shortcut.tsx b/src/components/ui/dropdown-menu/dropdown-menu-shortcut.tsx
new file mode 100644
index 0000000..2a72668
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-shortcut.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { DropdownMenuShortcut }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-sub-content.tsx b/src/components/ui/dropdown-menu/dropdown-menu-sub-content.tsx
new file mode 100644
index 0000000..176dfa5
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-sub-content.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { DropdownMenuSubContent }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.tsx b/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.tsx
new file mode 100644
index 0000000..7405e1f
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+export { DropdownMenuSubTrigger }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-sub.tsx b/src/components/ui/dropdown-menu/dropdown-menu-sub.tsx
new file mode 100644
index 0000000..1d7f6f1
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-sub.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+function DropdownMenuSub({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+export { DropdownMenuSub }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-trigger.tsx b/src/components/ui/dropdown-menu/dropdown-menu-trigger.tsx
new file mode 100644
index 0000000..f3ab869
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu-trigger.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+function DropdownMenuTrigger({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+export { DropdownMenuTrigger }
diff --git a/src/components/ui/dropdown-menu/dropdown-menu.tsx b/src/components/ui/dropdown-menu/dropdown-menu.tsx
new file mode 100644
index 0000000..915fba9
--- /dev/null
+++ b/src/components/ui/dropdown-menu/dropdown-menu.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+function DropdownMenu({
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+export { DropdownMenu }
diff --git a/src/components/ui/dropdown-menu/index.tsx b/src/components/ui/dropdown-menu/index.tsx
new file mode 100644
index 0000000..dffedb2
--- /dev/null
+++ b/src/components/ui/dropdown-menu/index.tsx
@@ -0,0 +1,15 @@
+export { DropdownMenu } from "./dropdown-menu"
+export { DropdownMenuCheckboxItem } from "./dropdown-menu-checkbox-item"
+export { DropdownMenuContent } from "./dropdown-menu-content"
+export { DropdownMenuGroup } from "./dropdown-menu-group"
+export { DropdownMenuItem } from "./dropdown-menu-item"
+export { DropdownMenuLabel } from "./dropdown-menu-label"
+export { DropdownMenuPortal } from "./dropdown-menu-portal"
+export { DropdownMenuRadioGroup } from "./dropdown-menu-radio-group"
+export { DropdownMenuRadioItem } from "./dropdown-menu-radio-item"
+export { DropdownMenuSeparator } from "./dropdown-menu-separator"
+export { DropdownMenuShortcut } from "./dropdown-menu-shortcut"
+export { DropdownMenuSub } from "./dropdown-menu-sub"
+export { DropdownMenuSubContent } from "./dropdown-menu-sub-content"
+export { DropdownMenuSubTrigger } from "./dropdown-menu-sub-trigger"
+export { DropdownMenuTrigger } from "./dropdown-menu-trigger"
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
deleted file mode 100644
index a4b74ad..0000000
--- a/src/components/ui/form.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { ComponentProps, createContext, useContext, useId } from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName
-}
-
-const FormFieldContext = createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = useContext(FormFieldContext)
-  const itemContext = useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-function FormItem({ className, ...props }: ComponentProps<"div">) {
-  const id = useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  )
-}
-
-function FormLabel({
-  className,
-  ...props
-}: ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-}
-
-function FormControl({ ...props }: ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-}
-
-function FormDescription({ className, ...props }: ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function FormMessage({ className, ...props }: ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-}
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}
diff --git a/src/components/ui/form/form-control.tsx b/src/components/ui/form/form-control.tsx
new file mode 100644
index 0000000..afa516e
--- /dev/null
+++ b/src/components/ui/form/form-control.tsx
@@ -0,0 +1,24 @@
+import { ComponentProps } from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { useFormField } from "./use-form-field"
+
+function FormControl({ ...props }: ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+export { FormControl }
diff --git a/src/components/ui/form/form-description.tsx b/src/components/ui/form/form-description.tsx
new file mode 100644
index 0000000..56671bc
--- /dev/null
+++ b/src/components/ui/form/form-description.tsx
@@ -0,0 +1,20 @@
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { useFormField } from "./use-form-field"
+
+function FormDescription({ className, ...props }: ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export { FormDescription }
diff --git a/src/components/ui/form/form-field-context.ts b/src/components/ui/form/form-field-context.ts
new file mode 100644
index 0000000..2f8abb4
--- /dev/null
+++ b/src/components/ui/form/form-field-context.ts
@@ -0,0 +1,16 @@
+import { createContext } from "react"
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+export type { FormFieldContextValue }
+export { FormFieldContext }
diff --git a/src/components/ui/form/form-field.tsx b/src/components/ui/form/form-field.tsx
new file mode 100644
index 0000000..cc9895b
--- /dev/null
+++ b/src/components/ui/form/form-field.tsx
@@ -0,0 +1,23 @@
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { FormFieldContext } from "./form-field-context"
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+export { FormField }
diff --git a/src/components/ui/form/form-item-context.ts b/src/components/ui/form/form-item-context.ts
new file mode 100644
index 0000000..7a4955f
--- /dev/null
+++ b/src/components/ui/form/form-item-context.ts
@@ -0,0 +1,12 @@
+import { createContext } from "react"
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+export type { FormItemContextValue }
+export { FormItemContext }
diff --git a/src/components/ui/form/form-item.tsx b/src/components/ui/form/form-item.tsx
new file mode 100644
index 0000000..5a3570a
--- /dev/null
+++ b/src/components/ui/form/form-item.tsx
@@ -0,0 +1,21 @@
+import { ComponentProps, useId } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { FormItemContext } from "./form-item-context"
+
+function FormItem({ className, ...props }: ComponentProps<"div">) {
+  const id = useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+export { FormItem }
diff --git a/src/components/ui/form/form-label.tsx b/src/components/ui/form/form-label.tsx
new file mode 100644
index 0000000..2187e3b
--- /dev/null
+++ b/src/components/ui/form/form-label.tsx
@@ -0,0 +1,26 @@
+import { ComponentProps } from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+import { useFormField } from "./use-form-field"
+
+function FormLabel({
+  className,
+  ...props
+}: ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+export { FormLabel }
diff --git a/src/components/ui/form/form-message.tsx b/src/components/ui/form/form-message.tsx
new file mode 100644
index 0000000..381d837
--- /dev/null
+++ b/src/components/ui/form/form-message.tsx
@@ -0,0 +1,27 @@
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { useFormField } from "./use-form-field"
+
+function FormMessage({ className, ...props }: ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export { FormMessage }
diff --git a/src/components/ui/form/form.tsx b/src/components/ui/form/form.tsx
new file mode 100644
index 0000000..eea3f76
--- /dev/null
+++ b/src/components/ui/form/form.tsx
@@ -0,0 +1,5 @@
+import { FormProvider } from "react-hook-form"
+
+const Form = FormProvider
+
+export { Form }
diff --git a/src/components/ui/form/index.tsx b/src/components/ui/form/index.tsx
new file mode 100644
index 0000000..0fccc58
--- /dev/null
+++ b/src/components/ui/form/index.tsx
@@ -0,0 +1,8 @@
+export { Form } from "./form"
+export { FormControl } from "./form-control"
+export { FormDescription } from "./form-description"
+export { FormField } from "./form-field"
+export { FormItem } from "./form-item"
+export { FormLabel } from "./form-label"
+export { FormMessage } from "./form-message"
+export { useFormField } from "./use-form-field"
diff --git a/src/components/ui/form/use-form-field.tsx b/src/components/ui/form/use-form-field.tsx
new file mode 100644
index 0000000..dbbf85e
--- /dev/null
+++ b/src/components/ui/form/use-form-field.tsx
@@ -0,0 +1,30 @@
+import { useContext } from "react"
+import { useFormContext, useFormState } from "react-hook-form"
+
+import { FormFieldContext } from "./form-field-context"
+import { FormItemContext } from "./form-item-context"
+
+const useFormField = () => {
+  const fieldContext = useContext(FormFieldContext)
+  const itemContext = useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+export { useFormField }
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
deleted file mode 100644
index 951c0fc..0000000
--- a/src/components/ui/menubar.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-import { ComponentProps } from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import CheckIcon from "lucide-react/dist/esm/icons/check"
-import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
-import CircleIcon from "lucide-react/dist/esm/icons/circle"
-
-import { cn } from "@/lib/utils"
-
-function Menubar({
-  className,
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.Root>) {
-  return (
-    <MenubarPrimitive.Root
-      data-slot="menubar"
-      className={cn(
-        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarMenu({
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
-}
-
-function MenubarGroup({
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
-}
-
-function MenubarPortal({
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
-}
-
-function MenubarRadioGroup({
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return (
-    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  )
-}
-
-function MenubarTrigger({
-  className,
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  return (
-    <MenubarPrimitive.Trigger
-      data-slot="menubar-trigger"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarContent({
-  className,
-  align = "start",
-  alignOffset = -4,
-  sideOffset = 8,
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.Content>) {
-  return (
-    <MenubarPortal>
-      <MenubarPrimitive.Content
-        data-slot="menubar-content"
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPortal>
-  )
-}
-
-function MenubarItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <MenubarPrimitive.Item
-      data-slot="menubar-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
-  return (
-    <MenubarPrimitive.CheckboxItem
-      data-slot="menubar-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.CheckboxItem>
-  )
-}
-
-function MenubarRadioItem({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  return (
-    <MenubarPrimitive.RadioItem
-      data-slot="menubar-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.RadioItem>
-  )
-}
-
-function MenubarLabel({
-  className,
-  inset,
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <MenubarPrimitive.Label
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarSeparator({
-  className,
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.Separator>) {
-  return (
-    <MenubarPrimitive.Separator
-      data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function MenubarShortcut({
-  className,
-  ...props
-}: ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="menubar-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarSub({
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
-}
-
-function MenubarSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <MenubarPrimitive.SubTrigger
-      data-slot="menubar-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
-    </MenubarPrimitive.SubTrigger>
-  )
-}
-
-function MenubarSubContent({
-  className,
-  ...props
-}: ComponentProps<typeof MenubarPrimitive.SubContent>) {
-  return (
-    <MenubarPrimitive.SubContent
-      data-slot="menubar-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Menubar,
-  MenubarPortal,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarGroup,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarItem,
-  MenubarShortcut,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-}
diff --git a/src/components/ui/menubar/index.tsx b/src/components/ui/menubar/index.tsx
new file mode 100644
index 0000000..201e471
--- /dev/null
+++ b/src/components/ui/menubar/index.tsx
@@ -0,0 +1,16 @@
+export { Menubar } from "./menubar"
+export { MenubarCheckboxItem } from "./menubar-checkbox-item"
+export { MenubarContent } from "./menubar-content"
+export { MenubarGroup } from "./menubar-group"
+export { MenubarItem } from "./menubar-item"
+export { MenubarLabel } from "./menubar-label"
+export { MenubarMenu } from "./menubar-menu"
+export { MenubarPortal } from "./menubar-portal"
+export { MenubarRadioGroup } from "./menubar-radio-group"
+export { MenubarRadioItem } from "./menubar-radio-item"
+export { MenubarSeparator } from "./menubar-separator"
+export { MenubarShortcut } from "./menubar-shortcut"
+export { MenubarSub } from "./menubar-sub"
+export { MenubarSubContent } from "./menubar-sub-content"
+export { MenubarSubTrigger } from "./menubar-sub-trigger"
+export { MenubarTrigger } from "./menubar-trigger"
diff --git a/src/components/ui/menubar/menubar-checkbox-item.tsx b/src/components/ui/menubar/menubar-checkbox-item.tsx
new file mode 100644
index 0000000..fdc0837
--- /dev/null
+++ b/src/components/ui/menubar/menubar-checkbox-item.tsx
@@ -0,0 +1,33 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import CheckIcon from "lucide-react/dist/esm/icons/check"
+
+import { cn } from "@/lib/utils"
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+export { MenubarCheckboxItem }
diff --git a/src/components/ui/menubar/menubar-content.tsx b/src/components/ui/menubar/menubar-content.tsx
new file mode 100644
index 0000000..2c85533
--- /dev/null
+++ b/src/components/ui/menubar/menubar-content.tsx
@@ -0,0 +1,32 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+import { cn } from "@/lib/utils"
+
+import { MenubarPortal } from "./menubar-portal"
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+export { MenubarContent }
diff --git a/src/components/ui/menubar/menubar-group.tsx b/src/components/ui/menubar/menubar-group.tsx
new file mode 100644
index 0000000..aeb702a
--- /dev/null
+++ b/src/components/ui/menubar/menubar-group.tsx
@@ -0,0 +1,10 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+function MenubarGroup({
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+export { MenubarGroup }
diff --git a/src/components/ui/menubar/menubar-item.tsx b/src/components/ui/menubar/menubar-item.tsx
new file mode 100644
index 0000000..746b298
--- /dev/null
+++ b/src/components/ui/menubar/menubar-item.tsx
@@ -0,0 +1,29 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+import { cn } from "@/lib/utils"
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { MenubarItem }
diff --git a/src/components/ui/menubar/menubar-label.tsx b/src/components/ui/menubar/menubar-label.tsx
new file mode 100644
index 0000000..8c10a63
--- /dev/null
+++ b/src/components/ui/menubar/menubar-label.tsx
@@ -0,0 +1,26 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+import { cn } from "@/lib/utils"
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { MenubarLabel }
diff --git a/src/components/ui/menubar/menubar-menu.tsx b/src/components/ui/menubar/menubar-menu.tsx
new file mode 100644
index 0000000..1cb1e0e
--- /dev/null
+++ b/src/components/ui/menubar/menubar-menu.tsx
@@ -0,0 +1,10 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+function MenubarMenu({
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+export { MenubarMenu }
diff --git a/src/components/ui/menubar/menubar-portal.tsx b/src/components/ui/menubar/menubar-portal.tsx
new file mode 100644
index 0000000..3da8efb
--- /dev/null
+++ b/src/components/ui/menubar/menubar-portal.tsx
@@ -0,0 +1,10 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+function MenubarPortal({
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+export { MenubarPortal }
diff --git a/src/components/ui/menubar/menubar-radio-group.tsx b/src/components/ui/menubar/menubar-radio-group.tsx
new file mode 100644
index 0000000..c493e15
--- /dev/null
+++ b/src/components/ui/menubar/menubar-radio-group.tsx
@@ -0,0 +1,12 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+function MenubarRadioGroup({
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+export { MenubarRadioGroup }
diff --git a/src/components/ui/menubar/menubar-radio-item.tsx b/src/components/ui/menubar/menubar-radio-item.tsx
new file mode 100644
index 0000000..04aaabc
--- /dev/null
+++ b/src/components/ui/menubar/menubar-radio-item.tsx
@@ -0,0 +1,31 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import CircleIcon from "lucide-react/dist/esm/icons/circle"
+
+import { cn } from "@/lib/utils"
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+export { MenubarRadioItem }
diff --git a/src/components/ui/menubar/menubar-separator.tsx b/src/components/ui/menubar/menubar-separator.tsx
new file mode 100644
index 0000000..000a92d
--- /dev/null
+++ b/src/components/ui/menubar/menubar-separator.tsx
@@ -0,0 +1,19 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+import { cn } from "@/lib/utils"
+
+function MenubarSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+export { MenubarSeparator }
diff --git a/src/components/ui/menubar/menubar-shortcut.tsx b/src/components/ui/menubar/menubar-shortcut.tsx
new file mode 100644
index 0000000..3cb6586
--- /dev/null
+++ b/src/components/ui/menubar/menubar-shortcut.tsx
@@ -0,0 +1,21 @@
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+function MenubarShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { MenubarShortcut }
diff --git a/src/components/ui/menubar/menubar-sub-content.tsx b/src/components/ui/menubar/menubar-sub-content.tsx
new file mode 100644
index 0000000..c595e45
--- /dev/null
+++ b/src/components/ui/menubar/menubar-sub-content.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+import { cn } from "@/lib/utils"
+
+function MenubarSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { MenubarSubContent }
diff --git a/src/components/ui/menubar/menubar-sub-trigger.tsx b/src/components/ui/menubar/menubar-sub-trigger.tsx
new file mode 100644
index 0000000..f2b8c4e
--- /dev/null
+++ b/src/components/ui/menubar/menubar-sub-trigger.tsx
@@ -0,0 +1,31 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
+
+import { cn } from "@/lib/utils"
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+export { MenubarSubTrigger }
diff --git a/src/components/ui/menubar/menubar-sub.tsx b/src/components/ui/menubar/menubar-sub.tsx
new file mode 100644
index 0000000..97f2551
--- /dev/null
+++ b/src/components/ui/menubar/menubar-sub.tsx
@@ -0,0 +1,10 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+function MenubarSub({
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+export { MenubarSub }
diff --git a/src/components/ui/menubar/menubar-trigger.tsx b/src/components/ui/menubar/menubar-trigger.tsx
new file mode 100644
index 0000000..4f2a147
--- /dev/null
+++ b/src/components/ui/menubar/menubar-trigger.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+import { cn } from "@/lib/utils"
+
+function MenubarTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { MenubarTrigger }
diff --git a/src/components/ui/menubar/menubar.tsx b/src/components/ui/menubar/menubar.tsx
new file mode 100644
index 0000000..2749d4a
--- /dev/null
+++ b/src/components/ui/menubar/menubar.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+import { cn } from "@/lib/utils"
+
+function Menubar({
+  className,
+  ...props
+}: ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Menubar }
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
deleted file mode 100644
index 559f29e..0000000
--- a/src/components/ui/navigation-menu.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { ComponentProps } from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
-
-import { cn } from "@/lib/utils"
-
-function NavigationMenu({
-  className,
-  children,
-  viewport = true,
-  ...props
-}: ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean
-}) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      data-viewport={viewport}
-      className={cn(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {viewport && <NavigationMenuViewport />}
-    </NavigationMenuPrimitive.Root>
-  )
-}
-
-function NavigationMenuList({
-  className,
-  ...props
-}: ComponentProps<typeof NavigationMenuPrimitive.List>) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuItem({
-  className,
-  ...props
-}: ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn("relative", className)}
-      {...props}
-    />
-  )
-}
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
-)
-
-function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), "group", className)}
-      {...props}
-    >
-      {children}{" "}
-      <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-        aria-hidden="true"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  )
-}
-
-function NavigationMenuContent({
-  className,
-  ...props
-}: ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuViewport({
-  className,
-  ...props
-}: ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
-  return (
-    <div
-      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center"
-      )}
-    >
-      <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
-        className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function NavigationMenuLink({
-  className,
-  ...props
-}: ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-  return (
-    <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
-      className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className
-      )}
-      {...props}
-    >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-    </NavigationMenuPrimitive.Indicator>
-  )
-}
-
-export {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-}
diff --git a/src/components/ui/navigation-menu/index.tsx b/src/components/ui/navigation-menu/index.tsx
new file mode 100644
index 0000000..5e4a67b
--- /dev/null
+++ b/src/components/ui/navigation-menu/index.tsx
@@ -0,0 +1,9 @@
+export { NavigationMenu } from "./navigation-menu"
+export { NavigationMenuContent } from "./navigation-menu-content"
+export { NavigationMenuIndicator } from "./navigation-menu-indicator"
+export { NavigationMenuItem } from "./navigation-menu-item"
+export { NavigationMenuLink } from "./navigation-menu-link"
+export { NavigationMenuList } from "./navigation-menu-list"
+export { NavigationMenuTrigger } from "./navigation-menu-trigger"
+export { NavigationMenuViewport } from "./navigation-menu-viewport"
+export { navigationMenuTriggerStyle } from "./navigation-menu-trigger-style"
diff --git a/src/components/ui/navigation-menu/navigation-menu-content.tsx b/src/components/ui/navigation-menu/navigation-menu-content.tsx
new file mode 100644
index 0000000..5cd488e
--- /dev/null
+++ b/src/components/ui/navigation-menu/navigation-menu-content.tsx
@@ -0,0 +1,23 @@
+import { ComponentProps } from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { NavigationMenuContent }
diff --git a/src/components/ui/navigation-menu/navigation-menu-indicator.tsx b/src/components/ui/navigation-menu/navigation-menu-indicator.tsx
new file mode 100644
index 0000000..73387ff
--- /dev/null
+++ b/src/components/ui/navigation-menu/navigation-menu-indicator.tsx
@@ -0,0 +1,24 @@
+import { ComponentProps } from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export { NavigationMenuIndicator }
diff --git a/src/components/ui/navigation-menu/navigation-menu-item.tsx b/src/components/ui/navigation-menu/navigation-menu-item.tsx
new file mode 100644
index 0000000..82d82f4
--- /dev/null
+++ b/src/components/ui/navigation-menu/navigation-menu-item.tsx
@@ -0,0 +1,19 @@
+import { ComponentProps } from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+export { NavigationMenuItem }
diff --git a/src/components/ui/navigation-menu/navigation-menu-link.tsx b/src/components/ui/navigation-menu/navigation-menu-link.tsx
new file mode 100644
index 0000000..57cc780
--- /dev/null
+++ b/src/components/ui/navigation-menu/navigation-menu-link.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { NavigationMenuLink }
diff --git a/src/components/ui/navigation-menu/navigation-menu-list.tsx b/src/components/ui/navigation-menu/navigation-menu-list.tsx
new file mode 100644
index 0000000..f41073d
--- /dev/null
+++ b/src/components/ui/navigation-menu/navigation-menu-list.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenuList({
+  className,
+  ...props
+}: ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { NavigationMenuList }
diff --git a/src/components/ui/navigation-menu/navigation-menu-trigger-style.ts b/src/components/ui/navigation-menu/navigation-menu-trigger-style.ts
new file mode 100644
index 0000000..3866801
--- /dev/null
+++ b/src/components/ui/navigation-menu/navigation-menu-trigger-style.ts
@@ -0,0 +1,7 @@
+import { cva } from "class-variance-authority"
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+)
+
+export { navigationMenuTriggerStyle }
diff --git a/src/components/ui/navigation-menu/navigation-menu-trigger.tsx b/src/components/ui/navigation-menu/navigation-menu-trigger.tsx
new file mode 100644
index 0000000..7fbb995
--- /dev/null
+++ b/src/components/ui/navigation-menu/navigation-menu-trigger.tsx
@@ -0,0 +1,29 @@
+import { ComponentProps } from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
+
+import { cn } from "@/lib/utils"
+
+import { navigationMenuTriggerStyle } from "./navigation-menu-trigger-style"
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+export { NavigationMenuTrigger }
diff --git a/src/components/ui/navigation-menu/navigation-menu-viewport.tsx b/src/components/ui/navigation-menu/navigation-menu-viewport.tsx
new file mode 100644
index 0000000..e859df6
--- /dev/null
+++ b/src/components/ui/navigation-menu/navigation-menu-viewport.tsx
@@ -0,0 +1,28 @@
+import { ComponentProps } from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export { NavigationMenuViewport }
diff --git a/src/components/ui/navigation-menu/navigation-menu.tsx b/src/components/ui/navigation-menu/navigation-menu.tsx
new file mode 100644
index 0000000..a839cb3
--- /dev/null
+++ b/src/components/ui/navigation-menu/navigation-menu.tsx
@@ -0,0 +1,32 @@
+import { ComponentProps } from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+
+import { cn } from "@/lib/utils"
+
+import { NavigationMenuViewport } from "./navigation-menu-viewport"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+export { NavigationMenu }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
deleted file mode 100644
index 0fb0d44..0000000
--- a/src/components/ui/select.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { ComponentProps } from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import CheckIcon from "lucide-react/dist/esm/icons/check"
-import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
-import ChevronUpIcon from "lucide-react/dist/esm/icons/chevron-up"
-
-import { cn } from "@/lib/utils"
-
-function Select({
-  ...props
-}: ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
-
-function SelectGroup({
-  ...props
-}: ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
-}
-
-function SelectValue({
-  ...props
-}: ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}: ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
new file mode 100644
index 0000000..bbfb743
--- /dev/null
+++ b/src/components/ui/select/index.tsx
@@ -0,0 +1,10 @@
+export { Select } from "./select"
+export { SelectContent } from "./select-content"
+export { SelectGroup } from "./select-group"
+export { SelectItem } from "./select-item"
+export { SelectLabel } from "./select-label"
+export { SelectScrollDownButton } from "./select-scroll-down-button"
+export { SelectScrollUpButton } from "./select-scroll-up-button"
+export { SelectSeparator } from "./select-separator"
+export { SelectTrigger } from "./select-trigger"
+export { SelectValue } from "./select-value"
diff --git a/src/components/ui/select/select-content.tsx b/src/components/ui/select/select-content.tsx
new file mode 100644
index 0000000..e7f38d9
--- /dev/null
+++ b/src/components/ui/select/select-content.tsx
@@ -0,0 +1,44 @@
+import { ComponentProps } from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+import { cn } from "@/lib/utils"
+
+import { SelectScrollDownButton } from "./select-scroll-down-button"
+import { SelectScrollUpButton } from "./select-scroll-up-button"
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+export { SelectContent }
diff --git a/src/components/ui/select/select-group.tsx b/src/components/ui/select/select-group.tsx
new file mode 100644
index 0000000..b2785f2
--- /dev/null
+++ b/src/components/ui/select/select-group.tsx
@@ -0,0 +1,10 @@
+import { ComponentProps } from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+function SelectGroup({
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+export { SelectGroup }
diff --git a/src/components/ui/select/select-item.tsx b/src/components/ui/select/select-item.tsx
new file mode 100644
index 0000000..13d3825
--- /dev/null
+++ b/src/components/ui/select/select-item.tsx
@@ -0,0 +1,31 @@
+import { ComponentProps } from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import CheckIcon from "lucide-react/dist/esm/icons/check"
+
+import { cn } from "@/lib/utils"
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+export { SelectItem }
diff --git a/src/components/ui/select/select-label.tsx b/src/components/ui/select/select-label.tsx
new file mode 100644
index 0000000..7020e25
--- /dev/null
+++ b/src/components/ui/select/select-label.tsx
@@ -0,0 +1,19 @@
+import { ComponentProps } from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+import { cn } from "@/lib/utils"
+
+function SelectLabel({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+export { SelectLabel }
diff --git a/src/components/ui/select/select-scroll-down-button.tsx b/src/components/ui/select/select-scroll-down-button.tsx
new file mode 100644
index 0000000..6eb3b97
--- /dev/null
+++ b/src/components/ui/select/select-scroll-down-button.tsx
@@ -0,0 +1,25 @@
+import { ComponentProps } from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
+
+import { cn } from "@/lib/utils"
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export { SelectScrollDownButton }
diff --git a/src/components/ui/select/select-scroll-up-button.tsx b/src/components/ui/select/select-scroll-up-button.tsx
new file mode 100644
index 0000000..337f72f
--- /dev/null
+++ b/src/components/ui/select/select-scroll-up-button.tsx
@@ -0,0 +1,25 @@
+import { ComponentProps } from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import ChevronUpIcon from "lucide-react/dist/esm/icons/chevron-up"
+
+import { cn } from "@/lib/utils"
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+export { SelectScrollUpButton }
diff --git a/src/components/ui/select/select-separator.tsx b/src/components/ui/select/select-separator.tsx
new file mode 100644
index 0000000..c93aa70
--- /dev/null
+++ b/src/components/ui/select/select-separator.tsx
@@ -0,0 +1,19 @@
+import { ComponentProps } from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+import { cn } from "@/lib/utils"
+
+function SelectSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+export { SelectSeparator }
diff --git a/src/components/ui/select/select-trigger.tsx b/src/components/ui/select/select-trigger.tsx
new file mode 100644
index 0000000..e195b9b
--- /dev/null
+++ b/src/components/ui/select/select-trigger.tsx
@@ -0,0 +1,33 @@
+import { ComponentProps } from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
+
+import { cn } from "@/lib/utils"
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+export { SelectTrigger }
diff --git a/src/components/ui/select/select-value.tsx b/src/components/ui/select/select-value.tsx
new file mode 100644
index 0000000..8cf7bf7
--- /dev/null
+++ b/src/components/ui/select/select-value.tsx
@@ -0,0 +1,10 @@
+import { ComponentProps } from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+function SelectValue({
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+export { SelectValue }
diff --git a/src/components/ui/select/select.tsx b/src/components/ui/select/select.tsx
new file mode 100644
index 0000000..79a37fc
--- /dev/null
+++ b/src/components/ui/select/select.tsx
@@ -0,0 +1,10 @@
+import { ComponentProps } from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+function Select({
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+export { Select }