var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var C=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),f=(e,l)=>{for(var r in l)t(e,r,{get:l[r],enumerable:!0})},a=(e,l,r,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of y(l))!u.call(e,s)&&s!==r&&t(e,s,{get:()=>l[s],enumerable:!(o=F(l,s))||o.enumerable});return e};var m=(e,l,r)=>(r=e!=null?h(E(e)):{},a(l||!e||!e.__esModule?t(r,"default",{value:e,enumerable:!0}):r,e)),g=e=>a(t({},"__esModule",{value:!0}),e);var d=C((_,i)=>{i.exports=_jsx_runtime});var x={};f(x,{default:()=>S,frontmatter:()=>b});var n=m(d()),b={title:"Sonner",description:"A beautiful toast component that can grab audience attention from any place.",lastUpdated:"30 Apr, 2025",links:{api_reference:"https://sonner.emilkowal.ski/toast#api-reference"}};function p(e){let l=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h2:"h2",p:"p",a:"a",h4:"h4",h3:"h3"},e.components),{ComponentShowcase:r,ComponentInstall:o,ComponentSource:s}=l;return o||c("ComponentInstall",!0),o.Cli||c("ComponentInstall.Cli",!0),o.Manual||c("ComponentInstall.Manual",!0),r||c("ComponentShowcase",!0),s||c("ComponentSource",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r,{name:"sonner-style-default",children:(0,n.jsx)(l.figure,{__src__:"preview/components/sonner-style-default.tsx",__rawString__:`import { Button } from "@/components/retroui"; import { toast } from "sonner"; export default function SonnerStyleDefault() { const onClick = () => { toast("Event has been created", { description: "Sunday, December 03, 2025", cancel: { label: "Undo", onClick: () => {}, }, }); }; return ; } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { toast } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"sonner"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" SonnerStyleDefault"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" toast"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Event has been created"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Sunday, December 03, 2025"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" cancel"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" label"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Undo"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {},"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" });"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" };"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{onClick}>Show Toast;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h2,{id:"about",children:"About"}),` `,(0,n.jsxs)(l.p,{children:[(0,n.jsx)(l.a,{href:"https://sonner.emilkowal.ski",children:"Sonner"})," is built and maintained by ",(0,n.jsx)(l.a,{href:"https://x.com/emilkowalski_",children:"Emil Kowalski"})]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h2,{id:"installation",children:"Installation"}),` `,(0,n.jsxs)(o,{children:[(0,n.jsx)(o.Cli,{children:(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,n.jsx)(l.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"https://retroui.dev/r/sonner.json"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]})})})})}),(0,n.jsxs)(o.Manual,{children:[(0,n.jsx)(l.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,n.jsx)(l.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" install"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" sonner"})]})})})}),(0,n.jsx)("br",{}),(0,n.jsx)(l.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,n.jsx)(s,{name:"sonner",children:(0,n.jsx)(l.figure,{__src__:"/vercel/path0/components/retroui/Sonner.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"use client"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"Toaster"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Sonner } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"sonner"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" ToasterProps"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Sonner>;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" Toaster"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" ToasterProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Sonner"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" toastOptions"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{{"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" classNames"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" toast"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-auto w-full p-4 bg-background border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border flex items-center relative"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"group-[.toast]:text-muted-foreground ml-2 text-sm font-sans"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" actionButton"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 bg-background border-border shadow border-2 ml-auto h-fit min-w-fit"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" cancelButton"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 text-sm bg-background border-border shadow border-2 ml-auto h-fit min-w-fit"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"ml-2 font-sans"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" closeButton"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"absolute bg-background -top-1 -left-1 rounded-full p-0.5"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" unstyled"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#BF9EEE"},children:" true"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" }}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"};"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Toaster };"})]})]})})})}),(0,n.jsx)("br",{}),(0,n.jsxs)(l.h3,{id:"3-add-toaster-in-your-applayouttsx",children:["3. Add ",(0,n.jsx)(l.code,{children:"Toaster"})," in your ",(0,n.jsx)(l.code,{children:"app/layout.tsx"})]}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Toaster } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/sonner"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" RootLayout"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" }) {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"html"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" lang"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"en"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"head"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"body"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"main"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">{children}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Toaster"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})]})]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h2,{id:"examples",children:"Examples"}),` `,(0,n.jsx)(l.h3,{id:"default",children:"Default"}),` `,(0,n.jsx)(r,{name:"sonner-style-default",children:(0,n.jsx)(l.figure,{__src__:"preview/components/sonner-style-default.tsx",__rawString__:`import { Button } from "@/components/retroui"; import { toast } from "sonner"; export default function SonnerStyleDefault() { const onClick = () => { toast("Event has been created", { description: "Sunday, December 03, 2025", cancel: { label: "Undo", onClick: () => {}, }, }); }; return ; } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { toast } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"sonner"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" SonnerStyleDefault"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" toast"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Event has been created"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Sunday, December 03, 2025"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" cancel"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" label"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Undo"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {},"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" });"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" };"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{onClick}>Show Toast;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h3,{id:"status",children:"Status"}),` `,(0,n.jsx)(r,{name:"sonner-style-status",children:(0,n.jsx)(l.figure,{__src__:"preview/components/sonner-style-status.tsx",__rawString__:`import { Button } from "@/components/retroui"; import { toast } from "sonner"; export default function SonnerStyleStatus() { const onClick = () => { toast.success("Congrats man \u{1F389} (Plain)"); }; return ; } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { toast } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"sonner"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" SonnerStyleStatus"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" toast."}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"success"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Congrats man \u{1F389} (Plain)"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:");"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" };"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{onClick}>Congratulate Me;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h3,{id:"colored-status",children:"Colored Status"}),` `,(0,n.jsx)(r,{name:"sonner-style-colored-status",children:(0,n.jsx)(l.figure,{__src__:"preview/components/sonner-style-colored-status.tsx",__rawString__:`import { Button } from "@/components/retroui"; import { toast } from "sonner"; export default function SonnerStyleRichColors() { const onClick = () => { toast.success("Congrats man (Colored) \u{1F389}", { richColors: true, }); }; return ; } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { toast } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"sonner"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" SonnerStyleRichColors"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" toast."}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"success"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Congrats man (Colored) \u{1F389}"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" richColors"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#BF9EEE"},children:" true"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" });"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" };"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{onClick}>Congratulate Me;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function D(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(p,e)})):p(e)}var S=D;function c(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(x);})(); ;return Component;