# Quick start

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

Source: https://cloudlet.dev/toaster/docs/quick-start

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

## Install

```sh title="Terminal"
npm install @cloudlet/toast
```

Using shadcn/ui? The [registry item](https://cloudlet.dev/toaster/docs/installation#the-shadcn-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:

```tsx title="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](https://cloudlet.dev/toaster/docs/ssr#nextjs-app-router) has the setup.

## Show a notification

```tsx title="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();`.

```tsx
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](https://sonner.emilkowal.ski) is a great choice.

## Next steps

- [Playground](https://cloudlet.dev/toaster/playground): every kind, action and operation on a button, with the exact call to copy.
- [Notifications & time](https://cloudlet.dev/toaster/docs/notifications): `show`, `update` and `dismiss`, and how long a notification stays.
- [Operations & cancellation](https://cloudlet.dev/toaster/docs/operations): notifications that follow a promise.
- [Styling](https://cloudlet.dev/toaster/docs/styling): tokens, themes and class names, with a live editor.
- [Installation](https://cloudlet.dev/toaster/docs/installation): requirements, browsers and the shadcn registry item.