iconiq

Registry Component

Dropdown

Composable dropdown primitives with a selectable value flow for persistent choices and an action-menu flow for immediate commands.

Live Playground

Use the first menu as a compact value picker, then open the avatar trigger to fire one-off actions like profile, settings, or logout.

Install And Iterate

Install the component directly into your codebase, then branch into v0 if you want to iterate on variations.

Install

Build with v0

Send the registry bundle into v0 when you want to explore new colorways, copy, or layout directions quickly.

Usage

Compose the trigger, content, and items directly when you want the API to feel closer to shadcn patterns while still supporting a built-in select mode.

tsx
import { LogOut, Settings, UserRound } from "lucide-react";
import { useState } from "react";
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownSeparator,
  DropdownTrigger,
  DropdownValue,
} from "@/components/ui/dropdown";

export function WorkspaceDropdowns() {
  const [team, setTeam] = useState<string | undefined>("design");
  const [lastAction, setLastAction] = useState("No action yet");

  return (
    <div className="flex w-full max-w-xl flex-col gap-4">
      <Dropdown
        className="w-[220px]"
        onValueChange={setTeam}
        value={team}
      >
        <DropdownTrigger>
          <DropdownValue placeholder="Choose a team" />
        </DropdownTrigger>
        <DropdownContent className="w-full shadow-none">
          <DropdownItem value="design">Design</DropdownItem>
          <DropdownItem value="product">Product</DropdownItem>
          <DropdownItem value="engineering">Engineering</DropdownItem>
        </DropdownContent>
      </Dropdown>

      <Dropdown
        className="w-14"
        variant="action"
      >
        <DropdownTrigger
          aria-label="Open profile menu"
          className="mx-auto h-11 w-11 overflow-hidden rounded-full border-border/80 bg-[url('/assets/av1.png')] bg-center bg-cover p-0 shadow-none"
          showChevron={false}
        >
          <span className="sr-only">Open profile menu</span>
        </DropdownTrigger>
        <DropdownContent align="center" className="w-56">
          <DropdownItem onClick={() => setLastAction("Profile")}>
            <UserRound className="size-4" />
            Profile
          </DropdownItem>
          <DropdownItem onClick={() => setLastAction("Settings")}>
            <Settings className="size-4" />
            Settings
          </DropdownItem>
          <DropdownSeparator />
          <DropdownItem onClick={() => setLastAction("Logout")}>
            <LogOut className="size-4" />
            Logout
          </DropdownItem>
        </DropdownContent>
      </Dropdown>
      <p className="text-sm text-muted-foreground">
        Last action: <span className="text-foreground">{lastAction}</span>
      </p>
    </div>
  );
}

API Details

Each item below covers the documented props and the behavior that matters during implementation.