dalao.ai

Sonner & Vaul

Toasts and drawers with pixel-level feelOpen source

About Sonner & Vaul

Sonner (toasts) and Vaul (a drawer) are two free, MIT-licensed React components by design engineer Emil Kowalski, known for their motion and gesture feel. As of 2026-10-25 they have split: Sonner is still maintained, latest 2.0.8 from 2026-08-10; Vaul's README has said unmaintained since 2025-10-04, last release 1.1.2 on 2024-12-14. shadcn/ui's Radix variant still uses both, but its default Base UI variant now ships Base UI's own toast and drawer.

EditorialUpdated 10 min read

What it is

Sonner is a React toast component. An app renders one <Toaster />, calls toast('Saved') from anywhere, and a notice pops up in a screen corner; several toasts stack into a pile that expands on hover and can be dismissed with a swipe. The repo calls it an "opinionated" toast component, meaning the default look and behaviour are already decided and work out of the box.

Vaul is a React drawer component: the panel common on phones that slides up from the bottom and can be dragged down to close. In the launch blog post the author says the goal was to reproduce the feel of the native iOS Sheet on the web. It is built on the Radix Dialog primitive, so Radix handles focus management and accessibility, and the API follows Radix conventions.

Both libraries come from Emil Kowalski, whose site gives the title design engineer. The author also runs a paid animation course, animations.dev, and the docs of both libraries carry a sign-up banner for a newer course, aiforui.dev.

As of 2026-10-25 the Sonner repo has 13,080 stars, 468 forks and about 88 contributors with GitHub accounts; the Vaul repo has 8,654 stars and about 42 contributors with GitHub accounts (all per the GitHub API). Both are MIT-licensed, with no paid tier and no hosted service.

An opinionated toast component for React.

Sonner repository description

Core capabilities

Stacking animation. Sonner's signature is the way several toasts stack into a pile: each one behind is offset upward by its index and scaled down a step, creating depth. In the blog post the author says this stacking animation had been done by some companies before but never open-sourced, and that Sonner took off because of it. It uses CSS transitions, which can change target midway, instead of keyframe animations, so when several toasts fire quickly the older ones glide to their new spots instead of jumping.

Velocity-based swipe to dismiss. Swiping does not require crossing a fixed distance: a fast enough flick dismisses the toast even over a short distance. The blog post explains the rule: drag distance divided by elapsed time gives a velocity, and the toast is removed above a threshold.

The common types are covered. toast() supports success, error, loading, action-button and cancel-button styles; toast.promise shows a loading state and updates to the result when the async task resolves or rejects; custom JSX can also be passed, or headless mode keeps only the behaviour and leaves the whole look to the developer. Toasts stay for 4 seconds by default, adjustable per toast.

Position and layout are adjustable. <Toaster /> supports six positions: top-left, top-center, top-right, bottom-left, bottom-center and bottom-right. By default up to 3 toasts are visible at once; the limit can be raised or the stack kept always expanded. The desktop offset from the screen edge defaults to 32 pixels, switching to a 16-pixel mobile offset below 600 pixels of width. Since 2.0.7, released 2025-08-03, a page can hold several Toasters, with an id routing each toast to a region.

Accessibility and details. The default hotkey ⌥/Alt + T moves focus to the toast region; 2.0.8 added custom aria labels; right-to-left direction is supported; and the stylesheet has rules for the reduced-motion system setting.

Small, with no dependencies. As of 2026-10-25 Bundlephobia lists 2.0.8 at about 34.1 KB minified and about 9.4 KB gzipped, with no runtime dependencies; it only needs React 18 or 19 in the project.

Vaul's gestures. Dragging carries momentum, so a light flick closes the drawer; pulling further up when already at the top makes the drawer feel progressively heavier, imitating the damping of a physical object. Content inside the drawer can scroll, and dragging is only allowed once scrolled to the top; the author added a 100-millisecond buffer so fast scrolling does not close it by accident. It also supports snap points and an effect that scales the page background into a card behind the drawer.

A guide for AI coding assistants. As of 2026-10-25 Sonner's README offers a skill package named ask-sonner that can be added to AI coding tools that support skills, so the tool can help integrate and debug Sonner.

Who it's for / Not for

For:

Teams building products in React who want a toast component that looks good by default. Sonner works with two lines of code, with motion and gestures already tuned, and no design spec needed.

Projects on the Radix variant of shadcn/ui. Its Radix Toast page says the old component is deprecated in favour of the sonner component, and its Radix Drawer page says it is built on top of Vaul; in such projects Sonner and Vaul are usually already dependencies.

Front-end engineers who want to learn motion implementation. The author published the reasoning behind both components as blog posts with code, from the stacking maths to interruptible transitions and velocity checks, which makes good study material.

Not for:

New projects that will depend on a drawer for years. Vaul's README has said since 2025-10-04 that it is unmaintained and the author will not return soon; as of 2026-10-25 the repo has 135 open issues and 27 open pull requests.

Projects not using React. Both are React-only, so Vue, Svelte or plain JavaScript projects need a library from their own ecosystem.

Notification centres, persisted messages or push. Sonner only handles transient on-screen notices; it keeps no history and does not deal with server push.

Teams whose design differs heavily from the defaults. The docs themselves recommend headless mode for heavy customisation; overriding the defaults with class names requires !important.

How it compares

Against react-hot-toast and React-Toastify. Both are also MIT-licensed React toast libraries; as of 2026-10-25 they have 10,988 and 13,444 GitHub stars. Per npm's official downloads API, in the week 2026-09-28 to 2026-10-04 sonner was downloaded about 63.5 million times, react-hot-toast about 4.49 million and React-Toastify about 4.61 million. Downloads include automated installs from CI and dependency chains, so they show relative scale, not user counts. shadcn/ui's Radix variant uses Sonner as its toast component.

Against Base UI Toast. Base UI is an unstyled React component library, MIT-licensed, at version 1.9.0 per its docs as of 2026-10-25. Its Toast also supports stacking, swipe to dismiss, promises and action buttons, and adds a global manager. In July 2026 shadcn/ui made Base UI the default for new projects and released a new Toast built on Base UI primitives for that variant.

Vaul against Base UI Drawer. Base UI Drawer supports snap points, nested drawers, virtual-keyboard awareness, swipe-to-open from the edge and a background indent effect, covering Vaul's main features, and it is actively maintained. shadcn/ui's Base UI Drawer page says the component switched from Vaul to Base UI and links a migration guide.

Getting started

Step one, add the package. Run pnpm i sonner in the project (npm or yarn work too). The project needs React 18 or 19.

Step two, place the Toaster. Put <Toaster /> at the root of the app, for example in a Next.js layout.tsx; the docs note it can live in a server component. For dark mode, pass the current theme from a theme provider such as next-themes to the theme prop.

Step three, call it. Anywhere, import { toast } from 'sonner' and call toast('Saved'); use toast.success and toast.error for outcomes, and toast.promise with a Promise and text for the three states for async work.

Step four, adjust the look. For small changes set styles or class names globally via toastOptions; for large ones use headless mode and write your own JSX. Overriding default styles with Tailwind needs !important, as the docs point out.

With shadcn/ui: in the Radix variant, add the sonner component with shadcn's add command. The Base UI variant's Toast is a different implementation, where a manager comes from useToastManager and toastManager.add replaces Sonner's toast(), so do not mix the two sets of docs.

Getting started with Vaul: run pnpm i vaul and compose Drawer.Root, Drawer.Trigger, Drawer.Portal, Drawer.Overlay and Drawer.Content, the same pattern as Radix Dialog. The author's blog notes that the drawer previously in use had problems with inputs.

Pricing & license

Entirely free. As of 2026-10-25 Sonner and Vaul are both published on npm under the MIT license, with no paid, pro or hosted tier; commercial projects can use them as long as the license notice is kept.

Where the license came from. Sonner's LICENSE.md was added in commit 2f6f087 ("add license") at 2023-02-23 19:06 (UTC+8) with MIT text and has not changed since; Vaul's license file was already in the first commit, 7ff134e, at 2023-07-23 21:44 (UTC+8), also MIT and also unchanged.

The author's income is separate from both libraries: a paid animation course, animations.dev, whose page says more than 13,000 designers and engineers have taken it (as reported by the vendor, as of 2026-10-25), with the next enrollment opening on 2026-11-10.

Hidden cost. With Vaul unmaintained, problems have to be fixed by its users or handled by migrating to another component.

Risks & limits

Vaul is unmaintained. The top of the README says the repo is unmaintained, that the author might come back at some point but not in the near future, and that it was always a hobby project the author has neither the time nor the will to work on now. The note was added in commit 3e97aac at 2025-10-04 03:25 (UTC+8). As of 2026-10-25 the Vaul docs home page carries no such notice.

Sonner's releases. 2.0.7 shipped on 2025-08-03 and 2.0.8 on 2026-08-10; the fixes in 2.0.8 include the author's own "Fix a batch of reported issues". As of 2026-10-25, 40 issues are open.

Single-maintainer risk. The design and main commits of both libraries come from the author alone, who describes Vaul as a hobby project.

The ecosystem is moving. Since July 2026 shadcn/ui has made Base UI the default for new projects, and neither the toast nor the drawer of that variant uses Sonner or Vaul. The Radix variant is still supported.

Customisation. Overriding default styles with class names needs !important; the docs suggest headless mode for heavy customisation, which means writing the whole look from scratch.

How it got here

On 2023-02-23 the Sonner repo was created and the MIT license added the same day. In the blog post the author recalls that the React toast market was already crowded, and deliberately avoided functional names like react-toast, picking the French word sonner, meaning "to ring". From March 2023, 0.x releases followed, and demo videos of the stacking animation spread on social media.

On 2023-07-23 Vaul's first commit landed. In the blog post the author says the team at Vercel at the time already used a similar drawer, but it lacked drag-to-dismiss and had issues with inputs, so the author wrote a new one from scratch and open-sourced it; Vaul 0.1 shipped on 2023-07-27.

On 2023-09-20 Sonner 1.0.0 shipped, adding velocity-aware swipe dismissal and a docs site. shadcn/ui later adopted Sonner as its recommended toast and built its Drawer on Vaul, carrying both libraries into a large number of projects through its templates.

On 2024-09-27 Vaul 1.0.0 shipped with a new docs site; 1.1.2 followed on 2024-12-14, and there has been no release since.

On 2025-02-19 Sonner 2.0.0 shipped, with release notes describing it as mostly bug fixes. Through 2025 the 2.0.x line added features such as multiple Toasters and test ids.

On 2025-10-04 the author marked Vaul as unmaintained in its README.

In July 2026 shadcn/ui announced Base UI as the default for new projects and released a new Toast for the Base UI variant; that variant's Drawer also moved from Vaul to a Base UI implementation. On 2026-08-10 Sonner 2.0.8 shipped, merging a year of accumulated fixes. The author's blog says Sonner is downloaded over 40 million times a week and used by companies such as Cursor, X and OpenAI (as reported by the author; the post is undated).

Our verdict

What sets Sonner and Vaul apart: Sonner has no runtime dependencies, takes two lines to set up, ships stacking animation and velocity-based swipe dismissal by default, and is still maintained as of 2026-10-25; Vaul reproduces the drag feel of the iOS Sheet; and the author wrote up the implementation details of both in public posts.

Their limits: Vaul has been marked unmaintained since 2025-10-04; a year separates Sonner 2.0.7 and 2.0.8, and both libraries are maintained mainly by the author alone; the Base UI variant of shadcn/ui now uses Base UI's own toast and drawer; heavy customisation needs headless mode or !important.

Why it stands out

Sonner is a toast component and Vaul is a drawer, and together they are the best short course available on how interactive interfaces should feel. Emil Kowalski built both with a level of attention to timing, stacking, swipe physics, and reduced-motion behaviour that most product teams never reach.

The libraries are small, dependency-light, and used in a large share of modern React apps, including the components that shadcn/ui ships by default. His writing on animation is as valuable as the code.

Sonner (toasts) and Vaul (drawers) are small, dependency-light libraries, and the components shadcn/ui ships use them by default.

Sources

Official

  1. emilkowalski/sonner: An opinionated toast component for React (GitHub)GitHub · Accessed Oct 25, 2026
  2. Releases · emilkowalski/sonner (GitHub)GitHub · Accessed Oct 25, 2026
  3. add license · emilkowalski/sonner@2f6f087 (GitHub)GitHub · Accessed Oct 25, 2026
  4. sonner package.json (GitHub)GitHub · Accessed Oct 25, 2026
  5. Getting Started – Sonnersonner.emilkowal.ski · Accessed Oct 25, 2026
  6. Toast – Sonnersonner.emilkowal.ski · Accessed Oct 25, 2026
  7. Toaster – Sonnersonner.emilkowal.ski · Accessed Oct 25, 2026
  8. Styling – Sonnersonner.emilkowal.ski · Accessed Oct 25, 2026

Updates & reading