Reshaped Menu item

Building block for menus and navigation that renders its main area from children and works with both href and onClick. Supports critical and neutral colors, selected and disabled states, three sizes, startSlot/endSlot composition, built-in icon support and a MenuItem.Aligner utility for aligning with surrounding text.

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

import { Reshaped } from "reshaped/bundle";
import MenuItem from "@/components/ui/reshaped-menu-item";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 320, width: "100%", margin: "0 auto", padding: 24 }}>
        <MenuItem size="large" onClick={() => {}}>
          Edit profile
        </MenuItem>
      </div>
    </Reshaped>
  );
}