Components
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.
npx @21st-dev/cli add reshaped/reshaped-menu-itemLoading preview...
import { Reshaped } from "reshaped/bundle";
import MenuItem from "@/components/ui/reshaped-menu-item";
const ActivityIcon = () => (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
</svg>
);
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ maxWidth: 320, width: "100%", margin: "0 auto", padding: 24 }}>
<MenuItem icon={ActivityIcon} onClick={() => {}}>
Edit message
</MenuItem>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...