diff --git a/packages/demo/src/components/demo/dropdown-menu.tsx b/packages/demo/src/components/demo/dropdown-menu.tsx
index 01b14d7d..2bf47e5c 100644
--- a/packages/demo/src/components/demo/dropdown-menu.tsx
+++ b/packages/demo/src/components/demo/dropdown-menu.tsx
@@ -47,7 +47,7 @@ export const DropdownMenuDemo = ({
           <DropdownMenuContent align="start">
             <DropdownMenuItem>Profile</DropdownMenuItem>
             <DropdownMenuItem>Settings</DropdownMenuItem>
-            <DropdownMenuItem danger>Logout</DropdownMenuItem>
+            <DropdownMenuItem variant="danger">Logout</DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
diff --git a/packages/demo/src/content/components/dropdown-menu.mdx b/packages/demo/src/content/components/dropdown-menu.mdx
index 2d6fcc5c..e882f4b3 100644
--- a/packages/demo/src/content/components/dropdown-menu.mdx
+++ b/packages/demo/src/content/components/dropdown-menu.mdx
@@ -35,7 +35,7 @@ Basic usage:
   <DropdownMenuContent align="start">
     <DropdownMenuItem>Profile</DropdownMenuItem>
     <DropdownMenuItem>Settings</DropdownMenuItem>
-    <DropdownMenuItem danger>Logout</DropdownMenuItem>
+    <DropdownMenuItem variant="danger">Logout</DropdownMenuItem>
   </DropdownMenuContent>
 </DropdownMenu>
 ```
@@ -201,12 +201,12 @@ Wrap related items in `DropdownMenuGroup` to associate a label with its items fo
 
 ### DropdownMenuItem
 
-| Name       | Description                                           | Type         | Default | Required |
-| ---------- | ----------------------------------------------------- | ------------ | ------- | -------- |
-| `danger`   | Styles the item as a destructive action               | `boolean`    | `false` | ❌       |
-| `inset`    | Adds left padding to align with items that have icons | `boolean`    | `false` | ❌       |
-| `disabled` | Prevents interaction and dims the item                | `boolean`    | `false` | ❌       |
-| `onSelect` | Called when the item is selected                      | `() => void` | -       | ❌       |
+| Name       | Description                                           | Type                | Default   | Required |
+| ---------- | ----------------------------------------------------- | ------------------- | --------- | -------- |
+| `variant`  | Visual style; `danger` marks a destructive action     | `neutral`, `danger` | `neutral` | ❌       |
+| `inset`    | Adds left padding to align with items that have icons | `boolean`           | `false`   | ❌       |
+| `disabled` | Prevents interaction and dims the item                | `boolean`           | `false`   | ❌       |
+| `onSelect` | Called when the item is selected                      | `() => void`        | -         | ❌       |
 
 ### DropdownMenuCheckboxItem
 
diff --git a/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css b/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css
index 36467541..7ccfe97e 100644
--- a/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css
+++ b/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css
@@ -35,7 +35,7 @@
   @apply hover:not-disabled:text-red-700! focus:text-red-700!;
   @apply hover:not-disabled:bg-red-300/50! focus:bg-red-300/50!;
   @apply dark:hover:not-disabled:bg-red-600/50! dark:focus:bg-red-600/50!;
-  @apply dark:hover:not-disabled:text-red-100! dark:focus:text-red-100!;
+  @apply dark:hover:not-disabled:text-red-200! dark:focus:text-red-200!;
 }
 
 .dropdown-menu-item-indicator-checkbox,
diff --git a/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
index 352d6995..5c242f0a 100644
--- a/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
@@ -77,15 +77,15 @@ const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
-    danger?: boolean;
+    variant?: 'neutral' | 'danger';
   }
->(({ className, inset, danger, ...props }, ref) => (
+>(({ className, inset, variant = 'neutral', ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
       styles['dropdown-menu-item'],
       inset && styles['dropdown-menu-inset'],
-      danger && styles['dropdown-menu-item-danger'],
+      variant === 'danger' && styles['dropdown-menu-item-danger'],
       className
     )}
     {...props}