Dynamic Island Toast

Pro

A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.

cinematic interactionsdynamicislandtoastframer motion

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add dynamic-island-toast

Usage

Import DynamicIslandToast from @/components/wensity/dynamic-island-toast and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1"use client";
 2import { useState } from "react";
 3import {
 4  DynamicIslandToast,
 5  type DynamicIslandToastModel,
 6} from "@/components/wensity/dynamic-island-toast";
 7
 8export function DynamicIslandToastDemo() {
 9  const [toast, setToast] = useState<DynamicIslandToastModel | null>({
10    id: "upload-1",
11    variant: "upload",
12    title: "hero-final.mp4",
13    progress: 0.62,
14    duration: 4000,
15  });
16
17  return (
18    <DynamicIslandToast
19      inline
20      toast={toast}
21      onDismiss={() => setToast(null)}
22    />
23  );
24}

Props

Prop	Type	Default	Description
`toast`	DynamicIslandToast \| null	-	The active toast. Pass null to dismiss.
`secondary`	DynamicIslandToast \| null	-	Optional second activity. When set, the island enters split-mode with two pills.
`defaultExpanded`	boolean	false	Render expanded by default (useful for hero previews).
`onExpandedChange`	(expanded: boolean) => void	-	Fired whenever the user expands or collapses the island.
`onDismiss`	() => void	-	Fired when the island auto-dismisses or the user closes it.
`inline`	boolean	false	If true, position absolutely inside the nearest positioned ancestor. If false, fixed to the viewport.