Reshaped Toast

Buttons

About

Notification system driven by the useToast hook (show/hide) and ToastProvider for scoped render regions. Toasts support an icon, title, text and 1-2 actions, five colors (inverted default plus neutral/primary/positive/critical), configurable position, timeout and width, vertical action layout, a custom startSlot and fully custom children layouts for banners.

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

Code

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

Usage.tsx

import { Button, Reshaped } from "reshaped/bundle";
import { useToast } from "@/components/ui/reshaped-toast";

function Trigger() {
  const toast = useToast();
  return (
    <Button
      onClick={() => {
        const id = toast.show({
          text: "Notification sent",
          orientation: "vertical",
          actionsSlot: [
            <Button key="undo" onClick={() => toast.hide(id)}>
              Undo
            </Button>,
            <Button key="dismiss" onClick={() => toast.hide(id)}>
              Dismiss
            </Button>,
          ],
          timeout: 0,
        });
      }}
    >
      Show notification
    </Button>
  );
}

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ minHeight: 420, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
        <Trigger />
      </div>
    </Reshaped>
  );
}