Reshaped Menu item

Navigation

About

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.

Code

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

Usage.tsx

import { Reshaped, Text, View } 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 }}>
        <View gap={2}>
          <Text variant="featured-6" weight="bold">
            Getting started
          </Text>
          <MenuItem.Aligner>
            <View gap={1}>
              <MenuItem size="small" onClick={() => {}}>
                Overview
              </MenuItem>
              <MenuItem size="small" onClick={() => {}}>
                Installation
              </MenuItem>
            </View>
          </MenuItem.Aligner>
        </View>
      </div>
    </Reshaped>
  );
}