Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Dropdown Menu Component - shadcn/ui Examples

About the shadcn/ui Dropdown Menu Component

The Dropdown Menu component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add dropdown-menu` and copy it directly into your project.

Dropdown Menu Component — Frequently Asked Questions

How do I open a shadcn Dropdown Menu programmatically?

Use `<DropdownMenu open={open} onOpenChange={setOpen}>` with state. Set `open={true}` to force it open, useful for tutorial highlights or keyboard shortcuts.

How do I add keyboard shortcuts to Dropdown Menu items?

Add `<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>` inside `<DropdownMenuItem>`. This renders the shortcut hint—you'll need to implement the actual keyboard handler separately.

How do I close the Dropdown after clicking an item?

By default, clicking a `<DropdownMenuItem>` closes the menu. If using `onSelect` to prevent close, use `event.preventDefault()` inside the handler.