Cloudlet

Notifications, light as a cloud.

Cloudlet drifts in, stacks softly and opens into a card when it matters. Every motion on springs, every frame interruptible.

Open playgroundRead the docsGitHub

Life of a notification

One toast, from a soft landing to a promise kept.

  1. 01

    Arrives softly

    A pill grows out of thin air, on a spring.

  2. 02

    Stacks, never piles

    Newcomers land on top. The rest wait behind, counted.

  3. 03

    Opens when it matters

    The pill becomes an Island in one continuous shape. Text never stretches.

  4. 04

    Speaks up

    Warnings carry their own action and never steal focus.

  5. 05

    Keeps its promises

    track() shows loading while the work is in flight.

  6. 06

    Shows real progress

    The ring follows the upload, frame by frame.

  7. 07

    Fails gracefully

    Errors say what went wrong and keep the way forward.

  8. 08

    One tap to retry

    Retry is built in. No glue code.

  9. 09

    Lands the result

    Success replaces the spinner in place.

  10. 10

    Asks back

    A field right in the Island: ask for a word back and get it in one step.

  11. 11

    Then drifts away

    Done, it folds back into the stack and floats off like a cloud.

Drifting by

Six reasons it feels this light.

  1. 01 / 07

    Springs, not keyframes

    Every motion rides a spring. Interrupt it anywhere and it carries on from its current speed.

  2. 02 / 07

    Stack → Island

    One shell that stacks, opens and slides. Swipe it, flick it on a trackpad, or use the arrow keys.

  3. 03 / 07

    Promises built in

    track() shows loading, retries attempt by attempt and cancels for real. Your promise stays yours.

  4. 04 / 07

    Replies in place

    A form right in the Island: up to three fields, checks before sending, and a draft that waits for you.

  5. 05 / 07

    Speaks up when it matters

    attention opens what is important on its own, and never steals focus.

  6. 06 / 07

    Accessible by default

    Native controls, calm announcements, full keyboard, reduced motion and RTL.

  7. 07 / 07

    Fits your stack

    A shadcn registry item, tokens and classNames, SSR and Next.js, strict CSP. 9.3 KB of JavaScript on first load.

Get started

Install the package, mount one Toaster, call show. Guides and the API reference are in the docs.

  1. Install

    Add the package. React 18 or 19, nothing else to configure.

  2. Mount it and call show

    Import the styles once, mount one Toaster per controller, call show from anywhere below it.

    notifications.tsx
    import '@cloudlet/toast/styles.css';
import { CloudletProvider, createCloudlet, Toaster, useCloudlet } from '@cloudlet/toast';

function SaveNotice() {
  const cloudlet = useCloudlet();
  return <button onClick={() => cloudlet.show({ title: 'Saved', kind: 'success' })}>Notify</button>;
}

// The browser application bootstrap creates and owns this controller.
export function Notifications({ controller }: { controller: ReturnType<typeof createCloudlet> }) {
  return <CloudletProvider controller={controller}>
    <SaveNotice />
    <Toaster />
  </CloudletProvider>;
}

Questions

Short answers about SSR, styling, accessibility and size.

How is it different from Sonner?

Sonner is a lovely stack of toasts; Cloudlet is one stack that opens into an Island, with promises, retry and cancel built in, and every motion on interruptible springs.

Does it work with Next.js and SSR?

Yes. The server output and the first hydration render are empty, so nothing mismatches. Create the controller in a client component, import the CSS in your root layout, and anything shown before mount appears once the page hydrates.

Can it look like my app?

Yes, without Tailwind or shadcn: override the scoped --cloudlet-* tokens for colours, radii and sizes, add your own classes to any part through classNames, and pick light, dark or system. The optional shadcn item maps your theme tokens for you.

Is it accessible?

The pill is a native button and the Island a labelled carousel. Arrivals never take focus, announcements are calm and coalesced, the keyboard reaches everything, and reduced motion and RTL are respected.

How big is it?

9.3 KB of JavaScript on first load, min+gzip. The renderer (23 KB) follows right after the page mounts, the CSS is 4.0 KB. There are no runtime dependencies; the springs are its own.

Is it stable?

Yes: Cloudlet is stable since 1.0.0, and the API follows semantic versioning. Beyond the automated browser suite, screen readers, physical phones and the minimum browsers are checked by hand.

What does it cost?

Nothing. Cloudlet is MIT-licensed: use it, change it, ship it.