Reshaped Alert

Component 3

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 { Reshaped, View } 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 }}>
        <View gap={3}>
          <Alert title="Unexpected error happened" icon={ActivityIcon} color="critical">
            We have encountered an error while making a request. Please try again later.
          </Alert>
          <Alert
            title="Don't forget to fill in your taxes"
            icon={ActivityIcon}
            color="warning"
          >
            We're expecting to hear from you befor the end of December. You can find the
            forms below on this page.
          </Alert>
          <Alert title="You are all set" icon={ActivityIcon} color="positive">
            We are processing your data but you can already start using our service.
          </Alert>
          <Alert title="Release highlights" icon={ActivityIcon} color="primary">
            This release comes with 3 new components that you can start using
            immediately.
          </Alert>
        </View>
      </div>
    </Reshaped>
  );
}