novixuiv0.1
Install

Recipes · Feedback

Toast system

Non-blocking notifications that stack, auto-dismiss, and offer an inline action — the confirmation UX that replaces most dialogs.

Preview

The exact composition below is what ships in production apps built on Nova.

Workspace saved

Changes applied to 4 members.

Invite sent to grace@nova.dev

Source

tsx
import { Toaster, toast } from "sonner";
import { Button } from "@novix-ui/react";
 
export function AppRoot({ children }) {
  return (
    <>
      {children}
      <Toaster
        position="bottom-right"
        toastOptions={{ className: "nova-card-surface rounded-xl" }}
      />
    </>
  );
}
 
// Usage
toast.success("Workspace saved", {
  description: "Changes applied to 4 members.",
  action: { label: "Undo", onClick: revert },
});

Anatomy

  • Stack at bottom-right on desktop; bottom-center on mobile.
  • Success toasts auto-dismiss at 4s; errors persist until acknowledged.
  • Inline Undo action wherever the outcome is reversible.
  • Respect prefers-reduced-motion — slide gives way to fade.