Skip to main content
Solid Toast

​
Beautiful toast notifications for SolidJS

Solid Toast is a lightweight, customizable toast notification library for SolidJS applications. Built with performance and developer experience in mind, it provides a simple API for creating beautiful notifications with minimal setup.

Installation

Get started with Solid Toast in your project

Quick start

Create your first toast in under a minute

Toast types

Explore all available toast variants

Customization

Learn how to style and customize toasts

​
Key features

Lightweight

Only 4kb minified and gzipped - won’t bloat your bundle

Easily customizable

Style with CSS objects, classes, or inline styles

Promise API

Handle async operations with built-in promise support

Accessible

ARIA compliant with full screen reader support

SSR support

Works seamlessly with server-side rendering

Type-safe

Written in TypeScript with full type definitions

​
Simple and intuitive

Solid Toast provides a clean API that feels natural in SolidJS applications: 
import toast, { Toaster } from 'solid-toast';

const App = () => {
  return (
    <div>
      <button onClick={() => toast('Hello from Solid Toast!')}>
        Show toast
      </button>
      <Toaster />
    </div>
  );
};

​
Ready to get started?

Follow the installation guide to add Solid Toast to your project, or jump straight to the quick start for a hands-on introduction.

Installation

Install Solid Toast in your project

Quick start

Build your first toast notification

Build docs developers (and LLMs) love

Get started for freeTalk to us