Reshaped Alert

Component

About

Prominent message related to the entire page or a specific area. Renders a title, an optional icon and a children slot; supports an actions slot, four status colors (critical, warning, positive, primary), inline layout direction and bleed.

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

Code

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

Usage.tsx

import { Link, Reshaped } from "reshaped/bundle";
import Alert from "@/components/ui/reshaped-alert";

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: 640, width: "100%", margin: "0 auto", padding: 24 }}>
        <Alert
          inline
          title="Update your theme"
          icon={ActivityIcon}
          actionsSlot={
            <Link variant="plain" onClick={() => {}}>
              Generate
            </Link>
          }
        >
          Don't forget to generate the new theme definition after updating to our
          latest release.
        </Alert>
      </div>
    </Reshaped>
  );
}