Tile UI Vue
Source code

Components

Sonner

Toast notifications.

Use Toaster and the toast helper to show transient notifications.

import { toast, Toaster } from '@tile-ui/vue';
 
export default function SonnerDemo() {
	let loadingId = '';
	return (
		<div class="component-preview__stack">

Registry install

pnpm dlx shadcn@latest add @tile-ui/sonner

Package usage

import { Toaster } from '@tile-ui/vue';
 
<Toaster position="bottom-right" />

Highlights

  • Six types
  • Positions and duration
  • Rich colors and themes

Registry dependencies

Item Purpose
sonner Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Toaster

Prop Type Default
position 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center' —
duration number —
closeButton boolean —
richColors boolean —
theme 'light' | 'dark' | 'system' —
PreviousSliderNextSpinner