Reshaped Dropdown menu

Buttons

About

Compound components for any menu composition: a Trigger that passes required attributes to your component, an overlaying Content with menu items based on MenuItem, item Sections, and nested SubMenus with automatic focus trapping. Supports Popover positioning with viewport-aware fallbacks.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reshaped Dropdown menu to your project and fits it to your theme.

Code

How Reshaped Dropdown menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Button, Reshaped } from "reshaped/bundle";
import DropdownMenu from "@/components/ui/reshaped-dropdown-menu";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
        <DropdownMenu>
          <DropdownMenu.Trigger>
            {(attributes) => <Button attributes={attributes}>Open</Button>}
          </DropdownMenu.Trigger>
          <DropdownMenu.Content>
            <DropdownMenu.Item onClick={() => {}}>Item 1</DropdownMenu.Item>
            <DropdownMenu.SubMenu>
              <DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>
              <DropdownMenu.Content>
                <DropdownMenu.Item onClick={() => {}}>SubItem 1</DropdownMenu.Item>
                <DropdownMenu.Item onClick={() => {}}>SubItem 2</DropdownMenu.Item>
              </DropdownMenu.Content>
            </DropdownMenu.SubMenu>
            <DropdownMenu.Item onClick={() => {}}>Item 3</DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu>
      </div>
    </Reshaped>
  );
}