Reshaped Link

Buttons

About

Navigation link for use within text that respects line breaks and text flow. Works with both href and onClick (rendering an anchor or button tag), offers underline and plain variants, primary/positive/critical/warning/inherit colors, a disabled state and an optional icon for standalone usage.

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

Code

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

Usage.tsx

import { Reshaped } from "reshaped/bundle";
import Link from "@/components/ui/reshaped-link";

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={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
        <Link icon={ActivityIcon} variant="plain" onClick={() => {}}>
          Link with an icon
        </Link>
      </div>
    </Reshaped>
  );
}