About
A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Base Menu to your project and fits it to your theme.
Code
How Base Menu is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Button } from '@/components/ui/base-button';
import {
Menu,
MenuContent,
MenuGroup,
MenuGroupLabel,
MenuRadioGroup,
MenuRadioItem,
MenuSeparator,
MenuTrigger,
} from '@/components/ui/base-menu';
export default function MenuDemo() {
return (
<Menu>
<MenuTrigger render={<Button variant="outline">Show Menu</Button>} />
<MenuContent sideOffset={4} className="w-40">
{/* Device Selection */}
<MenuGroup>
<MenuGroupLabel>Device</MenuGroupLabel>
<MenuSeparator />
<MenuRadioGroup defaultValue="desktop">
<MenuRadioItem value="desktop">Desktop</MenuRadioItem>
<MenuRadioItem value="mobile">Mobile</MenuRadioItem>
<MenuRadioItem value="tablet">Tablet</MenuRadioItem>
</MenuRadioGroup>
</MenuGroup>
</MenuContent>
</Menu>
);
}
Dependencies
More by Sean Hello
View all
3D Testimonails
3.4K
Line Charts 9
656
Alert
494
Line Charts 6
392
Area Charts 1
391
Scroll Area
376
Navigation Menu
319
Area Charts 2
318
More in Buttons
View all
Texture Button
97
Button
5
Button Group
Eclipse Button
39
Button
4
HeroUI Button Group
App Store Button
458
Base Button
4
