A beautiful, highly customizable React toast notification library with smooth animations, dark/light themes, and TailwindCSS styling
A beautiful, highly customizable React toast notification library with smooth animations, dark/light themes, and TailwindCSS styling.
š Documentation & Live Preview ⢠š¦ NPM



---
- 10 Animation Styles ā fade, slide, zoom, bounce, elastic, flip, blur, roll, swing, pop
- Dark & Light Themes ā Automatic system theme detection
- 6 Positions ā top/bottom + left/center/right
- 5 Toast Types ā success, error, info, warning, loading
- Shimmer Effect ā Beautiful loading animation
- Action Buttons ā Customizable call-to-action buttons
- Lightweight ā ~11KB minified, tree-shakeable
- TypeScript ā Full type support out of the box
---
``bash`
npm install hypertoast
`bash`
yarn add hypertoast
`bash`
pnpm add hypertoast
---
HyperToast requires TailwindCSS v3+ in your project. The toasts are styled using Tailwind utility classes.
If you don't have TailwindCSS installed, follow the official guide.
---
Add HyperToast to your tailwind.config.js content paths and add the shimmer animation:
`js`
// tailwind.config.js
module.exports = {
content: [
'./src/*/.{js,ts,jsx,tsx}',
'./node_modules/hypertoast/*/.{js,mjs}', // š Add this line
],
theme: {
extend: {
animation: {
shimmer: 'shimmer 2s linear infinite',
},
keyframes: {
shimmer: {
'0%': { backgroundPosition: '200% center' },
'100%': { backgroundPosition: '-200% center' },
},
},
},
},
plugins: [],
};
Wrap your app with ToastProvider:
`tsx
// App.tsx or _app.tsx or layout.tsx
import { ToastProvider } from 'hypertoast';
function App() {
return (
);
}
export default App;
`
#### For Next.js App Router (v13+)
Create a client wrapper component:
`tsx
// components/Providers.tsx
"use client";
import { ToastProvider } from 'hypertoast';
export function Providers({ children }: { children: React.ReactNode }) {
return
}
`
Then use it in your layout:
`tsx
// app/layout.tsx
import { Providers } from '@/components/Providers';
export default function RootLayout({ children }) {
return (
---
Basic Usage
`tsx
import { useToast } from 'hypertoast';function MyComponent() {
const { success, error, info, warning, loading } = useToast();
return (
);
}
`---
Advanced Usage
$3
`tsx
const { toast } = useToast();toast({
message: 'File uploaded successfully',
type: 'success',
duration: 5000, // 5 seconds (default: 4000)
shimmer: false,
});
`$3
`tsx
const { toast } = useToast();toast({
message: 'Message sent',
type: 'success',
action: {
label: 'Undo',
onClick: () => {
console.log('Undo clicked!');
},
variant: 'green', // 'default' | 'green' | 'red' | 'yellow' | 'orange'
},
});
`$3
`tsx
const { loading } = useToast();// The third parameter enables the shimmer animation
loading('Processing your request...', undefined, true);
`---
Customization
$3
`tsx
const { setPosition } = useToast();// Options: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
setPosition('top-right');
`$3
`tsx
const { setAnimation } = useToast();// Options: 'fade' | 'slide' | 'zoom' | 'bounce' | 'elastic' | 'flip' | 'blur' | 'roll' | 'swing' | 'pop'
setAnimation('bounce');
`$3
`tsx
const { setRadius } = useToast();// Options: 'none' | 'small' | 'medium' | 'large' | 'full'
setRadius('full');
`$3
`tsx
const { setTheme } = useToast();// Options: 'light' | 'dark' | 'system'
setTheme('dark');
`---
API Reference
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
children | ReactNode | ā | Your app content |
| initialTheme | 'light' \| 'dark' \| 'system' | 'system' | Initial theme setting |$3
| Method | Parameters | Description |
|--------|------------|-------------|
|
success | (message, action?) | Show success toast |
| error | (message, action?) | Show error toast |
| info | (message, action?) | Show info toast |
| warning | (message, action?) | Show warning toast |
| loading | (message, action?, shimmer?) | Show loading toast |
| toast | ({ message, type, duration, action, shimmer }) | Show custom toast |
| dismiss | (id) | Dismiss a toast by ID |
| setPosition | (position) | Change toast position |
| setAnimation | (animation) | Change animation style |
| setRadius | (radius) | Change border radius |
| setTheme | (theme) | Change theme |$3
| Property | Type | Required | Description |
|----------|------|----------|-------------|
|
label | string | ā
| Button text |
| onClick | () => void | ā
| Click handler |
| variant | 'default' \| 'green' \| 'red' \| 'yellow' \| 'orange' | ā | Button color |---
TypeScript
HyperToast is written in TypeScript and exports all types:
`tsx
import type {
Toast,
ToastAction,
ToastType,
ToastPosition,
ToastAnimation,
ToastRadius,
ToastTheme,
} from 'hypertoast';
`---
Framework Compatibility
| Framework | Status | Notes |
|-----------|--------|-------|
| Vite + React | ā
| Works out of the box |
| Next.js (Pages Router) | ā
| Works out of the box |
| Next.js (App Router) | ā
| Use
"use client"` wrapper |---
MIT Ā© DAZ
---
Found a bug or have a feature request? Email us at dzmymgmt@gmail.com.