# Shadcn AI Model Selector

> AI model selector with provider icons

- Type: example, free and open source (MIT)
- Component: [Dropdown Menu](https://reui.io/components/dropdown-menu.md)
- Page: https://reui.io/components/dropdown-menu/c-dropdown-menu-18
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/dropdown-menu.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/dropdown-menu.md
- MCP: `get_example("c-dropdown-menu-18")`
- Registry item: https://reui.io/r/styles/base-nova/c-dropdown-menu-18.json
- Uses: Button, Dropdown Menu

## Best for

A Select model button listing 3 AI models by provider logo, with a dark variant for the logo that needs one

## Agent notes

- No row stores the pick and the trigger always reads Select model; keep the chosen `id` and show its `label` there
- `menuItems` hardcodes 3 model names and brand logos; load the models your API serves

## When not to use

- A form field whose button shows the chosen model and submits it: use [Select](https://reui.io/components/select.md) (`get_component("select")`)

## Install

```bash
npx shadcn@latest add @reui/c-dropdown-menu-18
```

## About Shadcn Dropdown Menu

### When to use

- Action and overflow menus on a button or a dots icon, such as edit, duplicate, share, export and delete
- Account, workspace and create menus showing the signed in user, workspace switching and sign out
- Toggles, exclusive choices and short lists, such as panel layout, theme, AI models or recent alerts

### When not to use

- Actions opened by right clicking or long pressing a surface, with no button to press: use [Context Menu](https://reui.io/components/context-menu.md) (`get_component("context-menu")`)
- A whole top bar with search, alerts, switchers and the user dropdown already placed: use the [Navbar blocks](https://reui.io/blocks/application/navbar.md)
- The account settings page an avatar link opens, with identity, team and billing forms: use the [Profile blocks](https://reui.io/blocks/application/profile.md)

### Agent notes

- `DropdownMenuLabel` throws on the base twin unless it sits inside a `DropdownMenuGroup` or `DropdownMenuRadioGroup`
- On the base twin run an item's action from `onClick`; `onSelect` is a Radix item event that Base UI never fires
- Pass the trigger element through `render` on the base twin and as the `asChild` child on radix; the prop meant for the other twin does nothing

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.