Toast

import { toaster } from "@kobalte/core";
import {
  Toast,
  ToastContent,
  ToastProgress,
  ToastTitle
} from "@/components/ui/toast";

toaster.show(props => (
  <Toast toastId={props.toastId}>
    <ToastContent>
      <ToastTitle>Toast</ToastTitle>
    </ToastContent>
    <ToastProgress />
  </Toast>
))

import { ToastRegion, ToastList } from "@/components/ui/toast"
 
const App = () => {
  return (
    <Router
      root={props => (
          <Suspense>
            <ColorModeScript />
            <ColorModeProvider>
              {props.children}
              <ToastRegion>
                <ToastList />
              </ToastRegion>
            </ColorModeProvider>
          </Suspense>
      )}
    >
      <FileRoutes />
    </Router>
  );
};
 
export default App;