127 Components
Dynamic Island Toast
OverlaysMorphing top-edge status capsule that expands smoothly between compact badge, live telemetry pill, and actionable notification drawer.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/dynamic-island-toast.json"
Props
TypeScript props supported by <DynamicIslandToast />.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultMode | "compact" | "telemetry" | "expanded" | "compact" | Initial visual state of the morphing status island. |
| title | string | "Registry Sync Active" | Primary notification heading displayed in telemetry and expanded modes. |
| subtitle | string | "12 shadcn v2 manifests compiled in 42ms" | Detailed status description displayed in expanded mode. |
| stiffness | number | 340 | Hooke's Law spring stiffness for capsule dimension morphing. |
| damping | number | 25 | Spring damping coefficient controlling capsule oscillation decay. |
Key Features
- Three-state layout projection (compact -> telemetry -> expanded) driven by Hooke's Law spring geometry.
- Click directly on the capsule or use external state triggers to morph dimensions and border radii seamlessly.
- Includes interactive collapse and dismiss actions inside the expanded notification card.
Keyboard & Accessibility
- Uses role='status' and aria-live='polite' to announce live notification state transitions.
- All interactive stages and collapse buttons are keyboard-focusable via Tab and Enter/Space.
- Collapses transition duration to near-zero when prefers-reduced-motion is enabled.