@alsocoder/apna-toast

React toast notifications powered by Sonner, with Apna vanilla CSS and shadcn/Tailwind token fallbacks. Works with or without Tailwind.

Install

npm install @alsocoder/apna-toast

Peer dependencies: react and react-dom (>= 18).

Quick start

import "@alsocoder/apna-toast/styles.css"
import { ApnaToaster, apnaToast } from "@alsocoder/apna-toast"

export function App() {
  return (
    <>
      <ApnaToaster position="top-right" closeButton />
      <button onClick={() => apnaToast.success("Saved!")}>Save</button>
    </>
  )
}

ApnaToaster

Mount once in your root layout. Forwards all Sonner Toaster props.

<ApnaToaster
  position="top-right"
  expand
  closeButton
  visibleToasts={5}
  duration={4000}
/>

Customization

1. CSS variables — override --apna-toast-* tokens globally or on a wrapper.

2. classNames — slot-wise class overrides:

<ApnaToaster
  classNames={{
    toast: "rounded-xl",
    success: "border-l-4",
  }}
/>

3. icons — replace default SVG icons:

<ApnaToaster icons={{ success: <MyIcon /> }} />

4. Dark mode — set data-apna-toast-theme="dark" on a parent, or use .apna-toast-dark.

apnaToast API

apnaToast("Hello")
apnaToast.success("Saved successfully")
apnaToast.error("Failed", { description: "Try again later" })
apnaToast.warning("Low storage")
apnaToast.info("New update available")
apnaToast.loading("Uploading...")

apnaToast.promise(saveData(), {
  loading: "Saving...",
  success: "Saved!",
  error: "Failed to save",
})

apnaToast.custom((id) => (
  <div className="apna-toast">
  </div>
))

apnaToast.dismiss()
apnaToast.dismiss(toastId)

Action and cancel buttons

apnaToast("Event created", {
  description: "Monday at 6:00 PM",
  action: {
    label: "Undo",
    onClick: () => console.log("Undo"),
  },
  cancel: {
    label: "Dismiss",
    onClick: () => console.log("Cancelled"),
  },
})

CSS variables

| Variable | Fallback | |----------|----------| | --apna-toast-bg | --popover | | --apna-toast-text | --popover-foreground | | --apna-toast-border | --border | | --apna-toast-description | --muted-foreground | | --apna-toast-success | --chart-2 | | --apna-toast-error | --destructive | | --apna-toast-warning | #d97706 | | --apna-toast-info | --primary | | --apna-toast-radius | 0.5rem | | --apna-toast-shadow | subtle box shadow | | --apna-toast-z-index | 300 |

Exports

• ApnaToaster, ApnaToasterProps
• apnaToast
• defaultClassNames, mergeClassNames, ApnaToastClassNames
• defaultIcons, ApnaToastIcons
• ApnaToastOptions, ExternalToast, ToastT

Playground

npm install
npm run build
cd playground
npm install
npm run dev

License

MIT