Components
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.
npx @21st-dev/cli add reshaped/reshaped-toastLoading preview...
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>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...