39:T17bf,

"use client"

import { Button } from "@/components/ui/button"
import { Toaster, ToastProvider, useToast } from "@/components/ui/toast"

const Trigger = () => {
  const toast = useToast()
  return (
    <Button
      variant="secondary"
      onClick={() =>
        toast.add({
          title: "Saved to collection",
          description: "Find it under Saved.",
        })
      }
    >
      Show toast
    </Button>
  )
}

const Demo = () => (
  <ToastProvider>
    <Trigger />
    <Toaster />
  </ToastProvider>
)

export default Demo

36:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$39"}}],"$L3a"]}] 3b:T3ffe,

"use client"

import { Toast as ToastPrimitive } from "@base-ui/react/toast"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitive.Provider
const useToast = ToastPrimitive.useToastManager

const CloseIcon = () => (
  <svg
    width="12"
    height="12"
    viewBox="0 0 12 12"
    fill="none"
    aria-hidden="true"
  >
    <path
      d="M2.5 2.5l7 7M9.5 2.5l-7 7"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
    />
  </svg>
)

const Toaster = ({ className }: { className?: string }) => {
  const { toasts } = useToast()
  return (
    <ToastPrimitive.Portal>
      <ToastPrimitive.Viewport
        data-slot="toast-viewport"
        className={cn(
          "fixed right-24 bottom-24 z-50 flex w-320 max-w-[calc(100%-48px)] flex-col gap-8 outline-none",
          className
        )}
      >
        {toasts.map((toast) => (
          <ToastPrimitive.Root
            key={toast.id}
            toast={toast}
            data-slot="toast"
            className="flex [translate:var(--toast-swipe-movement-x)_var(--toast-swipe-movement-y)] items-start gap-12 rounded-16 bg-glass-background-primary p-16 text-glass-text-primary shadow-glass backdrop-glass transition-[opacity,translate] duration-300 ease-spring data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-out data-starting-style:[translate:0_16px] data-starting-style:opacity-0 data-swiping:duration-0 data-ending-style:data-[swipe-direction=down]:[translate:0_100%] data-ending-style:data-[swipe-direction=right]:[translate:100%_0] motion-reduce:transition-none"
          >
            <div className="flex flex-1 flex-col gap-4">
              <ToastPrimitive.Title
                data-slot="toast-title"
                className="text-compact-bold"
              />
              <ToastPrimitive.Description
                data-slot="toast-description"
                className="text-compact text-glass-text-secondary"
              />
            </div>
            <ToastPrimitive.Close
              data-slot="toast-close"
              aria-label="Close"
              className="flex size-24 shrink-0 cursor-pointer items-center justify-center rounded-full text-glass-text-tertiary hover:bg-glass-background-primary-hover hover:text-glass-text-primary"
            >
              <CloseIcon />
            </ToastPrimitive.Close>
          </ToastPrimitive.Root>
        ))}
      </ToastPrimitive.Viewport>
    </ToastPrimitive.Portal>
  )
}

export { Toaster, ToastProvider, useToast }

38:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3b"}}],"$L3c"]}]

Installation

Usage