Cloudlet

Quick start

Install Cloudlet, mount the Toaster and show the first notification.

On this page

Cloudlet is a toaster for React 18 and 19, Next.js included. Three steps get the first notification on screen.

Install

Terminal
npm install @cloudlet/toast

Using shadcn/ui? The registry item adds a wrapper themed with your tokens.

Mount the Toaster

Create one controller where your application starts, and render the Toaster inside its Provider:

main.tsx
import '@cloudlet/toast/styles.css';
import { createRoot } from 'react-dom/client';
import { CloudletProvider, createCloudlet, Toaster } from '@cloudlet/toast';
import { App } from './app';

// Once, when the browser application starts.
const cloudlet = createCloudlet();

createRoot(document.getElementById('root')!).render(
  <CloudletProvider controller={cloudlet}>
    <App />
    <Toaster />
  </CloudletProvider>,
);

In the Next.js App Router a client component creates the controller instead: SSR & Next.js has the setup.

Show a notification

app.tsx
import { useCloudlet } from '@cloudlet/toast';

export function App() {
  const cloudlet = useCloudlet();
  return <button onClick={() => cloudlet.show({ title: 'Synced to the cloud', kind: 'success' })}>Sync</button>;
}

Snippets assume const cloudlet = useCloudlet(); — the buttons call them on this page’s own Toaster.

success
cloudlet.show({ title: 'Synced to the cloud', kind: 'success' });

Why Cloudlet

  • One stack that morphs. Notifications collapse into a single pill. Open it and the stack morphs into the Island, one surface to read, retry or close every notification. All motion runs on springs and can be interrupted mid-flight.
  • Operations, not just messages. track a promise and one notification shows the pending state, progress and result, with Retry and cooperative cancel.
  • Forms in the Island. A notification can ask back: a reply or a short note, sent without a dialog.
  • Accessible. Arrivals never take focus, announcements are calm, the keyboard reaches everything; checked with VoiceOver.
  • Fits your stack. Renders nothing on the server, works under a strict CSP, has no runtime dependencies and no Tailwind requirement.

Need a plain toast, without the Island and the motion? Sonner is a great choice.

Next steps