Component

Toast

A compact notification system for saved states, sync updates, and warnings.

Preview

Toasts render in the viewport and dismiss automatically.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Toast } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/toast.json

Copied source import

code

import "@/styles/axie.css";import { Toast } from "@/components/axie/toast";

Prefer @axie/toast? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Button, ToastProvider, useToast } from "axie-ui";export function Example() {  return (    <ToastProvider>      <ToastButton />    </ToastProvider>  );}function ToastButton() {  const { toast } = useToast();  return (    <Button      onClick={() =>        toast({          description: "Three entries are ready to review.",          title: "Sync finished",          tone: "accent"        })      }    >      Show toast    </Button>  );}

Accessibility

Use toasts for non-blocking feedback, not required decisions.
Do not disappear critical errors before users can read them.
Keep actions short and make dismissal available.

API Reference

Prop	Type	Default	Description
tone	neutral \| accent \| danger \| warning \| info	neutral	Controls background and border tone.
title	ReactNode	-	Toast heading.
description	ReactNode	-	Supporting toast copy.
action	ReactNode	-	Optional trailing action.
duration	number	4200	Milliseconds before a dispatched toast closes.
useToast	() => { toast, dismiss, toasts }	-	Dispatches a toast from inside ToastProvider.