diff --git a/tsunami/demo/dropdowntest/app.go b/tsunami/demo/dropdowntest/app.go
new file mode 100644
index 0000000000..cc49a62668
--- /dev/null
+++ b/tsunami/demo/dropdowntest/app.go
@@ -0,0 +1,210 @@
+package main
+
+import (
+	"github.com/wavetermdev/waveterm/tsunami/app"
+	"github.com/wavetermdev/waveterm/tsunami/vdom"
+)
+
+const AppTitle = "Dropdown Test (Tsunami Demo)"
+const AppShortDesc = "Test dropdown element in Tsunami"
+
+// DropdownOption represents a single option in the dropdown
+type DropdownOption struct {
+	Label    string `json:"label"`
+	Value    string `json:"value"`
+	Disabled bool   `json:"disabled,omitempty"`
+}
+
+var App = app.DefineComponent("App", func(_ struct{}) any {
+	// State for different dropdown values
+	basicDropdown := app.UseLocal("option2")
+	fruitDropdown := app.UseLocal("")
+	colorDropdown := app.UseLocal("blue")
+	disabledDropdown := app.UseLocal("disabled-value")
+
+	// Options for different dropdowns
+	basicOptions := []DropdownOption{
+		{Label: "Option 1", Value: "option1"},
+		{Label: "Option 2", Value: "option2"},
+		{Label: "Option 3", Value: "option3"},
+		{Label: "Option 4", Value: "option4"},
+	}
+
+	fruitOptions := []DropdownOption{
+		{Label: "Apple 🍎", Value: "apple"},
+		{Label: "Banana 🍌", Value: "banana"},
+		{Label: "Cherry 🍒", Value: "cherry"},
+		{Label: "Durian 🍈", Value: "durian", Disabled: true},
+		{Label: "Elderberry 🫐", Value: "elderberry"},
+		{Label: "Fig 🌰", Value: "fig"},
+	}
+
+	colorOptions := []DropdownOption{
+		{Label: "Red", Value: "red"},
+		{Label: "Green", Value: "green"},
+		{Label: "Blue", Value: "blue"},
+		{Label: "Yellow", Value: "yellow"},
+		{Label: "Purple", Value: "purple"},
+	}
+
+	// Event handlers
+	handleBasicChange := func(e vdom.VDomEvent) {
+		basicDropdown.Set(e.TargetValue)
+	}
+
+	handleFruitChange := func(e vdom.VDomEvent) {
+		fruitDropdown.Set(e.TargetValue)
+	}
+
+	handleColorChange := func(e vdom.VDomEvent) {
+		colorDropdown.Set(e.TargetValue)
+	}
+
+	return vdom.H("div", map[string]any{
+		"className": "max-w-4xl mx-auto p-8",
+	},
+		vdom.H("h1", map[string]any{
+			"className": "text-3xl font-bold mb-6 text-white",
+		}, "Tsunami Custom Dropdown"),
+
+		vdom.H("p", map[string]any{
+			"className": "text-gray-300 mb-8",
+		}, "This is a custom-styled dropdown component (not native HTML select). Features include: keyboard navigation (↑↓ arrows, Enter, Escape), click-outside to close, disabled options, and smooth animations."),
+
+		vdom.H("div", map[string]any{
+			"className": "space-y-8",
+		},
+			// Basic Dropdown
+			vdom.H("div", map[string]any{
+				"className": "p-6 bg-gray-800 rounded-lg border border-gray-700",
+			},
+				vdom.H("h2", map[string]any{
+					"className": "text-2xl font-semibold mb-4 text-white",
+				}, "Basic Dropdown"),
+				vdom.H("div", map[string]any{
+					"className": "mb-4",
+				},
+					vdom.H("label", map[string]any{
+						"className": "block text-gray-300 mb-2",
+					}, "Select an option:"),
+					vdom.H("wave:dropdown", map[string]any{
+						"options":     basicOptions,
+						"value":       basicDropdown.Get(),
+						"placeholder": "Choose an option...",
+						"onChange":    handleBasicChange,
+					}),
+				),
+				vdom.H("div", map[string]any{
+					"className": "mt-4 p-3 bg-gray-700 rounded text-gray-200",
+				}, "Selected Value: ", basicDropdown.Get()),
+			),
+
+			// Fruit Dropdown with Disabled Option
+			vdom.H("div", map[string]any{
+				"className": "p-6 bg-gray-800 rounded-lg border border-gray-700",
+			},
+				vdom.H("h2", map[string]any{
+					"className": "text-2xl font-semibold mb-4 text-white",
+				}, "Dropdown with Icons and Disabled Option"),
+				vdom.H("div", map[string]any{
+					"className": "mb-4",
+				},
+					vdom.H("label", map[string]any{
+						"className": "block text-gray-300 mb-2",
+					}, "Pick a fruit (Durian is disabled):"),
+					vdom.H("wave:dropdown", map[string]any{
+						"options":     fruitOptions,
+						"value":       fruitDropdown.Get(),
+						"placeholder": "Select a fruit...",
+						"onChange":    handleFruitChange,
+					}),
+				),
+				vdom.H("div", map[string]any{
+					"className": "mt-4 p-3 bg-gray-700 rounded text-gray-200",
+				}, vdom.IfElse(
+					fruitDropdown.Get() != "",
+					"Selected Fruit: "+fruitDropdown.Get(),
+					"No fruit selected",
+				)),
+			),
+
+			// Color Dropdown with Pre-selected Value
+			vdom.H("div", map[string]any{
+				"className": "p-6 bg-gray-800 rounded-lg border border-gray-700",
+			},
+				vdom.H("h2", map[string]any{
+					"className": "text-2xl font-semibold mb-4 text-white",
+				}, "Dropdown with Default Value"),
+				vdom.H("div", map[string]any{
+					"className": "mb-4",
+				},
+					vdom.H("label", map[string]any{
+						"className": "block text-gray-300 mb-2",
+					}, "Choose your favorite color:"),
+					vdom.H("wave:dropdown", map[string]any{
+						"options":  colorOptions,
+						"value":    colorDropdown.Get(),
+						"onChange": handleColorChange,
+					}),
+				),
+				vdom.H("div", map[string]any{
+					"className": "mt-4 p-3 rounded text-gray-200",
+					"style": map[string]any{
+						"backgroundColor": colorDropdown.Get(),
+					},
+				}, "Selected Color: ", colorDropdown.Get()),
+			),
+
+			// Disabled Dropdown
+			vdom.H("div", map[string]any{
+				"className": "p-6 bg-gray-800 rounded-lg border border-gray-700",
+			},
+				vdom.H("h2", map[string]any{
+					"className": "text-2xl font-semibold mb-4 text-white",
+				}, "Disabled Dropdown"),
+				vdom.H("div", map[string]any{
+					"className": "mb-4",
+				},
+					vdom.H("label", map[string]any{
+						"className": "block text-gray-300 mb-2",
+					}, "This dropdown is disabled:"),
+					vdom.H("wave:dropdown", map[string]any{
+						"options":     basicOptions,
+						"value":       disabledDropdown.Get(),
+						"placeholder": "Can't select...",
+						"disabled":    true,
+					}),
+				),
+				vdom.H("div", map[string]any{
+					"className": "mt-4 p-3 bg-gray-700 rounded text-gray-200",
+				}, "This dropdown cannot be changed"),
+			),
+
+			// Custom Styled Dropdown
+			vdom.H("div", map[string]any{
+				"className": "p-6 bg-gray-800 rounded-lg border border-gray-700",
+			},
+				vdom.H("h2", map[string]any{
+					"className": "text-2xl font-semibold mb-4 text-white",
+				}, "Custom Styled Dropdown"),
+				vdom.H("div", map[string]any{
+					"className": "mb-4",
+				},
+					vdom.H("label", map[string]any{
+						"className": "block text-gray-300 mb-2",
+					}, "Dropdown with custom styling:"),
+					vdom.H("wave:dropdown", map[string]any{
+						"options":     colorOptions,
+						"value":       colorDropdown.Get(),
+						"onChange":    handleColorChange,
+						"className":   "text-lg font-bold",
+						"style": map[string]any{
+							"borderWidth": "2px",
+							"borderColor": "#10b981",
+						},
+					}),
+				),
+			),
+		),
+	)
+})
diff --git a/tsunami/demo/dropdowntest/go.mod b/tsunami/demo/dropdowntest/go.mod
new file mode 100644
index 0000000000..2c8b05cf13
--- /dev/null
+++ b/tsunami/demo/dropdowntest/go.mod
@@ -0,0 +1,12 @@
+module github.com/wavetermdev/waveterm/tsunami/demo/dropdowntest
+
+go 1.24.6
+
+require github.com/wavetermdev/waveterm/tsunami v0.0.0-00010101000000-000000000000
+
+require (
+	github.com/google/uuid v1.6.0 // indirect
+	github.com/outrigdev/goid v0.3.0 // indirect
+)
+
+replace github.com/wavetermdev/waveterm/tsunami => ../../
diff --git a/tsunami/demo/dropdowntest/go.sum b/tsunami/demo/dropdowntest/go.sum
new file mode 100644
index 0000000000..4c44991dfc
--- /dev/null
+++ b/tsunami/demo/dropdowntest/go.sum
@@ -0,0 +1,4 @@
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/outrigdev/goid v0.3.0 h1:t/otQD3EXc45cLtQVPUnNgEyRaTQA4cPeu3qVcrsIws=
+github.com/outrigdev/goid v0.3.0/go.mod h1:hEH7f27ypN/GHWt/7gvkRoFYR0LZizfUBIAbak4neVE=
diff --git a/tsunami/frontend/src/element/README-DROPDOWN.md b/tsunami/frontend/src/element/README-DROPDOWN.md
new file mode 100644
index 0000000000..575383ce23
--- /dev/null
+++ b/tsunami/frontend/src/element/README-DROPDOWN.md
@@ -0,0 +1,162 @@
+# Dropdown Component
+
+A custom-styled dropdown component for the Tsunami framework that provides significant value over native HTML select elements. This component features a shadcn-inspired design with custom styling, keyboard navigation, and smooth animations.
+
+## Features
+
+- ✅ **Custom styling** - No native browser controls, fully styled dropdown
+- ✅ **Pure JSON-serializable props** - No functions or render functions in props
+- ✅ **Keyboard navigation** - Arrow keys, Enter, and Escape support
+- ✅ **Click-outside to close** - Intuitive UX
+- ✅ **Disabled options** - Individual options can be disabled
+- ✅ **Placeholder text** - Clear indication when no selection is made
+- ✅ **Default selected values** - Pre-select options
+- ✅ **Custom styling** - Via className and style props
+- ✅ **Accessible design** - Proper ARIA attributes
+- ✅ **Dark theme** - Consistent with Tsunami design system
+- ✅ **Smooth animations** - Dropdown open/close and hover states
+- ✅ **Highlighted selection** - Visual feedback for current and selected items
+
+## Why Not Native Select?
+
+This component provides significant advantages over using native `<select>` elements:
+
+1. **Consistent cross-browser styling** - Native selects look different on every platform
+2. **Custom animations** - Smooth open/close transitions
+3. **Better visual design** - Matches the dark theme and overall design system
+4. **Enhanced keyboard navigation** - Skip disabled items automatically
+5. **Flexible styling** - Complete control over appearance
+6. **Better accessibility** - Proper ARIA labels and roles
+
+## Usage
+
+### Basic Dropdown
+
+```go
+vdom.H("wave:dropdown", map[string]any{
+    "options": []DropdownOption{
+        {Label: "Option 1", Value: "option1"},
+        {Label: "Option 2", Value: "option2"},
+        {Label: "Option 3", Value: "option3"},
+    },
+    "value": "option1",
+    "onChange": func(e vdom.VDomEvent) {
+        fmt.Println("Selected:", e.TargetValue)
+    },
+})
+```
+
+### With Placeholder
+
+```go
+vdom.H("wave:dropdown", map[string]any{
+    "options": options,
+    "placeholder": "Choose an option...",
+    "onChange": handleChange,
+})
+```
+
+### With Disabled Options
+
+```go
+options := []DropdownOption{
+    {Label: "Available", Value: "available"},
+    {Label: "Unavailable", Value: "unavailable", Disabled: true},
+}
+
+vdom.H("wave:dropdown", map[string]any{
+    "options": options,
+    "onChange": handleChange,
+})
+```
+
+### Disabled Dropdown
+
+```go
+vdom.H("wave:dropdown", map[string]any{
+    "options": options,
+    "value": "locked-value",
+    "disabled": true,
+})
+```
+
+### Custom Styling
+
+```go
+vdom.H("wave:dropdown", map[string]any{
+    "options": options,
+    "className": "text-lg font-bold",
+    "style": map[string]any{
+        "borderWidth": "2px",
+        "borderColor": "#10b981",
+    },
+    "onChange": handleChange,
+})
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `[]DropdownOption` | `[]` | Array of options to display |
+| `value` | `string` | `""` | Currently selected value |
+| `placeholder` | `string` | `"Select an option..."` | Placeholder text when no value selected |
+| `disabled` | `boolean` | `false` | Whether the dropdown is disabled |
+| `className` | `string` | `""` | Additional CSS classes |
+| `style` | `React.CSSProperties` | `{}` | Inline styles |
+| `onChange` | `func(e vdom.VDomEvent)` | - | Handler called when selection changes |
+
+## DropdownOption Type
+
+```go
+type DropdownOption struct {
+    Label    string `json:"label"`
+    Value    string `json:"value"`
+    Disabled bool   `json:"disabled,omitempty"`
+}
+```
+
+## Keyboard Navigation
+
+- **Arrow Down** - Move to next enabled option
+- **Arrow Up** - Move to previous enabled option
+- **Enter** - Select the highlighted option
+- **Escape** - Close the dropdown without selecting
+
+## Example Component
+
+See the complete working example in `/tsunami/demo/dropdowntest/app.go`
+
+## Design Principles
+
+The dropdown component follows these Tsunami best practices:
+
+1. **JSON-Serializable Props**: All props can be serialized to JSON for backend-to-frontend communication
+2. **No Functions in Props**: Instead of render functions, uses simple data structures (DropdownOption)
+3. **Custom Styling**: Provides real value by implementing a custom-styled dropdown (not just wrapping native elements)
+4. **Consistent Theming**: Uses dark gray colors matching other Tsunami elements
+5. **Accessibility**: Full keyboard navigation and ARIA support
+6. **Type Safety**: Fully typed with TypeScript interfaces
+
+## Integration
+
+The dropdown is registered in the VDOM system as `wave:dropdown` and can be used like any other Tsunami element:
+
+```typescript
+// In vdom.tsx
+const WaveTagMap: Record<string, VDomReactTagType> = {
+    "wave:markdown": WaveMarkdown,
+    "wave:dropdown": WaveDropdown,
+};
+```
+
+## Styling Details
+
+The dropdown uses the following color scheme:
+- **Trigger**: `bg-gray-800` with `border-gray-700`
+- **Hover**: `bg-gray-750` (slightly lighter)
+- **Menu**: `bg-gray-800` with `border-gray-700` 
+- **Option hover**: `bg-gray-700`
+- **Selected option**: `bg-gray-750` with bold font
+- **Placeholder**: `text-gray-400`
+- **Focus ring**: Blue (`ring-blue-500`)
diff --git a/tsunami/frontend/src/element/dropdown.tsx b/tsunami/frontend/src/element/dropdown.tsx
new file mode 100644
index 0000000000..26ba5c55a4
--- /dev/null
+++ b/tsunami/frontend/src/element/dropdown.tsx
@@ -0,0 +1,191 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState, useRef, useEffect } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface DropdownOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+export interface DropdownProps {
+    options?: DropdownOption[];
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    onChange?: (value: string) => void;
+}
+
+export function Dropdown({ 
+    options = [], 
+    value, 
+    placeholder = "Select an option...", 
+    disabled = false, 
+    style, 
+    className,
+    onChange
+}: DropdownProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    // Find the selected option
+    const selectedOption = options.find(opt => opt.value === value);
+    const displayText = selectedOption ? selectedOption.label : placeholder;
+
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+                setHighlightedIndex(-1);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen]);
+
+    // Keyboard navigation
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                setIsOpen(false);
+                setHighlightedIndex(-1);
+            } else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setHighlightedIndex(prev => {
+                    const nextIndex = prev + 1;
+                    // Skip disabled options
+                    for (let i = nextIndex; i < options.length; i++) {
+                        if (!options[i].disabled) return i;
+                    }
+                    return prev;
+                });
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setHighlightedIndex(prev => {
+                    const nextIndex = prev - 1;
+                    // Skip disabled options
+                    for (let i = nextIndex; i >= 0; i--) {
+                        if (!options[i].disabled) return i;
+                    }
+                    return prev;
+                });
+            } else if (e.key === 'Enter' && highlightedIndex >= 0) {
+                e.preventDefault();
+                const option = options[highlightedIndex];
+                if (!option.disabled) {
+                    handleSelect(option);
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, highlightedIndex, options]);
+
+    const handleSelect = (option: DropdownOption) => {
+        if (option.disabled) return;
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        if (onChange) {
+            onChange(option.value);
+        }
+    };
+
+    const toggleDropdown = () => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+            if (!isOpen) {
+                // When opening, highlight the selected item or first enabled item
+                const selectedIndex = options.findIndex(opt => opt.value === value);
+                if (selectedIndex >= 0 && !options[selectedIndex].disabled) {
+                    setHighlightedIndex(selectedIndex);
+                } else {
+                    const firstEnabled = options.findIndex(opt => !opt.disabled);
+                    setHighlightedIndex(firstEnabled);
+                }
+            } else {
+                setHighlightedIndex(-1);
+            }
+        }
+    };
+
+    const triggerClasses = twMerge(
+        "w-full px-3 py-2 rounded border bg-gray-800 text-gray-200 border-gray-700",
+        "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+        "cursor-pointer flex items-center justify-between gap-2",
+        "hover:bg-gray-750 transition-colors",
+        disabled && "cursor-not-allowed opacity-50 hover:bg-gray-800",
+        className
+    );
+
+    const menuClasses = twMerge(
+        "absolute z-50 w-full mt-1 rounded border border-gray-700 bg-gray-800",
+        "shadow-xl max-h-60 overflow-auto"
+    );
+
+    const optionClasses = (option: DropdownOption, index: number) => twMerge(
+        "px-3 py-2 cursor-pointer transition-colors text-sm",
+        option.disabled ? "opacity-50 cursor-not-allowed text-gray-500" : "text-gray-200 hover:bg-gray-700",
+        highlightedIndex === index && !option.disabled && "bg-gray-700",
+        option.value === value && "bg-gray-750 font-semibold"
+    );
+
+    return (
+        <div ref={dropdownRef} className="relative w-full" style={style}>
+            <button
+                type="button"
+                className={triggerClasses}
+                onClick={toggleDropdown}
+                disabled={disabled}
+                aria-haspopup="listbox"
+                aria-expanded={isOpen}
+            >
+                <span className={!selectedOption ? "text-gray-400" : "flex-1 text-left"}>
+                    {displayText}
+                </span>
+                <svg 
+                    className={`w-4 h-4 transition-transform flex-shrink-0 ${isOpen ? 'rotate-180' : ''}`}
+                    fill="none" 
+                    stroke="currentColor" 
+                    viewBox="0 0 24 24"
+                >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+
+            {isOpen && (
+                <div className={menuClasses} role="listbox">
+                    {options.length === 0 ? (
+                        <div className="px-3 py-2 text-gray-500 text-sm">No options available</div>
+                    ) : (
+                        options.map((option, index) => (
+                            <div
+                                key={`${option.value}-${index}`}
+                                className={optionClasses(option, index)}
+                                onClick={() => handleSelect(option)}
+                                onMouseEnter={() => !option.disabled && setHighlightedIndex(index)}
+                                role="option"
+                                aria-selected={option.value === value}
+                                aria-disabled={option.disabled}
+                            >
+                                {option.label}
+                            </div>
+                        ))
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/tsunami/frontend/src/vdom.tsx b/tsunami/frontend/src/vdom.tsx
index 37de4c0f1c..ec606ee691 100644
--- a/tsunami/frontend/src/vdom.tsx
+++ b/tsunami/frontend/src/vdom.tsx
@@ -9,6 +9,7 @@ import { twMerge } from "tailwind-merge";
 
 import { AlertModal, ConfirmModal } from "@/element/modals";
 import { Markdown } from "@/element/markdown";
+import { Dropdown } from "@/element/dropdown";
 import { getTextChildren } from "@/model/model-utils";
 import type { TsunamiModel } from "@/model/tsunami-model";
 import { RechartsTag } from "@/recharts/recharts";
@@ -30,6 +31,7 @@ type VDomReactTagType = (props: { elem: VDomElem; model: TsunamiModel }) => Reac
 
 const WaveTagMap: Record<string, VDomReactTagType> = {
     "wave:markdown": WaveMarkdown,
+    "wave:dropdown": WaveDropdown,
 };
 
 const AllowedSimpleTags: { [tagName: string]: boolean } = {
@@ -278,6 +280,32 @@ function WaveMarkdown({ elem, model }: { elem: VDomElem; model: TsunamiModel })
     );
 }
 
+function WaveDropdown({ elem, model }: { elem: VDomElem; model: TsunamiModel }) {
+    const props = useVDom(model, elem);
+    
+    // Create a handler that wraps the onChange prop if it exists
+    const handleChange = props?.onChange ? (value: string) => {
+        // Create a synthetic event-like object for VDOM
+        const syntheticEvent = {
+            target: { value },
+            currentTarget: { value }
+        } as any;
+        props.onChange(syntheticEvent);
+    } : undefined;
+    
+    return (
+        <Dropdown 
+            options={props?.options} 
+            value={props?.value} 
+            placeholder={props?.placeholder}
+            disabled={props?.disabled}
+            style={props?.style} 
+            className={props?.className}
+            onChange={handleChange}
+        />
+    );
+}
+
 function StyleTag({ elem, model }: { elem: VDomElem; model: TsunamiModel }) {
     const styleText = getTextChildren(elem);
     if (styleText == null) {