Sileo vue

Physics-based, stackable toast notifications for Vue 3.

Original effect by hiaaryan · independent Vue port

Playground

Every toast fires into the real viewport

Position

Variant

Align

Visible

What it does

v0.2.1

Stacked by position

Toasts sharing a corner collapse into a stack. Hover spreads them apart; maxVisibleToasts caps how many stay on screen.

Physics, not easing curves

A spring drives the pill morph and a gooey SVG filter keeps the body attached while it expands.

Drag to dismiss

Swipe a toast vertically to send it away. The cursor turns into a grab handle and a grip appears on the edge; text stays unselectable so the gesture never snags.

Keyboard and screen readers

Tab focuses, Enter toggles the description, Escape dismisses. Errors and warnings announce as alerts.

Three surfaces

Neutral, colored and gradient variants, each with light and dark presets you can override per state.

Install

npm install @danixts/sileo-vue

<script setup lang="ts">
import { Toaster } from '@danixts/sileo-vue'
import '@danixts/sileo-vue/styles.css'
</script>

<template>
  <Toaster position="top-right" theme="system" />
</template>

import { sileo } from '@danixts/sileo-vue'

sileo.success({
  title: 'Changes saved',
  description: 'Your workspace is in sync.',
})

const id = sileo.info({ title: 'Syncing' })
sileo.success({ id, title: 'Synced' })

await sileo.promise(saveProfile(), {
  loading: { title: 'Saving' },
  success: (profile) => ({ title: `Saved ${profile.name}` }),
  error: (error) => ({ title: 'Could not save', description: String(error) }),
})

Sibling ports

Same design system

Border Beam

Animated borders for native TypeScript, Astro and Vue.Open playground

Liquid Gooey

Morphing gooey specimens driven by springs.Open playground