OverlayHost

import { useState } from "react";
import { Button, OverlayHost, Text, Toast, VStack, ViewFrame } from "@/ohmygui";

export default function Example() {
  const [showToast, setShowToast] = useState(false);

  return (
    <VStack gap="md" align="stretch">
      <Button variant="outline" onClick={() => setShowToast(true)}>Show toast</Button>
      <ViewFrame as="section" aria-label="Overlay preview area" height={180} className="relative">
        <Text>Toast notifications are positioned over this local preview.</Text>
        <OverlayHost scope="component-showcase" stackPolicy="last-in-front" style={{ position: "absolute" }}>
          {showToast && <Toast message="3 files exported" duration={0} type="success" onDismiss={() => setShowToast(false)} />}
        </OverlayHost>
      </ViewFrame>
    </VStack>
  );
}