Toast

Toast notifications provide brief, non-intrusive feedback messages.

Preview

Show Toast

Installation

Package

import { ToastProvider, useToast } from '@smc/darwin-ui';

shadcn CLI

npx shadcn add https://darwin-ui.mandalsuraj.com/registry/toast.json

Setup

Wrap your app with ToastProvider:

import { ToastProvider } from '@smc/darwin-ui';

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

Usage

import { useToast, Button } from '@smc/darwin-ui';

export function Example() {
  const { showToast } = useToast();

  return (
    <Button
      onClick={() =>
        showToast({
          message: 'Action completed!',
          type: 'success',
        })
      }
    >
      Show Toast
    </Button>
  );
}

Variants

Type	Color	Use Case
info	Blue	General information
success	Green	Successful actions
warning	Amber	Warnings, caution
error	Red	Errors, failures

Duration

showToast({
  message: 'Custom duration',
  type: 'info',
  duration: 5000, // 5 seconds
});

API Reference

useToast Hook

const { showToast } = useToast();

showToast Options

Option	Type	Default	Description
message	string	-	Toast message
type	ToastType	"info"	Toast variant
duration	number	3000	Auto-dismiss time (ms)

ToastType

type ToastType = 'info' | 'success' | 'warning' | 'error';