https://github.com/shuakami/toast
A beautiful, highly customizable, and accessible toast notification system for React.
https://github.com/shuakami/toast
accessible framer-motion notifications react tailwindcss toast typescript ui-component vite
Last synced: about 1 month ago
JSON representation
A beautiful, highly customizable, and accessible toast notification system for React.
- Host: GitHub
- URL: https://github.com/shuakami/toast
- Owner: shuakami
- Created: 2026-04-06T17:47:29.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-04-06T18:14:22.000Z (4 months ago)
- Last Synced: 2026-04-06T20:14:11.997Z (4 months ago)
- Topics: accessible, framer-motion, notifications, react, tailwindcss, toast, typescript, ui-component, vite
- Language: TypeScript
- Homepage: https://shuakami-toast.vercel.app
- Size: 1.2 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A beautiful, highly customizable, and accessible toast notification system for React. Built with Framer Motion and Tailwind CSS.
## Features
- Multiple Themes: macOS Glass, Neo-brutalism, Minimal, Soft, Ocean, Warm, and Default Glass.
- Dark Mode: Full dark mode support for all themes.
- Animations: Smooth, physics-based animations using Framer Motion (Slide, Pop, Fade).
- Stacked Design: Elegant stacking behavior that expands smoothly on hover.
- Positioning: 6 different placement options (Top/Bottom + Left/Center/Right).
- Copy & Paste: No npm package bloat. Own your code, just like shadcn/ui.
## Installation
**1. Install dependencies**
```bash
npm install motion lucide-react
```
**2. Copy the component**
Copy the consolidated source code from the [documentation site](https://shuakami-toast.vercel.app) and save it to your project, for example `src/components/toast.tsx`.
## Usage
Add the `` component to your root layout or app component:
```tsx
import { Toaster, toast } from './components/toast';
export default function App() {
return (
<>
toast.success('Payment successful!')}>
Show Toast
>
);
}
```
## API Reference
```ts
// Basic
toast('Event has been created');
// Success
toast.success('Successfully saved!');
// Error
toast.error('Something went wrong.');
// Loading
toast.loading('Saving changes...');
// Promise
toast.promise(saveSettings(), {
loading: 'Saving...',
success: 'Settings saved!',
error: 'Could not save.'
});
// Custom Duration (default is 4000ms)
toast('Auto close in 5s', { duration: 5000 });
// Action Button
toast('Update available', {
action: {
label: 'Update',
onClick: () => console.log('Updating...')
}
});
```
## License
MIT