tebric

Tebric

Tebric — gentle messages that arrive like whispers and fade like a breeze.

A beautifully crafted, lightweight, and customizable toast notification library for React.
Built with Tailwind CSS, motion/react animations, and lucide-react icons —
designed to deliver subtle, elegant, and accessible feedback for your users.

🚀 Features

• ✅ Toast types: success, error, info, warning, default
• ✅ Custom JSX content support for fully flexible messages
• ✅ Auto-dismiss with configurable duration
• ✅ Manual dismiss with accessible close button
• ✅ Smooth, performant animations powered by motion/react
• ✅ Crisp SVG icons from lucide-react
• ✅ ARIA roles & polite announcements for accessibility
• ✅ Positioning support (top-right by default; easily extendable)
• ✅ Promise-based toast for async workflows (toast.promise())
• ✅ TypeScript support included
• ✅ Tailwind CSS for easy styling and customization
• ✅ Minimal dependencies — no Framer Motion required

📦 Installation

Install Tebric and its peer dependencies:

npm install tebric motion lucide-react tailwindcss
# or
yarn add tebric motion lucide-react tailwindcss

🧑‍💻 Usage

1. Wrap your app in the ToastProvider

import { ToastProvider } from "tebric";

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

2. Trigger toasts anywhere with the toast API

import { toast } from "tebric";

// Simple toasts
toast.success("Operation successful!");
toast.error("Oops! Something went wrong.");
toast.info("Here’s some info.");
toast.warning("Heads up!");
toast.custom(
  <div>
    <strong>Custom JSX 🎉</strong>
  </div>
);

// Promise toast for async calls
toast.promise(fetchData(), {
  loading: "Loading data...",
  success: "Data loaded successfully!",
  error: "Failed to load data.",
});

🧩 Toast API

Method	Description	Params
toast.success	Show a success toast	(content: ReactNode, options?: Partial<Toast>)
toast.error	Show an error toast	(content: ReactNode, options?: Partial<Toast>)
toast.info	Show an info toast	(content: ReactNode, options?: Partial<Toast>)
toast.warning	Show a warning toast	(content: ReactNode, options?: Partial<Toast>)
toast.custom	Show custom JSX toast	(content: ReactNode, options?: Partial<Toast>)
toast.update	Update existing toast by ID	(id: string, updates: Partial<Toast>)
toast.dismiss	Dismiss toast by ID, or all if no ID	(id?: string)
toast.promise	Show toast based on Promise state	(promise: Promise<T>, messages: {loading, success, error})

🎨 Customization

• Uses Tailwind CSS for styling — override styles easily via utility classes.
• Icons from lucide-react — replace or customize icons if needed.
• Animation controlled via motion/react with smooth fade and scale effects.
• Accessible ARIA roles and live regions for screen readers.

⚙️ Development

• Written in TypeScript with React 18.
• Build with Vite using ESM and CJS outputs.
• Peer dependencies: react, react-dom, motion, lucide-react.
• Supports modern browsers with ES modules.

🧾 License

MIT © Ebn Sina

📜 About

Tebric — gentle messages that arrive like whispers and fade like a breeze.
Notifications crafted to be soft, swift, and beautifully fleeting.
Where every toast is a quiet celebration, graceful and brief.

Feel free to open issues or contribute!

Happy coding with Tebric! 🌿