Reshaped Toast

Buttons 1

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 { Avatar, Button, Reshaped } from "reshaped/bundle";
import { useToast } from "@/components/ui/reshaped-toast";

function Trigger() {
  const toast = useToast();
  return (
    <Button
      onClick={() => {
        toast.show({
          startSlot: <Avatar initials="RS" color="primary" size={10} />,
          text: "Reshaped has logged in",
          color: "neutral",
          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>
  );
}