Toast

An imperative toast/notification system with an accessible live region, auto-dismiss, and tone-by-status coloring.

Real use · trigger toasts (uses the app-level ToastProvider)

Using Toast

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so a component that needs interaction is styled but inert.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class toast, with 6 modifiers:

.toast
.toast-action
.toast-close
.toast-content
.toast-description
.toast-title
.toast-viewport

The full API for Toast, on every path, is available through the Silica MCP server.